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:
parent
c2b8e5c946
commit
1c38883ddd
4 changed files with 96 additions and 81 deletions
3
frontend/resources/images/icons/exit-refactor.svg
Normal file
3
frontend/resources/images/icons/exit-refactor.svg
Normal 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 |
|
@ -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)
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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))
|
||||
|
|
Loading…
Add table
Reference in a new issue