diff --git a/frontend/resources/images/icons/download-refactor.svg b/frontend/resources/images/icons/download-refactor.svg new file mode 100644 index 0000000000..ee4af8deda --- /dev/null +++ b/frontend/resources/images/icons/download-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/feedback-refactor.svg b/frontend/resources/images/icons/feedback-refactor.svg new file mode 100644 index 0000000000..56a509263d --- /dev/null +++ b/frontend/resources/images/icons/feedback-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/pin-refactor.svg b/frontend/resources/images/icons/pin-refactor.svg new file mode 100644 index 0000000000..2d71bc0e2f --- /dev/null +++ b/frontend/resources/images/icons/pin-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/styles/common/refactor/common-dashboard.scss b/frontend/resources/styles/common/refactor/common-dashboard.scss index f2de6c4eca..7e1830ab70 100644 --- a/frontend/resources/styles/common/refactor/common-dashboard.scss +++ b/frontend/resources/styles/common/refactor/common-dashboard.scss @@ -33,13 +33,6 @@ } } - svg { - fill: $db-secondary; - height: $s-12; - margin-right: $s-4; - width: $s-12; - } - nav { display: flex; align-items: flex-end; @@ -98,7 +91,6 @@ display: flex; align-items: center; cursor: pointer; - margin-left: $s-8; svg { fill: $df-secondary; @@ -119,22 +111,9 @@ .dashboard-header-actions { display: flex; + column-gap: $s-16; } - .pin-icon { - margin: 0 $s-8 0 $s-24; - background-color: transparent; - border: none; - svg { - fill: $df-secondary; - } - - &.active { - svg { - fill: $db-cuaternary; - } - } - } .dashboard-header-options { li { a { diff --git a/frontend/src/app/main/ui/dashboard/files.cljs b/frontend/src/app/main/ui/dashboard/files.cljs index afbeb5afc4..049688c2bd 100644 --- a/frontend/src/app/main/ui/dashboard/files.cljs +++ b/frontend/src/app/main/ui/dashboard/files.cljs @@ -13,6 +13,7 @@ [app.main.store :as st] [app.main.ui.dashboard.grid :refer [grid]] [app.main.ui.dashboard.inline-edition :refer [inline-edition]] + [app.main.ui.dashboard.pin-button :refer [pin-button*]] [app.main.ui.dashboard.project-menu :refer [project-menu]] [app.main.ui.hooks :as hooks] [app.main.ui.icons :as i] @@ -92,7 +93,7 @@ [:div {:class (stl/css :dashboard-header-actions)} [:a - {:class (stl/css :btn-secondary :btn-small) + {:class (stl/css :btn-secondary :btn-small :new-file) :tab-index "0" :on-click on-create-click :data-test "new-file" @@ -102,21 +103,11 @@ (tr "dashboard.new-file")] (when-not (:is-default project) - [:button - {:class (stl/css-case :icon true - :pin-icon true - :tooltip true - :tooltip-bottom true - :active (:is-pinned project)) - :tab-index "0" + [:> pin-button* + {:tab-index 0 + :is-pinned (:is-pinned project) :on-click toggle-pin - :alt (tr "dashboard.pin-unpin") - :on-key-down (fn [event] - (when (kbd/enter? event) - (toggle-pin event)))} - (if (:is-pinned project) - i/pin-fill - i/pin)]) + :on-key-down (fn [event] (when (kbd/enter? event) (toggle-pin event)))}]) [:div {:class (stl/css :icon :tooltip :tooltip-bottom-left) diff --git a/frontend/src/app/main/ui/dashboard/files.scss b/frontend/src/app/main/ui/dashboard/files.scss index 72b0485a54..9173bac111 100644 --- a/frontend/src/app/main/ui/dashboard/files.scss +++ b/frontend/src/app/main/ui/dashboard/files.scss @@ -26,3 +26,7 @@ margin-top: $s-12; } } + +.new-file { + margin-inline-end: $s-8; +} diff --git a/frontend/src/app/main/ui/dashboard/pin_button.cljs b/frontend/src/app/main/ui/dashboard/pin_button.cljs new file mode 100644 index 0000000000..9319be947c --- /dev/null +++ b/frontend/src/app/main/ui/dashboard/pin_button.cljs @@ -0,0 +1,26 @@ +;; This Source Code Form is subject to the terms of the Mozilla Public +;; License, v. 2.0. If a copy of the MPL was not distributed with this +;; file, You can obtain one at http://mozilla.org/MPL/2.0/. +;; +;; Copyright (c) KALEIDOS INC + +(ns app.main.ui.dashboard.pin-button + (:require-macros + [app.common.data.macros :as dm] + [app.main.style :as stl] + [app.main.ui.icons :refer [icon-xref]]) + (:require + [app.main.ui.icons :as i] + [app.util.i18n :as i18n :refer [tr]] + [rumext.v2 :as mf])) + +(def pin-icon (icon-xref :pin-refactor (stl/css :icon))) + +(mf/defc pin-button* + {::mf/props :obj} + [{:keys [aria-label is-pinned class] :as props}] + (let [aria-label (or aria-label (tr "dashboard.pin-unpin")) + class (dm/str (or class "") " " (stl/css-case :button true :button-active is-pinned)) + props (mf/spread-props props {:class class + :aria-label aria-label})] + [:> "button" props pin-icon])) \ No newline at end of file diff --git a/frontend/src/app/main/ui/dashboard/pin_button.scss b/frontend/src/app/main/ui/dashboard/pin_button.scss new file mode 100644 index 0000000000..50997fe243 --- /dev/null +++ b/frontend/src/app/main/ui/dashboard/pin_button.scss @@ -0,0 +1,33 @@ +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at http://mozilla.org/MPL/2.0/. +// +// Copyright (c) KALEIDOS INC + +@use "common/refactor/common-refactor.scss" as *; + +.button { + --pin-button-icon-color: #{$df-secondary}; + --pin-button-bg-color: none; + + width: $s-32; + height: $s-32; + background: var(--pin-button-bg-color); + border: none; + border-radius: $br-8; + display: grid; + place-content: center; + cursor: pointer; +} + +.button-active { + --pin-button-icon-color: #{$da-primary}; + --pin-button-bg-color: #{$db-cuaternary}; +} + +.icon { + width: $s-16; + height: $s-16; + fill: none; + stroke: var(--pin-button-icon-color); +} diff --git a/frontend/src/app/main/ui/dashboard/projects.cljs b/frontend/src/app/main/ui/dashboard/projects.cljs index b9f059289e..e7636b2255 100644 --- a/frontend/src/app/main/ui/dashboard/projects.cljs +++ b/frontend/src/app/main/ui/dashboard/projects.cljs @@ -20,6 +20,7 @@ [app.main.store :as st] [app.main.ui.dashboard.grid :refer [line-grid]] [app.main.ui.dashboard.inline-edition :refer [inline-edition]] + [app.main.ui.dashboard.pin-button :refer [pin-button*]] [app.main.ui.dashboard.project-menu :refer [project-menu]] [app.main.ui.hooks :as hooks] [app.main.ui.icons :as i] @@ -304,18 +305,7 @@ [:div {:class (stl/css :project-actions)} (when-not (:is-default project) - [:button - {:class (stl/css-case :pin-icon true - :tooltip true - :tooltip-bottom true - :active (:is-pinned project)) - :on-click toggle-pin - :alt (tr "dashboard.pin-unpin") - :aria-label (tr "dashboard.pin-unpin") - :tab-index "0"} - (if (:is-pinned project) - i/pin-fill - i/pin)]) + [:> pin-button* {:is-pinned (:is-pinned project) :on-click toggle-pin :tab-index 0}]) [:button {:class (stl/css :btn-secondary :btn-small :tooltip :tooltip-bottom) diff --git a/frontend/src/app/main/ui/dashboard/projects.scss b/frontend/src/app/main/ui/dashboard/projects.scss index 15941852b5..6082e29376 100644 --- a/frontend/src/app/main/ui/dashboard/projects.scss +++ b/frontend/src/app/main/ui/dashboard/projects.scss @@ -125,26 +125,6 @@ } } } - - .pin-icon { - cursor: pointer; - display: flex; - align-items: center; - margin-right: $s-16; - background-color: transparent; - border: none; - svg { - width: $s-16; - height: $s-16; - fill: $df-secondary; - } - - &.active { - svg { - fill: $da-primary; - } - } - } } .grid-container { diff --git a/frontend/src/app/main/ui/dashboard/sidebar.cljs b/frontend/src/app/main/ui/dashboard/sidebar.cljs index 219883e931..9b7a67b383 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.cljs +++ b/frontend/src/app/main/ui/dashboard/sidebar.cljs @@ -698,7 +698,7 @@ :team-id (:id team) :selected? (= (:id item) (:id project))}])] [:div {:class (stl/css :sidebar-empty-placeholder)} - [:span {:class (stl/css :icon)} i/pin] + [:span {:class (stl/css :icon)} i/pin-refactor] [:span {:class (stl/css :text)} (tr "dashboard.no-projects-placeholder")]])]])) (mf/defc profile-section diff --git a/frontend/src/app/main/ui/dashboard/sidebar.scss b/frontend/src/app/main/ui/dashboard/sidebar.scss index d46cdcd3ac..8c0520ea4c 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.scss +++ b/frontend/src/app/main/ui/dashboard/sidebar.scss @@ -258,12 +258,13 @@ padding: $s-12; color: $df-secondary; display: flex; - align-items: flex-start; + align-items: center; .icon { padding: 0 $s-12; svg { - fill: $df-secondary; + fill: none; + stroke: currentColor; width: $s-12; height: $s-12; } diff --git a/frontend/src/app/main/ui/dashboard/templates.cljs b/frontend/src/app/main/ui/dashboard/templates.cljs index 8b61fc95b8..953f9b4b3e 100644 --- a/frontend/src/app/main/ui/dashboard/templates.cljs +++ b/frontend/src/app/main/ui/dashboard/templates.cljs @@ -113,7 +113,7 @@ :alt (:name item)}]] [:div {:class (stl/css :card-name)} [:span (:name item)] - [:span {:class (stl/css :icon)} i/download]]]])) + [:span {:class (stl/css :icon)} i/download-refactor]]]])) (mf/defc card-item-link {::mf/wrap-props false} diff --git a/frontend/src/app/main/ui/dashboard/templates.scss b/frontend/src/app/main/ui/dashboard/templates.scss index 9a62effef8..bec721aa6b 100644 --- a/frontend/src/app/main/ui/dashboard/templates.scss +++ b/frontend/src/app/main/ui/dashboard/templates.scss @@ -157,7 +157,8 @@ svg { width: $s-16; height: $s-16; - fill: $df-secondary; + fill: none; + stroke: currentColor; } span { font-weight: $fw500; diff --git a/frontend/src/app/main/ui/debug/components_preview.cljs b/frontend/src/app/main/ui/debug/components_preview.cljs index 5b71879134..5a841ac8e8 100644 --- a/frontend/src/app/main/ui/debug/components_preview.cljs +++ b/frontend/src/app/main/ui/debug/components_preview.cljs @@ -248,7 +248,6 @@ {:title "Button tertiary with icon"} [:button {:class (stl/css :button-tertiary)} i/add-refactor]]] - [:div {:class (stl/css :components-group)} [:h3 "Inputs"] [:& component-wrapper diff --git a/frontend/src/app/main/ui/icons.clj b/frontend/src/app/main/ui/icons.clj index 4f6e054e04..68edb7660c 100644 --- a/frontend/src/app/main/ui/icons.clj +++ b/frontend/src/app/main/ui/icons.clj @@ -11,9 +11,9 @@ [rumext.v2])) (defmacro icon-xref - [id] + [id & [class]] (let [href (str "#icon-" (name id)) - class (str "icon-" (name id))] + class (or class (str "icon-" (name id)))] `(rumext.v2/html [:svg {:width 500 :height 500 :class ~class} [:use {:href ~href}]]))) diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index fd0c0657ff..b6b5dd4af1 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -329,6 +329,7 @@ (def ^:icon desc-sort-refactor (icon-xref :desc-sort-refactor)) (def ^:icon detach-refactor (icon-xref :detach-refactor)) (def ^:icon document-refactor (icon-xref :document-refactor)) +(def ^:icon download-refactor (icon-xref :download-refactor)) (def ^:icon drop-refactor (icon-xref :drop-refactor)) (def ^:icon easing-linear-refactor (icon-xref :easing-linear-refactor)) (def ^:icon easing-ease-refactor (icon-xref :easing-ease-refactor)) @@ -338,6 +339,7 @@ (def ^:icon effects-refactor (icon-xref :effects-refactor)) (def ^:icon elipse-refactor (icon-xref :elipse-refactor)) (def ^:icon expand-refactor (icon-xref :expand-refactor)) +(def ^:icon feedback-refactor (icon-xref :feedback-refactor)) (def ^:icon fill-content-refactor (icon-xref :fill-content-refactor)) (def ^:icon filter-refactor (icon-xref :filter-refactor)) (def ^:icon fixed-width-refactor (icon-xref :fixed-width-refactor)) @@ -410,6 +412,7 @@ (def ^:icon path-refactor (icon-xref :path-refactor)) (def ^:icon pentool-refactor (icon-xref :pentool-refactor)) (def ^:icon picker-refactor (icon-xref :picker-refactor)) +(def ^:icon pin-refactor (icon-xref :pin-refactor)) (def ^:icon play-refactor (icon-xref :play-refactor)) (def ^:icon rectangle-refactor (icon-xref :rectangle-refactor)) (def ^:icon reload-refactor (icon-xref :reload-refactor)) diff --git a/frontend/src/app/main/ui/settings/sidebar.cljs b/frontend/src/app/main/ui/settings/sidebar.cljs index c9dbcb6789..71cd5bf461 100644 --- a/frontend/src/app/main/ui/settings/sidebar.cljs +++ b/frontend/src/app/main/ui/settings/sidebar.cljs @@ -104,7 +104,7 @@ (when (contains? cf/flags :user-feedback) [:li {:class (when feedback? (stl/css :current)) :on-click go-settings-feedback} - i/msg-info + i/feedback-refactor [:span {:class (stl/css :element-title)} (tr "labels.give-feedback")]])]]])) (mf/defc sidebar diff --git a/frontend/src/app/main/ui/settings/sidebar.scss b/frontend/src/app/main/ui/settings/sidebar.scss index c7593f9b26..f0eb99029a 100644 --- a/frontend/src/app/main/ui/settings/sidebar.scss +++ b/frontend/src/app/main/ui/settings/sidebar.scss @@ -60,7 +60,8 @@ } svg { - fill: currentColor; + stroke: currentColor; + fill: none; margin-right: $s-8; height: $s-12; width: $s-12;