0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-19 19:21:23 -05:00

♻️ Update sidebar old icons

This commit is contained in:
Eva Marco 2024-03-05 14:15:05 +01:00 committed by Alonso Torres
parent c2b8e5c946
commit 1c38883ddd
4 changed files with 96 additions and 81 deletions

View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M6 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V3.33333C2 2.97971 2.14048 2.64057 2.39052 2.39052C2.64057 2.14048 2.97971 2 3.33333 2H6M10.6667 11.3333L14 8M14 8L10.6667 4.66667M14 8H6"/>
</svg>

After

Width:  |  Height:  |  Size: 361 B

View file

@ -24,7 +24,7 @@
[app.main.ui.dashboard.inline-edition :refer [inline-edition]]
[app.main.ui.dashboard.project-menu :refer [project-menu]]
[app.main.ui.dashboard.team-form]
[app.main.ui.icons :as i]
[app.main.ui.icons :as i :refer [icon-xref]]
[app.util.dom :as dom]
[app.util.dom.dnd :as dnd]
[app.util.i18n :as i18n :refer [tr]]
@ -39,6 +39,33 @@
[potok.v2.core :as ptk]
[rumext.v2 :as mf]))
(def ^:private clear-search-icon
(icon-xref :delete-text-refactor (stl/css :clear-search-icon)))
(def ^:private search-icon
(icon-xref :search-refactor (stl/css :search-icon)))
(def ^:private tick-icon
(icon-xref :tick-refactor (stl/css :tick-icon)))
(def ^:private logo-icon
(icon-xref :logo-refactor (stl/css :logo-icon)))
(def ^:private add-icon
(icon-xref :add-refactor (stl/css :add-icon)))
(def ^:private arrow-icon
(icon-xref :arrow-refactor (stl/css :arrow-icon)))
(def ^:private menu-icon
(icon-xref :menu-refactor (stl/css :menu-icon)))
(def ^:private pin-icon
(icon-xref :pin-refactor (stl/css :pin-icon)))
(def ^:private exit-icon
(icon-xref :exit-refactor (stl/css :exit-icon)))
(mf/defc sidebar-project
[{:keys [item selected?] :as props}]
(let [dstate (mf/deref refs/dashboard-local)
@ -231,11 +258,11 @@
:tab-index "0"
:on-click on-clear-click
:on-key-down handle-clear-search}
i/close]
clear-search-icon]
[:button {:class (stl/css :search-btn)
:on-click on-clear-click}
i/search])]))
search-icon])]))
(mf/defc teams-selector-dropdown-items
{::mf/wrap-props false}
@ -278,10 +305,11 @@
:on-key-down handle-select-default
:id "teams-selector-default-team"
:class (stl/css :team-dropdown-item)}
[:span {:class (stl/css :team-icon)} i/logo-icon]
[:span {:class (stl/css :penpot-icon)} i/logo-icon]
[:span {:class (stl/css :team-text)} (tr "dashboard.your-penpot")]
(when (= (:default-team-id profile) (:id team))
[:span {:class (stl/css :check-icon)} i/tick])]
tick-icon)]
(for [team-item (remove :is-default (vals teams))]
[:> dropdown-menu-item* {:on-click team-selected
@ -296,7 +324,7 @@
[:span {:class (stl/css :team-text)
:title (:name team-item)} (:name team-item)]
(when (= (:id team-item) (:id team))
[:span {:class (stl/css :check-icon)} i/tick])])
tick-icon)])
[:hr {:role "separator"
:class (stl/css :team-separator)}]
@ -304,7 +332,7 @@
:on-key-down handle-creation-key-down
:id "teams-selector-create-team"
:class (stl/css :team-dropdown-item :action)}
[:span {:class (stl/css :team-icon :new-team)} i/close]
[:span {:class (stl/css :icon-wrapper)} add-icon]
[:span {:class (stl/css :team-text)} (tr "dashboard.create-new-team")]]]))
(s/def ::member-id ::us/uuid)
@ -612,7 +640,7 @@
(if (:is-default team)
[:div {:class (stl/css :team-name)}
[:span {:class (stl/css :team-icon)} i/logo-icon]
[:span {:class (stl/css :penpot-icon)} i/logo-icon]
[:span {:class (stl/css :team-text)} (tr "dashboard.default-team-name")]]
[:div {:class (stl/css :team-name)}
@ -621,14 +649,14 @@
:alt (:name team)}]
[:span {:class (stl/css :team-text) :title (:name team)} (:name team)]])
[:span {:class (stl/css :switch-icon)} i/arrow-down]]
arrow-icon]
(when-not (:is-default team)
[:button {:class (stl/css :switch-options)
:on-click handle-show-opts-click
:tab-index "0"
:on-key-down handle-show-opts-keydown}
i/actions])]
menu-icon])]
;; Teams Dropdown
@ -791,7 +819,7 @@
:team-id (:id team)
:selected? (= (:id item) (:id project))}])]
[:div {:class (stl/css :sidebar-empty-placeholder)}
[:span {:class (stl/css :empty-placeholder-icon)} i/pin-refactor]
pin-icon
[:span {:class (stl/css :empty-text)} (tr "dashboard.no-projects-placeholder")]])]]))
(mf/defc profile-section
@ -1004,7 +1032,7 @@
:on-click handle-logout-click
:on-key-down handle-logout-keydown
:data-test "logout-profile-opt"}
[:span {:class (stl/css :exit-icon)} i/exit]
exit-icon
(tr "labels.logout")]]
(when (and team profile)

View file

@ -75,7 +75,8 @@
color: var(--menu-foreground-color-hover);
}
.team-icon {
// This icon still use the old svg
.penpot-icon {
@include flexCenter;
svg {
fill: var(--icon-foreground);
@ -91,13 +92,10 @@
width: $s-24;
}
.switch-icon {
@include flexCenter;
svg {
fill: var(--icon-foreground);
width: $s-12;
height: $s-12;
}
.arrow-icon {
@extend .button-icon;
transform: rotate(90deg);
stroke: var(--icon-foreground);
}
.switch-options {
@ -108,12 +106,11 @@
height: 100%;
border-left: $s-1 solid var(--panel-background-color);
background-color: transparent;
}
svg {
fill: var(--icon-foreground);
width: $s-16;
height: $s-12;
}
.menu-icon {
@extend .button-icon;
stroke: var(--icon-foreground);
}
// DROPDOWNS
@ -138,18 +135,29 @@
height: $s-40;
}
.team-dropdown-item.action .team-icon {
height: $s-24;
.action {
--sidebar-action-icon-color: var(--icon-foreground);
--sidebar-icon-backgroun-color: var(--color-background-secondary);
&:hover {
--sidebar-action-icon-color: var(--color-background-secondary);
--sidebar-icon-backgroun-color: var(--color-accent-primary);
}
}
.icon-wrapper {
@include flexCenter;
width: $s-24;
padding: $s-6;
height: $s-24;
margin-right: $s-12;
border-radius: 50%;
background-color: var(--new-team-button-background-color);
background-color: var(--sidebar-icon-backgroun-color);
}
svg {
height: $s-12;
width: $s-12;
}
.add-icon {
@extend .button-icon;
width: $s-24;
height: $s-24;
stroke: var(--sidebar-action-icon-color);
}
.team-separator {
@ -157,13 +165,9 @@
margin: 0;
}
.check-icon {
@extend .button-icon;
fill: var(--icon-foreground);
svg {
height: 12px;
width: 12px;
}
.tick-icon {
@extend .button-icon-small;
stroke: var(--icon-foreground);
}
.options-dropdown {
@ -200,14 +204,6 @@
.sidebar-nav-item {
cursor: pointer;
svg {
fill: var(--icon-foreground);
margin-right: $s-8;
height: $s-12;
width: $s-12;
}
&:hover {
background-color: var(--sidebar-element-background-color-hover);
span {
@ -224,7 +220,7 @@
}
.recent-projects svg {
fill: var(--main-icon-foreground);
stroke: var(--main-icon-foreground);
}
.sidebar-link {
@ -256,14 +252,10 @@
align-items: center;
}
.empty-placeholder-icon {
padding: 0 $s-12;
svg {
fill: none;
stroke: currentColor;
width: $s-12;
height: $s-12;
}
.pin-icon {
@extend .button-icon-small;
stroke: var(--icon-foreground);
margin: 0 $s-12;
}
.empty-text {
@ -313,20 +305,17 @@
height: $s-24;
width: $s-32;
padding: 0 $s-8;
svg {
fill: var(--search-bar-icon-foreground-color);
height: $s-16;
width: $s-16;
}
}
.clear-search-btn svg {
transform: rotate(45deg);
.search-icon,
.clear-search-btn {
@extend .button-icon;
--sidebar-search-foreground-color: var(--search-bar-icon-foreground-color);
stroke: var(--sidebar-search-foreground-color);
}
&:hover {
fill: var(--search-bar-icon-foreground-color-hover);
}
.clear-search-btn:hover {
--sidebar-search-foreground-color: var(--search-bar-icon-foreground-color-hover);
}
// Profile
@ -345,12 +334,6 @@
grid-template-columns: auto 1fr;
gap: $s-8;
cursor: pointer;
svg {
height: $s-12;
width: $s-12;
margin-left: auto;
margin-right: $s-8;
}
}
.profile-fullname {
@ -389,11 +372,10 @@
.item-with-icon {
display: grid;
grid-template-columns: auto 1fr;
svg {
fill: var(--menu-icon-foreground-color);
margin-right: $s-8;
height: $s-12;
width: $s-12;
}
gap: $s-8;
}
.exit-icon {
@extend .button-icon;
stroke: var(--icon-foreground);
}

View file

@ -348,6 +348,7 @@
(def ^:icon easing-ease-in-out-refactor (icon-xref :easing-ease-in-out-refactor))
(def ^:icon effects-refactor (icon-xref :effects-refactor))
(def ^:icon elipse-refactor (icon-xref :elipse-refactor))
(def ^:icon exit-refactor (icon-xref :exit-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))
@ -394,6 +395,7 @@
(def ^:icon layers-refactor (icon-xref :layers-refactor))
(def ^:icon locate-refactor (icon-xref :locate-refactor))
(def ^:icon lock-refactor (icon-xref :lock-refactor))
(def ^:icon logo-refactor (icon-xref :penpot-logo-icon)) ;; This icon will not change
(def ^:icon library-refactor (icon-xref :library-refactor))
(def ^:icon margin-bottom-refactor (icon-xref :margin-bottom-refactor))
(def ^:icon margin-left-refactor (icon-xref :margin-left-refactor))