🐛 Add ellipsis in long labels for input fields

CHANGES.md

@@ -15,8 +15,9 @@
 - Fix undo stacking when changing color from color-picker [Taiga #2191](https://tree.taiga.io/project/penpot/issue/2191).
 - Fix pages dropdown in viewer [Taiga #2087](https://tree.taiga.io/project/penpot/issue/2087).
 - Fix problem when exporting texts with gradients or opacity [Taiga #2200](https://tree.taiga.io/project/penpot/issue/2200).
-- Fix problem with view mode comments [Taiga #226](https://tree.taiga.io/project/penpot/issue/2226).
+- Fix problem with view mode comments [Taiga #2226](https://tree.taiga.io/project/penpot/issue/2226).
 - Disallow to create a component when already has one [Taiga #2237](https://tree.taiga.io/project/penpot/issue/2237).
+- Add ellipsis in long labels for input fields [Taiga #2224](https://tree.taiga.io/project/penpot/issue/2224)
 
 ### :arrow_up: Deps updates
 ### :heart: Community contributions by (Thank you!)

frontend/resources/styles/common/framework.scss

@@ -396,6 +396,11 @@ ul.slider-dots {
     text-align: right;
     top: 26%;
     width: 18px;
+
+    pointer-events: none;
+    max-width: 4rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .after {

frontend/src/app/main/ui/components/numeric_input.cljs

@@ -24,6 +24,7 @@
         max-val-str (obj/get props "max")
         wrap-value? (obj/get props "data-wrap")
         on-change   (obj/get props "onChange")
+        title       (obj/get props "title")
 
         ;; We need a ref pointing to the input dom element, but the user
         ;; of this component may provide one (that is forwarded here).
@@ -144,6 +145,7 @@
                   (obj/set! "type" "text")
                   (obj/set! "ref" ref)
                   (obj/set! "defaultValue" value-str)
+                  (obj/set! "title" title)
                   (obj/set! "onWheel" handle-mouse-wheel)
                   (obj/set! "onKeyDown" handle-key-down)
                   (obj/set! "onBlur" handle-blur))]

frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs

@@ -79,6 +79,7 @@
 
        [:div.element-set-content
         [:& color-row {:color color
+                       :title (tr "workspace.options.fill")
                        :on-change on-change
                        :on-detach on-detach}]]]
 

frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs

@@ -130,7 +130,7 @@
                   :on-change handle-change-type}]
 
       (if (= type :square)
-        [:div.input-element.pixels
+        [:div.input-element.pixels {:title (tr "workspace.options.size")}
          [:> numeric-input {:min 1
                             :no-validate true
                             :value (:size params)
@@ -214,6 +214,7 @@
                         :on-change (handle-change :params :margin)}]])
 
       [:& color-row {:color (:color params)
+                     :title (tr "workspace.options.grid.params.color")
                      :disable-gradient true
                      :on-change handle-change-color
                      :on-detach handle-detach-color}]

frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs

@@ -270,11 +270,12 @@
          (when (cti/has-delay interaction)
            [:div.interactions-element
             [:span.element-set-subtitle.wide (tr "workspace.options.interaction-delay")]
-            [:div.input-element
+            [:div.input-element {:title (tr "workspace.options.interaction-ms")}
              [:> numeric-input {:ref ext-delay-ref
                                 :on-click (select-text ext-delay-ref)
                                 :on-change change-delay
-                                :value (:delay interaction)}]
+                                :value (:delay interaction)
+                                :title (tr "workspace.options.interaction-ms")}]
              [:span.after (tr "workspace.options.interaction-ms")]]])
 
          ; Action select

frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs

@@ -112,8 +112,7 @@
         [:option {:value "color"} (tr "workspace.options.layer-options.blend-mode.color")]
         [:option {:value "luminosity"} (tr "workspace.options.layer-options.blend-mode.luminosity")]]
 
-       [:div.input-element
-        {:class "percentail"}
+       [:div.input-element {:title (tr "workspace.options.opacity") :class "percentail"}
         [:> numeric-input {:value (-> values :opacity opacity->string)
                            :placeholder (tr "settings.multiple")
                            :on-click select-all

frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs

@@ -165,7 +165,7 @@
        (when (options :size)
          [:div.row-flex
           [:span.element-set-subtitle (tr "workspace.options.size")]
-          [:div.input-element.width
+          [:div.input-element.width {:title (tr "workspace.options.width")}
            [:> numeric-input {:min 1
                               :no-validate true
                               :placeholder "--"
@@ -173,7 +173,7 @@
                               :on-change on-width-change
                               :value (attr->string :width values)}]]
 
-          [:div.input-element.height
+          [:div.input-element.height {:title (tr "workspace.options.height")}
            [:> numeric-input {:min 1
                               :no-validate true
                               :placeholder "--"
@@ -193,13 +193,13 @@
        (when (options :position)
          [:div.row-flex
           [:span.element-set-subtitle (tr "workspace.options.position")]
-          [:div.input-element.Xaxis
+          [:div.input-element.Xaxis {:title (tr "workspace.options.x")}
            [:> numeric-input {:no-validate true
                               :placeholder "--"
                               :on-click select-all
                               :on-change on-pos-x-change
                               :value (attr->string :x values)}]]
-          [:div.input-element.Yaxis
+          [:div.input-element.Yaxis {:title (tr "workspace.options.y")}
            [:> numeric-input {:no-validate true
                               :placeholder "--"
                               :on-click select-all
@@ -210,7 +210,7 @@
        (when (options :rotation)
          [:div.row-flex
           [:span.element-set-subtitle (tr "workspace.options.rotation")]
-          [:div.input-element.degrees
+          [:div.input-element.degrees {:title (tr "workspace.options.rotation")}
            [:> numeric-input
             {:no-validate true
              :min 0
@@ -247,9 +247,8 @@
             i/radius-4]]
 
           (cond
-
             (= radius-mode :radius-1)
-            [:div.input-element.mini
+            [:div.input-element.mini {:title (tr "workspace.options.radius")}
              [:> numeric-input
               {:placeholder "--"
                :ref radius-input-ref
@@ -259,7 +258,7 @@
                :value (attr->string :rx values)}]]
 
             @radius-multi?
-            [:div.input-element.mini
+            [:div.input-element.mini {:title (tr "workspace.options.radius")}
              [:input.input-text
               {:type "number"
                :placeholder "--"
@@ -269,28 +268,31 @@
 
             (= radius-mode :radius-4)
             [:*
-             [:div.input-element.mini
+             [:div.input-element.mini {:title (tr "workspace.options.radius")}
               [:> numeric-input
                {:placeholder "--"
                 :min 0
                 :on-click select-all
                 :on-change on-radius-r1-change
                 :value (attr->string :r1 values)}]]
-             [:div.input-element.mini
+
+             [:div.input-element.mini {:title (tr "workspace.options.radius")}
               [:> numeric-input
                {:placeholder "--"
                 :min 0
                 :on-click select-all
                 :on-change on-radius-r2-change
                 :value (attr->string :r2 values)}]]
-             [:div.input-element.mini
+
+             [:div.input-element.mini {:title (tr "workspace.options.radius")}
               [:> numeric-input
                {:placeholder "--"
                 :min 0
                 :on-click select-all
                 :on-change on-radius-r3-change
                 :value (attr->string :r3 values)}]]
-             [:div.input-element.mini
+
+             [:div.input-element.mini {:title (tr "workspace.options.radius")}
               [:> numeric-input
                {:placeholder "--"
                 :min 0

frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs

@@ -146,7 +146,7 @@
         [:option {:value ":inner-shadow"} (tr "workspace.options.shadow-options.inner-shadow")]]]
 
       [:div.row-grid-2
-       [:div.input-element
+       [:div.input-element {:title (tr "workspace.options.shadow-options.offsetx")}
         [:> numeric-input {:ref adv-offset-x-ref
                            :no-validate true
                            :placeholder "--"
@@ -155,7 +155,7 @@
                            :value (:offset-x value)}]
         [:span.after (tr "workspace.options.shadow-options.offsetx")]]
 
-       [:div.input-element
+       [:div.input-element {:title (tr "workspace.options.shadow-options.offsety")}
         [:> numeric-input {:ref adv-offset-y-ref
                            :no-validate true
                            :placeholder "--"
@@ -165,7 +165,7 @@
         [:span.after (tr "workspace.options.shadow-options.offsety")]]]
 
       [:div.row-grid-2
-       [:div.input-element
+       [:div.input-element {:title (tr "workspace.options.shadow-options.blur")}
         [:> numeric-input {:ref adv-blur-ref
                            :no-validate true
                            :placeholder "--"
@@ -175,7 +175,7 @@
                            :value (:blur value)}]
         [:span.after (tr "workspace.options.shadow-options.blur")]]
 
-       [:div.input-element
+       [:div.input-element {:title (tr "workspace.options.shadow-options.spread")}
         [:> numeric-input {:ref adv-spread-ref
                            :no-validate true
                            :placeholder "--"
@@ -190,6 +190,7 @@
                                ;; Support for old format colors
                                {:color (:color value) :opacity (:opacity value)}
                                (:color value))
+                      :title (tr "workspace.options.shadow-options.color")
                       :disable-gradient true
                       :on-change (update-color index)
                       :on-detach (detach-color index)

frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs

@@ -198,13 +198,15 @@
        [:div.element-set-content
         ;; Stroke Color
         [:& color-row {:color current-stroke-color
+                       :title (tr "workspace.options.stroke-color")
                        :on-change handle-change-stroke-color
                        :on-detach handle-detach}]
 
         ;; Stroke Width, Alignment & Style
         [:div.row-flex
          [:div.input-element
-          {:class (dom/classnames :pixels (not= (:stroke-width values) :multiple))}
+          {:class (dom/classnames :pixels (not= (:stroke-width values) :multiple))
+           :title (tr "workspace.options.stroke-width")}
           [:input.input-text {:type "number"
                               :min "0"
                               :value (-> (:stroke-width values) width->string)

frontend/src/app/main/ui/workspace/sidebar/options/page.cljs

@@ -37,6 +37,7 @@
      [:div.element-set-content
       [:& color-row {:disable-gradient true
                      :disable-opacity true
+                     :title (tr "workspace.options.canvas-background")
                      :color {:color (get options :background "#E8E9EA")
                              :opacity 1}
                      :on-change on-change

frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs

@@ -61,7 +61,7 @@
   (if (= v :multiple) nil v))
 
 (mf/defc color-row
-  [{:keys [color disable-gradient disable-opacity on-change on-detach on-open on-close]}]
+  [{:keys [color disable-gradient disable-opacity on-change on-detach on-open on-close title]}]
   (let [current-file-id (mf/use-ctx ctx/current-file-id)
         file-colors     (mf/deref refs/workspace-file-colors)
         shared-libs     (mf/deref refs/workspace-libraries)
@@ -123,7 +123,7 @@
        (when (not= prev-color color)
          (modal/update-props! :colorpicker {:data (parse-color color)}))))
 
-    [:div.row-flex.color-data
+    [:div.row-flex.color-data {:title title}
      [:& cb/color-bullet {:color color
                           :on-click handle-click-color}]
 

frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs

@@ -87,7 +87,7 @@
       ;; WIDTH & HEIGHT
       [:div.row-flex
        [:span.element-set-subtitle (tr "workspace.options.size")]
-       [:div.input-element.pixels
+       [:div.input-element.pixels {:title (tr "workspace.options.width")}
         [:> numeric-input {:min 1
                            :on-click select-all
                            :on-change on-width-change
@@ -95,7 +95,7 @@
                                       (math/precision 2)
                                       (d/coalesce-str "1"))}]]
 
-       [:div.input-element.pixels
+       [:div.input-element.pixels {:title (tr "workspace.options.height")}
         [:> numeric-input {:min 1
                            :on-click select-all
                            :on-change on-height-change
@@ -112,14 +112,14 @@
       ;; POSITION
       [:div.row-flex
        [:span.element-set-subtitle (tr "workspace.options.position")]
-       [:div.input-element.pixels
+       [:div.input-element.pixels {:title (tr "workspace.options.x")}
         [:> numeric-input {:placeholder "x"
                            :on-click select-all
                            :on-change on-pos-x-change
                            :value (-> (:x shape)
                                       (math/precision 2)
                                       (d/coalesce-str "0"))}]]
-       [:div.input-element.pixels
+       [:div.input-element.pixels {:title (tr "workspace.options.y")}
         [:> numeric-input {:placeholder "y"
                            :on-click select-all
                            :on-change on-pos-y-change

frontend/translations/en.po

@@ -3204,3 +3204,31 @@ msgstr "Update"
 
 msgid "workspace.viewport.click-to-close-path"
 msgstr "Click to close the path"
+
+msgid "workspace.options.grid.params.color"
+msgstr "Color"
+
+msgid "workspace.options.height"
+msgstr "Height"
+
+msgid "workspace.options.opacity"
+msgstr "Opacity"
+
+msgid "workspace.options.shadow-options.color"
+msgstr "Shadow color"
+
+msgid "workspace.options.stroke-color"
+msgstr "Stroke color"
+
+msgid "workspace.options.stroke-width"
+msgstr "Stroke width"
+
+msgid "workspace.options.width"
+msgstr "Width"
+
+msgid "workspace.options.x"
+msgstr "X"
+
+msgid "workspace.options.y"
+msgstr "Y"
+

frontend/translations/es.po

@@ -3201,3 +3201,30 @@ msgstr "Actualizar"
 
 msgid "workspace.viewport.click-to-close-path"
 msgstr "Pulsar para cerrar la ruta"
+
+msgid "workspace.options.grid.params.color"
+msgstr "Color"
+
+msgid "workspace.options.height"
+msgstr "Altura"
+
+msgid "workspace.options.opacity"
+msgstr "Opacidad"
+
+msgid "workspace.options.shadow-options.color"
+msgstr "Color de sombra"
+
+msgid "workspace.options.stroke-color"
+msgstr "Color del trazo"
+
+msgid "workspace.options.stroke-width"
+msgstr "Ancho del trazo"
+
+msgid "workspace.options.width"
+msgstr "Ancho"
+
+msgid "workspace.options.x"
+msgstr "X"
+
+msgid "workspace.options.y"
+msgstr "Y"