diff --git a/exporter/src/app/http/export.cljs b/exporter/src/app/http/export.cljs index 62eb4a2fe..a3ff36dbd 100644 --- a/exporter/src/app/http/export.cljs +++ b/exporter/src/app/http/export.cljs @@ -95,8 +95,8 @@ (defn- find-filename-candidate [params used] (loop [index 0] - (let [candidate (str (str/slug (:name params)) - (str/trim (str/blank? (:suffix params ""))) + (let [candidate (str (:name params) + (:suffix params "") (when (pos? index) (str "-" (inc index))) (case (:type params) diff --git a/exporter/src/app/http/export_bitmap.cljs b/exporter/src/app/http/export_bitmap.cljs index e41b2e584..b2c46c9e2 100644 --- a/exporter/src/app/http/export_bitmap.cljs +++ b/exporter/src/app/http/export_bitmap.cljs @@ -62,8 +62,8 @@ (p/let [content (screenshot-object browser params)] {:content content :filename (or (:filename params) - (str (str/slug (:name params)) - (str/trim (:suffix params "")) + (str (:name params) + (:suffix params "") (case (:type params) :png ".png" :jpeg ".jpg"))) diff --git a/exporter/src/app/http/export_svg.cljs b/exporter/src/app/http/export_svg.cljs index f0efa14b5..a5e9e8955 100644 --- a/exporter/src/app/http/export_svg.cljs +++ b/exporter/src/app/http/export_svg.cljs @@ -261,8 +261,8 @@ (p/let [content (render-object browser params)] {:content content :filename (or (:filename params) - (str (str/slug (:name params)) - (str/trim (:suffix params "")) + (str (:name params) + (:suffix params "") ".svg")) :length (alength content) :mime-type "image/svg+xml"})) diff --git a/frontend/resources/locales.json b/frontend/resources/locales.json index cc7b817ac..ef9428dcf 100644 --- a/frontend/resources/locales.json +++ b/frontend/resources/locales.json @@ -4092,10 +4092,10 @@ "workspace.toolbar.path" : { "used-in" : [ "src/app/main/ui/workspace/left_toolbar.cljs:98" ], "translations" : { - "en" : "Path", - "fr" : "Chemin", - "ru" : "Линия", - "es" : "Ruta" + "en" : "Path (P)", + "fr" : "Chemin (P)", + "ru" : "Линия (P)", + "es" : "Ruta (P)" } }, "workspace.toolbar.rect" : { diff --git a/frontend/resources/styles/main/partials/dashboard-sidebar.scss b/frontend/resources/styles/main/partials/dashboard-sidebar.scss index 3fdd61e57..eca4e70e2 100644 --- a/frontend/resources/styles/main/partials/dashboard-sidebar.scss +++ b/frontend/resources/styles/main/partials/dashboard-sidebar.scss @@ -277,7 +277,7 @@ border-color: $color-black; } - .clear-search { + .search, .clear-search { align-items: center; cursor: pointer; display: flex; @@ -289,7 +289,6 @@ svg { fill: $color-gray-30; height: 15px; - transform: rotate(45deg); width: 15px; &:hover { @@ -297,6 +296,10 @@ } } } + + .clear-search svg { + transform: rotate(45deg); + } } &.profile-bar { diff --git a/frontend/src/app/main/repo.cljs b/frontend/src/app/main/repo.cljs index 83c114e04..d6effae0e 100644 --- a/frontend/src/app/main/repo.cljs +++ b/frontend/src/app/main/repo.cljs @@ -18,7 +18,8 @@ [{:keys [status body] :as response}] (cond (= 204 status) - (rx/empty) + ;; We need to send "something" so the streams listening downstream can act + (rx/of :empty) (= 502 status) (rx/throw {:type :bad-gateway}) diff --git a/frontend/src/app/main/ui/dashboard/sidebar.cljs b/frontend/src/app/main/ui/dashboard/sidebar.cljs index a1d771ab0..7804168de 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.cljs +++ b/frontend/src/app/main/ui/dashboard/sidebar.cljs @@ -75,12 +75,14 @@ (mf/defc sidebar-search [{:keys [search-term team-id locale] :as props}] (let [search-term (or search-term "") + focused? (mf/use-state false) emit! (mf/use-memo #(f/debounce st/emit! 500)) on-search-focus (mf/use-callback (mf/deps team-id) (fn [event] + (reset! focused? true) (let [target (dom/get-target event) value (dom/get-value target)] (dom/select-text! target) @@ -88,6 +90,11 @@ (emit! (rt/nav :dashboard-search {:team-id team-id} {})) (emit! (rt/nav :dashboard-search {:team-id team-id} {:search-term value})))))) + on-search-blur + (mf/use-callback + (fn [event] + (reset! focused? false))) + on-search-change (mf/use-callback (mf/deps team-id) @@ -114,11 +121,18 @@ :default-value search-term :auto-complete "off" :on-focus on-search-focus + :on-blur on-search-blur :on-change on-search-change :ref #(when % (set! (.-value %) search-term))}] - [:div.clear-search - {:on-click on-clear-click} - i/close]])) + + (if (or @focused? (not (empty? search-term))) + [:div.clear-search + {:on-click on-clear-click} + i/close] + + [:div.search + {:on-click on-clear-click} + i/search])])) (mf/defc teams-selector-dropdown [{:keys [team profile locale] :as props}] diff --git a/frontend/src/app/main/ui/handoff/attributes/image.cljs b/frontend/src/app/main/ui/handoff/attributes/image.cljs index 30ffb53d4..6fff88cc3 100644 --- a/frontend/src/app/main/ui/handoff/attributes/image.cljs +++ b/frontend/src/app/main/ui/handoff/attributes/image.cljs @@ -13,6 +13,7 @@ [cuerdas.core :as str] [app.config :as cfg] [app.util.i18n :refer [t]] + [app.util.dom :as dom] [app.main.ui.icons :as i] [app.util.code-gen :as cg] [app.main.ui.components.copy-button :refer [copy-button]])) @@ -20,18 +21,6 @@ (defn has-image? [shape] (and (= (:type shape) :image))) -(defn mtype->extension [mtype] - ;; https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types - (case mtype - "image/apng" "apng" - "image/avif" "avif" - "image/gif" "gif" - "image/jpeg" "jpg" - "image/png" "png" - "image/svg+xml" "svg" - "image/webp" "webp" - nil)) - (mf/defc image-panel [{:keys [shapes locale]}] (let [shapes (->> shapes (filter has-image?))] (for [shape shapes] @@ -52,7 +41,7 @@ (let [mtype (-> shape :metadata :mtype) name (:name shape) - extension (mtype->extension mtype)] + extension (dom/mtype->extension mtype)] [:a.download-button {:target "_blank" :download (if extension (str name "." extension) diff --git a/frontend/src/app/main/ui/measurements.cljs b/frontend/src/app/main/ui/measurements.cljs index 63f91e931..a57d6b453 100644 --- a/frontend/src/app/main/ui/measurements.cljs +++ b/frontend/src/app/main/ui/measurements.cljs @@ -205,21 +205,22 @@ (let [center-x (+ x1 (/ (- x2 x1) 2)) center-y (+ y1 (/ (- y2 y1) 2)) distance (gpt/distance (gpt/point x1 y1) (gpt/point x2 y2))] - [:g.distance-line {:key (str "line-%s-%s-%s-%s" x1 y1 x2 y2)} - [:line - {:x1 x1 - :y1 y1 - :x2 x2 - :y2 y2 - :style {:stroke distance-color - :stroke-width distance-line-stroke}}] + (when-not (mth/almost-zero? distance) + [:g.distance-line {:key (str "line-%s-%s-%s-%s" x1 y1 x2 y2)} + [:line + {:x1 x1 + :y1 y1 + :x2 x2 + :y2 y2 + :style {:stroke distance-color + :stroke-width distance-line-stroke}}] - [:& distance-display-pill - {:x center-x - :y center-y - :zoom zoom - :distance (str (mth/round distance) "px") - :bounds bounds}]])))) + [:& distance-display-pill + {:x center-x + :y center-y + :zoom zoom + :distance (str (mth/round distance) "px") + :bounds bounds}]]))))) (mf/defc selection-guides [{:keys [bounds selrect zoom]}] [:g.selection-guides @@ -233,11 +234,12 @@ :stroke-dasharray (/ select-guide-dasharray zoom)}}])]) (mf/defc measurement [{:keys [bounds frame selected-shapes hover-shape zoom]}] - (let [selected-selrect (gsh/selection-rect selected-shapes) + (let [selected-ids (into #{} (map :id) selected-shapes) + selected-selrect (gsh/selection-rect selected-shapes) hover-selrect (:selrect hover-shape) bounds-selrect (bound->selrect bounds)] - (when (seq selected-shapes) + (when (and (seq selected-shapes) (not (contains? selected-ids (:id hover-shape)))) [:g.measurement-feedback {:pointer-events "none"} [:& selection-guides {:selrect selected-selrect :bounds bounds :zoom zoom}] [:& size-display {:selrect selected-selrect :zoom zoom}] diff --git a/frontend/src/app/main/ui/shapes/text.cljs b/frontend/src/app/main/ui/shapes/text.cljs index c22da1aa6..d3d9b769c 100644 --- a/frontend/src/app/main/ui/shapes/text.cljs +++ b/frontend/src/app/main/ui/shapes/text.cljs @@ -115,7 +115,9 @@ (let [shape (unchecked-get props "shape") grow-type (unchecked-get props "grow-type") embed-fonts? (mf/use-ctx muc/embed-ctx) - {:keys [id x y width height content]} shape] + {:keys [id x y width height content]} shape + ;; We add 8px to add a padding for the exporter + width (+ width 8)] [:foreignObject {:x x :y y :id (:id shape) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/exports.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/exports.cljs index f25469a8f..8dc48bf43 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/exports.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/exports.cljs @@ -35,11 +35,15 @@ :exports exports}})) (defn- trigger-download - [name blob] + [filename blob] (let [link (dom/create-element "a") - uri (dom/create-uri blob)] + uri (dom/create-uri blob) + extension (dom/mtype->extension (.-type ^js blob)) + filename (if extension + (str filename "." extension) + filename)] (obj/set! link "href" uri) - (obj/set! link "download" (str/slug name)) + (obj/set! link "download" filename) (obj/set! (.-style ^js link) "display" "none") (.appendChild (.-body ^js js/document) link) (.click link) @@ -51,6 +55,11 @@ exports (:exports shape []) loading? (mf/use-state false) + filename (cond-> (:name shape) + (and (= (count exports) 1) + (not (empty (:suffix (first exports))))) + (str (:suffix (first exports)))) + on-download (mf/use-callback (mf/deps shape) @@ -62,7 +71,7 @@ (fn [{:keys [status body] :as response}] (js/console.log status body) (if (= status 200) - (trigger-download (:name shape) body) + (trigger-download filename body) (st/emit! (dm/error (tr "errors.unexpected-error"))))) (constantly nil) (fn [] diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs index ce3ab54f1..502e88be8 100644 --- a/frontend/src/app/util/dom.cljs +++ b/frontend/src/app/util/dom.cljs @@ -257,3 +257,15 @@ (defn get-data [^js node ^string attr] (.getAttribute node (str "data-" attr))) + +(defn mtype->extension [mtype] + ;; https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types + (case mtype + "image/apng" "apng" + "image/avif" "avif" + "image/gif" "gif" + "image/jpeg" "jpg" + "image/png" "png" + "image/svg+xml" "svg" + "image/webp" "webp" + nil)) diff --git a/frontend/src/app/util/timers.cljs b/frontend/src/app/util/timers.cljs index a7afaff2b..efe5cb934 100644 --- a/frontend/src/app/util/timers.cljs +++ b/frontend/src/app/util/timers.cljs @@ -43,7 +43,7 @@ (def ^:private cancel-idle-callback #(js/cancelIdleCallback %))) (do (def ^:private request-idle-callback #(js/setTimeout % 100)) - (def ^:private cancel-idle-callback #(js/cancelTimeout %)))) + (def ^:private cancel-idle-callback #(js/clearTimeout %)))) (defn schedule-on-idle [func]