3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-18 21:06:11 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Review inspect tab spacing

Browse source
This commit is contained in:
Eva 2024-02-07 19:43:52 +01:00
parent 6fd30d50f4
commit 8ead63cad0
36 changed files with 403 additions and 251 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/main/ui/components/color_bullet.cljs
View file

@ -57,5 +57,5 @@
:on-double-click on-double-click
:title name}
(if (some? image)
(tr "media.image")
(tr "media.image.short")
(or name color (uc/gradient-type->string (:type gradient))))])))

18
frontend/src/app/main/ui/components/color_bullet_new.cljs
View file

@ -9,7 +9,7 @@
(:require
[app.config :as cfg]
[app.util.color :as uc]
[app.util.i18n :as i18n :refer [tr]]
[app.util.i18n :refer [tr]]
[cuerdas.core :as str]
[rumext.v2 :as mf]))
@ -99,16 +99,16 @@
(mf/defc color-name
{::mf/wrap-props false}
[{:keys [color size on-click on-double-click]}]
(let [{:keys [name color gradient image]} (if (string? color) {:color color :opacity 1} color)]
[{:keys [color size on-click on-double-click origin]}]
(let [{:keys [name color gradient]} (if (string? color) {:color color :opacity 1} color)]
(when (or (not size) (> size 64))
[:span {:class (stl/css-case
:color-text (< size 72)
:small-text (and (>= size 64) (< size 72))
:big-text (>= size 72))
:color-text (and (= origin :palette) (< size 72))
:small-text (and (= origin :palette) (>= size 64) (< size 72))
:big-text (and (= origin :palette) (>= size 72))
:gradient (some? gradient)
:color-row-name (not= origin :palette))
:title name
:on-click on-click
:on-double-click on-double-click}
(if (some? image)
(or name (tr "media.image"))
(or name color (uc/gradient-type->string (:type gradient))))])))
(or name color (uc/gradient-type->string (:type gradient)))])))

4
frontend/src/app/main/ui/components/color_bullet_new.scss
View file

@ -94,3 +94,7 @@
.no-text {
display: none;
}
.color-row-name {
color: var(--menu-foreground-color);
}

30
frontend/src/app/main/ui/components/copy_button.scss
View file

@ -8,9 +8,8 @@
.copy-button {
@include buttonStyle;
@include flexCenter;
width: 100%;
height: $s-32;
width: $s-32;
border: $s-1 solid transparent;
border-radius: $br-8;
background-color: transparent;
@ -51,41 +50,32 @@
.copy-wrapper {
@include buttonStyle;
@include copyWrapperBase;
display: grid;
grid-template-columns: 1fr $s-24;
grid-template-areas: "name button";
width: 100%;
height: fit-content;
text-align: left;
border: 1px solid transparent;
border: $s-1 solid transparent;
.icon-btn {
@include flexCenter;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 0;
right: 0;
height: $s-32;
width: $s-32;
width: $s-28;
svg {
@extend .button-icon-small;
stroke: var(--button-tertiary-foreground-color-focus);
display: none;
}
}
&:hover {
.icon-btn {
svg {
display: flex;
stroke: var(--button-tertiary-foreground-color-active);
}
background-color: var(--button-tertiary-background-color-focus);
color: var(--button-tertiary-foreground-color-focus);
border: $s-1 solid var(--button-tertiary-background-color-focus);
.icon-btn svg {
display: flex;
}
}
&:hover {
background-color: var(--color-background-tertiary);
color: var(--color-foreground-primary);
border: $s-1 solid var(--color-background-tertiary);
}
&:focus,
&:focus-visible {
outline: none;

10
frontend/src/app/main/ui/components/select.cljs
View file

@ -97,15 +97,17 @@
current-icon (:icon selected-option)
current-icon-ref (i/key->icon current-icon)]
[:div {:on-click open-dropdown
:class (dm/str class " " (stl/css-case :custom-select true
:disabled disabled
:icon (some? current-icon-ref)))}
:class (dm/str (stl/css-case :custom-select true
:disabled disabled
:icon (some? current-icon-ref))
" " class)}
(when (and current-icon current-icon-ref)
[:span {:class (stl/css :current-icon)} current-icon-ref])
[:span {:class (stl/css :current-label)} current-label]
[:span {:class (stl/css :dropdown-button)} i/arrow-refactor]
[:& dropdown {:show is-open? :on-close close-dropdown}
[:ul {:ref dropdown-element* :data-direction @dropdown-direction* :class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))}
[:ul {:ref dropdown-element* :data-direction @dropdown-direction*
:class (dm/str (stl/css :custom-select-dropdown) " " dropdown-class)}
(for [[index item] (d/enumerate options)]
(if (= :separator item)
[:li {:class (dom/classnames (stl/css :separator) true)

7
frontend/src/app/main/ui/components/title_bar.cljs
View file

@ -13,7 +13,7 @@
(mf/defc title-bar
{::mf/wrap-props false}
[{:keys [collapsable collapsed on-collapsed title children on-btn-click btn-children class all-clickable add-icon-gap]}]
[{:keys [collapsable collapsed on-collapsed title children on-btn-click btn-children class all-clickable add-icon-gap origin]}]
(let [klass (dm/str (stl/css :title-bar) " " class)]
[:div {:class klass}
(if ^boolean collapsable
@ -33,7 +33,10 @@
:on-click on-collapsed}
i/arrow-refactor]
[:div {:class (stl/css :title)} title]])]
[:div {:class (stl/css-case :title-only true :title-only-icon-gap add-icon-gap)} title])
[:div {:class (stl/css-case :title-only true
:title-only-icon-gap add-icon-gap
:title-only (not= :inspect origin)
:inspect-title (= :inspect origin))} title])
children
(when (some? on-btn-click)
[:button {:class (stl/css :title-button)

107
frontend/src/app/main/ui/components/title_bar.scss
View file

@ -14,8 +14,39 @@
width: 100%;
min-height: $s-32;
background-color: var(--title-background-color);
}
.title-wrapper {
.title,
.title-only,
.inspect-title {
@include tabTitleTipography;
display: flex;
align-items: center;
flex-grow: 1;
height: 100%;
min-height: $s-32;
color: var(--title-foreground-color);
overflow: hidden;
}
.title-only {
margin-left: $s-8;
}
.inspect-title {
color: var(--title-foreground-color-hover);
}
.title-wrapper {
display: flex;
align-items: center;
flex-grow: 1;
padding: 0;
color: var(--title-foreground-color);
stroke: var(--title-foreground-color);
overflow: hidden;
.toggle-btn {
@include buttonStyle;
display: flex;
align-items: center;
flex-grow: 1;
@ -23,42 +54,7 @@
color: var(--title-foreground-color);
stroke: var(--title-foreground-color);
overflow: hidden;
.toggle-btn {
@include buttonStyle;
display: flex;
align-items: center;
flex-grow: 1;
padding: 0;
color: var(--title-foreground-color);
stroke: var(--title-foreground-color);
overflow: hidden;
.collapsabled-icon {
@include flexCenter;
height: $s-24;
border-radius: $br-8;
svg {
@extend .button-icon-small;
transform: rotate(90deg);
stroke: var(--icon-foreground);
}
&.rotated svg {
transform: rotate(0deg);
}
}
&:hover {
color: var(--title-foreground-color-hover);
stroke: var(--title-foreground-color-hover);
.title {
color: var(--title-foreground-color-hover);
stroke: var(--title-foreground-color-hover);
}
.collapsabled-icon svg {
stroke: var(--title-foreground-color-hover);
}
}
}
.collapsabled-icon {
@include buttonStyle;
@include flexCenter;
height: $s-24;
border-radius: $br-8;
@ -75,6 +71,7 @@
color: var(--title-foreground-color-hover);
stroke: var(--title-foreground-color-hover);
.title {
color: var(--title-foreground-color-hover);
stroke: var(--title-foreground-color-hover);
}
.collapsabled-icon svg {
@ -82,17 +79,41 @@
}
}
}
.title-button {
@extend .button-tertiary;
height: $s-32;
width: calc($s-24 + $s-4);
padding: 0;
.collapsabled-icon {
@include buttonStyle;
@include flexCenter;
height: $s-24;
border-radius: $br-8;
svg {
@extend .button-icon;
@extend .button-icon-small;
transform: rotate(90deg);
stroke: var(--icon-foreground);
}
&.rotated svg {
transform: rotate(0deg);
}
}
&:hover {
color: var(--title-foreground-color-hover);
stroke: var(--title-foreground-color-hover);
.title {
stroke: var(--title-foreground-color-hover);
}
.collapsabled-icon svg {
stroke: var(--title-foreground-color-hover);
}
}
}
.title-button {
@extend .button-tertiary;
height: $s-32;
width: calc($s-24 + $s-4);
padding: 0;
border-radius: $br-8;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
}