Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-13 10:38:13 -05:00
Code Issues Activity

Merge pull request #4113 from penpot/eva-review-inspect-tab

Browse source 
Update inspect tab
This commit is contained in:
Aitor Moreno 2024-02-14 11:02:20 +01:00 • committed by GitHub
commit 26699de71b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
36 changed files with 403 additions and 251 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/resources/styles/common/refactor/mixins.scss
View file

@ -115,8 +115,8 @@
@mixin copyWrapperBase {
position: relative;
min-height: $s-32;
width: $s-156;
max-width: $s-156;
width: $s-144;
max-width: $s-144;
padding: calc($s-8 - $s-1) 0 calc($s-8 - $s-1) calc($s-8 - $s-1);
border-radius: $s-8;
box-sizing: border-box;

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);
}
}

1
frontend/src/app/main/ui/viewer/inspect/attributes.scss
View file

@ -12,4 +12,5 @@
gap: $s-16;
width: 100%;
height: 100%;
padding-top: $s-8;
}

8
frontend/src/app/main/ui/viewer/inspect/attributes/blur.cljs
View file

@ -7,6 +7,7 @@
(ns app.main.ui.viewer.inspect.attributes.blur
(:require-macros [app.main.style :as stl])
(:require
[app.common.data.macros :as dm]
[app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.util.code-gen.style-css :as css]
@ -23,13 +24,16 @@
[:div {:class (stl/css :attributes-block)}
[:& title-bar {:collapsable false
:title (tr "inspect.attributes.blur")
:origin :inspect
:class (stl/css :title-spacing-blur)}
(when (= (count shapes) 1)
[:& copy-button {:data (css/get-css-property objects (first shapes) :filter)}])]
[:& copy-button {:data (css/get-css-property objects (first shapes) :filter)
:class (stl/css :copy-btn-title)}])]
[:div {:class (stl/css :attributes-content)}
(for [shape shapes]
[:div {:class (stl/css :blur-row)}
[:div {:class (stl/css :blur-row)
:key (dm/str "block-" (:id shape) "-blur")}
[:div {:class (stl/css :global/attr-label)} "Filter"]
[:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (css/get-css-property objects shape :filter)}

4
frontend/src/app/main/ui/viewer/inspect/attributes/blur.scss
View file

@ -21,3 +21,7 @@
.button-children {
@extend .copy-button-children;
}
.copy-btn-title {
max-width: $s-28;
}

167
frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs
View file

@ -8,6 +8,8 @@
(:require-macros [app.main.style :as stl])
(:require
[app.common.colors :as cc]
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.media :as cm]
[app.config :as cf]
[app.main.refs :as refs]
@ -15,6 +17,7 @@
[app.main.ui.components.color-bullet-new :as cbn]
[app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.select :refer [select]]
[app.main.ui.formats :as fmt]
[app.util.i18n :refer [tr]]
[cuerdas.core :as str]
[okulary.core :as l]
@ -43,6 +46,13 @@
(defn- get-file-colors []
(or (mf/deref file-colors-ref) (mf/deref refs/workspace-file-colors)))
(defn get-css-rule-humanized [property]
(as-> property $
(d/name $)
(str/split $ "-")
(str/join " " $)
(str/capital $)))
(mf/defc color-row [{:keys [color format copy-data on-change-format]}]
(let [colors-library (get-colors-library color)
file-colors (get-file-colors)
@ -50,85 +60,90 @@
color (assoc color :color-library-name color-library-name)
image (:image color)]
[:*
[:div {:class (stl/css :attributes-color-row)}
[:div {:class (stl/css :bullet-wrapper)
:style #js {"--bullet-size" "16px"}}
[:& cbn/color-bullet {:color color
:mini? true}]]
(when-not image
[:div {:class (stl/css :format-wrapper)}
(when-not (and on-change-format (or (:gradient color) image))
[:div {:class (stl/css :select-format-wrapper)}
[:& select
{:default-value format
:options [{:value :hex :label (tr "inspect.attributes.color.hex")}
{:value :rgba :label (tr "inspect.attributes.color.rgba")}
{:value :hsla :label (tr "inspect.attributes.color.hsla")}]
:on-change on-change-format}]])
(when (:gradient color)
[:div {:class (stl/css :format-info)} "rgba"])])
(if image
(let [mtype (-> image :mtype)
name (or (:name image) (tr "media.image"))
extension (cm/mtype->extension mtype)]
[:div {:class (stl/css :attributes-image-as-color-row)}
[:div {:class (stl/css :attributes-color-row)}
[:div {:class (stl/css :bullet-wrapper)
:style #js {"--bullet-size" "16px"}}
[:& cbn/color-bullet {:color color
:mini? true}]]
(if (and copy-data (not image))
[:& copy-button {:data copy-data
:class (stl/css :color-row-copy-btn)}
[:*
[:div {:class (stl/css :first-row)}
[:div {:class (stl/css :name-opacity)}
[:span {:class (stl/css-case :color-value-wrapper true
:gradient-name (:gradient color))}
(if (:gradient color)
[:& cbn/color-name {:color color :size 80}]
(case format
:hex [:& cbn/color-name {:color color}]
:rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))]
[:* (str/fmt "%s, %s, %s, %s" r g b a)])
:hsla (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color))
result (cc/format-hsla [h s l a])]
[:* result])))]
(when-not (:gradient color)
[:span {:class (stl/css :opacity-info)}
(str (* 100 (:opacity color)) "%")])]]
(when color-library-name
[:div {:class (stl/css :second-row)}
[:div {:class (stl/css :color-name-library)}
color-library-name]])]]
[:div {:class (stl/css :color-info)}
[:div {:class (stl/css :first-row)}
[:div {:class (stl/css :name-opacity)}
[:span {:class (stl/css-case :color-value-wrapper true
:gradient-name (:gradient color))}
(if (:gradient color)
[:& cbn/color-name {:color color}]
(case format
:hex [:& cbn/color-name {:color color
:size 80}]
:rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))]
[:* (str/fmt "%s, %s, %s, %s" r g b a)])
:hsla (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color))
result (cc/format-hsla [h s l a])]
[:* result])))]
(when-not (:gradient color)
[:div {:class (stl/css :format-wrapper)}
[:div {:class (stl/css :image-format)}
(tr "media.image.short")]]
[:& copy-button {:data copy-data
:class (stl/css :color-row-copy-btn)}
[:div {:class (stl/css-case :color-info true
:two-line (some? color-library-name))}
[:div {:class (stl/css :first-row)}
[:span {:class (stl/css :opacity-info)}
(str (* 100 (:opacity color)) "%")])]]
(str (* 100 (:opacity color)) "%")]]
(when color-library-name
[:div {:class (stl/css :second-row)}
[:div {:class (stl/css :color-name-library)}
color-library-name]])])]
(when color-library-name
[:div {:class (stl/css :second-row)}
[:div {:class (stl/css :color-name-library)}
color-library-name]])]]
(when image
(let [mtype (-> image :mtype)
name (or (:name image) (tr "media.image"))
extension (cm/mtype->extension mtype)]
[:a {:class (stl/css :download-button)
:target "_blank"
:download (cond-> name extension (str/concat extension))
:href (cf/resolve-file-media image)}
(tr "inspect.attributes.image.download")]))]))
[:div {:class (stl/css :image-download)}
[:div {:class (stl/css :image-wrapper)}
[:img {:src (cf/resolve-file-media image)}]]
[:a {:class (stl/css :download-button)
:target "_blank"
:download (cond-> name extension (str/concat extension))
:href (cf/resolve-file-media image)}
(tr "inspect.attributes.image.download")]]]])
[:div {:class (stl/css :attributes-color-row)}
[:div {:class (stl/css :bullet-wrapper)
:style #js {"--bullet-size" "16px"}}
[:& cbn/color-bullet {:color color
:mini? true}]]
[:div {:class (stl/css :format-wrapper)}
(when-not (and on-change-format (or (:gradient color) image))
[:& select
{:default-value format
:class (stl/css :select-format-wrapper)
:options [{:value :hex :label (tr "inspect.attributes.color.hex")}
{:value :rgba :label (tr "inspect.attributes.color.rgba")}
{:value :hsla :label (tr "inspect.attributes.color.hsla")}]
:on-change on-change-format}])
(when (:gradient color)
[:div {:class (stl/css :format-info)} "rgba"])]
[:& copy-button {:data copy-data
:class (stl/css-case :color-row-copy-btn true
:one-line (not color-library-name)
:two-line (some? color-library-name))}
[:div {:class (stl/css :first-row)}
[:div {:class (stl/css :name-opacity)}
[:span {:class (stl/css-case :color-value-wrapper true
:gradient-name (:gradient color))}
(if (:gradient color)
[:& cbn/color-name {:color color :size 90}]
(case format
:hex [:& cbn/color-name {:color color}]
:rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))]
(str/ffmt "%, %, %, %" r g b a))
:hsla (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color))
result (cc/format-hsla [h s l a])]
[:* result])))]
(when-not (:gradient color)
[:span {:class (stl/css :opacity-info)}
(dm/str (-> color
(:opacity)
(d/coalesce 1)
(* 100)
(fmt/format-number)) "%")])]]
(when color-library-name
[:div {:class (stl/css :second-row)}
[:div {:class (stl/css :color-name-library)}
color-library-name]])]])))

87
frontend/src/app/main/ui/viewer/inspect/attributes/common.scss
View file

@ -6,9 +6,13 @@
@import "refactor/common-refactor.scss";
.attributes-image-as-color-row {
max-width: $s-240;
}
.attributes-color-row {
display: grid;
grid-template-columns: $s-16 $s-72 $s-156;
grid-template-columns: $s-16 $s-72 $s-144;
gap: $s-4;
}
@ -22,14 +26,19 @@
height: $s-32;
}
.image-format {
@include tabTitleTipography;
height: $s-32;
padding: $s-8 0;
color: var(--menu-foreground-color-rest);
}
.select-format-wrapper {
width: 100%;
div {
background-color: transparent;
border: none;
padding-left: $s-2;
color: var(--menu-foreground-color-rest);
}
padding: $s-8 $s-2;
background-color: transparent;
border-color: transparent;
color: var(--menu-foreground-color-rest);
}
.format-info {
@ -43,12 +52,16 @@
color: var(--menu-foreground-color-rest);
}
.color-row-copy-btn {
max-width: $s-144;
}
.color-info {
display: flex;
align-items: flex-start;
gap: $s-4;
flex-grow: 1;
max-width: $s-144;
button {
visibility: hidden;
min-width: $s-28;
@ -57,19 +70,22 @@
visibility: visible;
}
}
.name-opacity {
display: flex;
align-items: baseline;
.one-line {
max-height: $s-32;
}
.two-line {
display: grid;
grid-template-rows: 1fr 1fr;
}
.color-name-wrapper {
@include titleTipography;
@include flexColumn;
padding: $s-8 $s-4 $s-8 $s-8;
height: $s-32;
max-width: $s-80;
&.gradient-color {
color: var(--menu-foreground-color);
max-width: $s-124;
}
.color-name-library {
@ -92,16 +108,9 @@
padding: $s-8 0;
}
.color-info,
.color-row-copy-btn {
display: flex;
max-width: $s-144;
}
.first-row {
display: grid;
grid-template-columns: 1fr $s-24;
grid-template-areas: "name button";
grid-template-columns: 1fr $s-28;
height: fit-content;
width: 100%;
padding: 0;
@ -109,27 +118,26 @@
}
.name-opacity {
grid-area: name;
height: fit-content;
max-width: $s-124;
width: 100%;
line-height: $s-16;
display: grid;
grid-template-columns: 1fr auto;
}
.color-value-wrapper {
@include textEllipsis;
@include inspectValue;
text-transform: uppercase;
max-width: $s-80;
padding-right: $s-8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&.gradient-name {
text-transform: none;
}
}
.opacity-info {
@include inspectValue;
text-transform: uppercase;
width: 100%;
}
.second-row {
@ -146,9 +154,32 @@
color: var(--menu-foreground-color-rest);
}
.image-download {
grid-column: 1 / 4;
}
.download-button {
@extend .button-secondary;
@include tabTitleTipography;
height: $s-32;
width: 100%;
margin-top: $s-4;
}
.image-wrapper {
background-color: var(--menu-background-color);
position: relative;
@include flexCenter;
width: $s-240;
height: $s-160;
max-height: $s-160;
max-width: $s-248;
margin: $s-8 0;
border-radius: $br-8;
img {
height: 100%;
width: 100%;
object-fit: contain;
}
}

2
frontend/src/app/main/ui/viewer/inspect/attributes/fill.cljs
View file

@ -35,7 +35,6 @@
[{:keys [objects shape]}]
(let [format* (mf/use-state :hex)
format (deref format*)
color (shape->color shape)
on-change
(mf/use-fn
@ -55,6 +54,7 @@
(when (seq shapes)
[:div {:class (stl/css :attributes-block)}
[:& title-bar {:collapsable false
:origin :inspect
:title (tr "inspect.attributes.fill")
:class (stl/css :title-spacing-fill)}]

5
frontend/src/app/main/ui/viewer/inspect/attributes/fill.scss
View file

@ -13,3 +13,8 @@
.title-spacing-fill {
@extend .attr-title;
}
.attributes-content {
display: grid;
gap: $s-4;
}

19
frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs
View file

@ -11,6 +11,7 @@
[app.common.data.macros :as dm]
[app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.viewer.inspect.attributes.common :as cmm]
[app.util.code-gen.style-css :as css]
[app.util.i18n :refer [tr]]
[rumext.v2 :as mf]))
@ -22,12 +23,14 @@
[:*
(for [[idx property] (d/enumerate properties)]
(when-let [value (css/get-css-value objects shape property)]
[:div {:key (dm/str "block-" idx "-" (d/name property))
:class (stl/css :geometry-row)}
[:div {:class (stl/css :global/attr-label)} (d/name property)]
[:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (css/get-css-property objects shape property)}
[:div {:class (stl/css :button-children)} value]]]]))])
(let [property-name (cmm/get-css-rule-humanized property)]
[:div {:key (dm/str "block-" idx "-" (d/name property))
:title property-name
:class (stl/css :geometry-row)}
[:div {:class (stl/css :global/attr-label)} property-name]
[:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (css/get-css-property objects shape property)}
[:div {:class (stl/css :button-children)} value]]]])))])
(mf/defc geometry-panel
@ -35,10 +38,12 @@
[:div {:class (stl/css :attributes-block)}
[:& title-bar {:collapsable false
:title (tr "inspect.attributes.size")
:origin :inspect
:class (stl/css :title-spacing-geometry)}
(when (= (count shapes) 1)
[:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
[:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)
:class (stl/css :copy-btn-title)}])]
(for [shape shapes]
[:& geometry-block {:shape shape

4
frontend/src/app/main/ui/viewer/inspect/attributes/geometry.scss
View file

@ -21,3 +21,7 @@
.button-children {
@extend .copy-button-children;
}
.copy-btn-title {
max-width: $s-28;
}

2
frontend/src/app/main/ui/viewer/inspect/attributes/image.cljs
View file

@ -23,7 +23,7 @@
[{:keys [objects shapes]}]
(for [shape (filter cfh/image-shape? shapes)]
[:div {:class (stl/css :attributes-block)
:key (str "image-" (:id shape))}
:key (str "image-" (:id shape))}
[:div {:class (stl/css :image-wrapper)}
[:img {:src (cf/resolve-file-media (-> shape :metadata))}]]

21
frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs
View file

@ -8,9 +8,11 @@
(:require-macros [app.main.style :as stl])
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.types.shape.layout :as ctl]
[app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.viewer.inspect.attributes.common :as cmm]
[app.util.code-gen.style-css :as css]
[rumext.v2 :as mf]))
@ -31,13 +33,16 @@
[{:keys [objects shape]}]
(for [property properties]
(when-let [value (css/get-css-value objects shape property)]
[:div {:class (stl/css :layout-row)}
[:div {:title (d/name property)
:class (stl/css :global/attr-label)} (d/name property)]
[:div {:class (stl/css :global/attr-value)}
(let [property-name (cmm/get-css-rule-humanized property)]
[:div {:class (stl/css :layout-row)}
[:div {:title property-name
:key (dm/str "layout-" (:id shape) "-" (d/name property))
:class (stl/css :global/attr-label)}
property-name]
[:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (css/get-css-property objects shape property)}
[:div {:class (stl/css :button-children)} value]]]])))
[:& copy-button {:data (css/get-css-property objects shape property)}
[:div {:class (stl/css :button-children)} value]]]]))))
(mf/defc layout-panel
[{:keys [objects shapes]}]
@ -46,11 +51,13 @@
(when (seq shapes)
[:div {:class (stl/css :attributes-block)}
[:& title-bar {:collapsable false
:origin :inspect
:title "Layout"
:class (stl/css :title-spacing-layout)}
(when (= (count shapes) 1)
[:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
[:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)
:class (stl/css :copy-btn-title)}])]
(for [shape shapes]
[:& layout-block {:shape shape

4
frontend/src/app/main/ui/viewer/inspect/attributes/layout.scss
View file

@ -21,3 +21,7 @@
.button-children {
@extend .copy-button-children;
}
.copy-btn-title {
max-width: $s-28;
}

17
frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.cljs
View file

@ -8,9 +8,11 @@
(:require-macros [app.main.style :as stl])
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.types.shape.layout :as ctl]
[app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.viewer.inspect.attributes.common :as cmm]
[app.util.code-gen.style-css :as css]
[rumext.v2 :as mf]))
@ -33,12 +35,14 @@
[{:keys [objects shape]}]
(for [property properties]
(when-let [value (css/get-css-value objects shape property)]
[:div {:class (stl/css :layout-element-row)}
[:div {:class (stl/css :global/attr-label)} (d/name property)]
[:div {:class (stl/css :global/attr-value)}
(let [property-name (cmm/get-css-rule-humanized property)]
[:div {:class (stl/css :layout-element-row)
:key (dm/str "layout-element-" (:id shape) "-" (d/name property))}
[:div {:class (stl/css :global/attr-label)} property-name]
[:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (css/get-css-property objects shape property)}
[:div {:class (stl/css :button-children)} value]]]])))
[:& copy-button {:data (css/get-css-property objects shape property)}
[:div {:class (stl/css :button-children)} value]]]]))))
(mf/defc layout-element-panel
[{:keys [objects shapes]}]
@ -67,7 +71,8 @@
:title menu-title
:class (stl/css :title-spacing-layout-element)}
(when (= (count shapes) 1)
[:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
[:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)
:class (stl/css :copy-btn-title)}])]
(for [shape shapes]
[:& layout-element-block {:shape shape

4
frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.scss
View file

@ -21,3 +21,7 @@
.button-children {
@extend .copy-button-children;
}
.copy-btn-title {
max-width: $s-28;
}

2
frontend/src/app/main/ui/viewer/inspect/attributes/shadow.cljs
View file

@ -54,6 +54,7 @@
(when (and (seq shapes) (> (count shapes) 0))
[:div {:class (stl/css :attributes-block)}
[:& title-bar {:collapsable false
:origin :inspect
:title (tr "inspect.attributes.shadow")
:class (stl/css :title-spacing-shadow)}]
@ -61,4 +62,5 @@
(for [shape shapes]
(for [shadow (:shadow shape)]
[:& shadow-block {:shape shape
:key (dm/str "block-" (:id shape) "-shadow")
:shadow shadow}]))]])))

1
frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs
View file

@ -62,6 +62,7 @@
(when (seq shapes)
[:div {:class (stl/css :attributes-block)}
[:& title-bar {:collapsable false
:origin :inspect
:title (tr "inspect.attributes.stroke")
:class (stl/css :title-spacing-stroke)}]

5
frontend/src/app/main/ui/viewer/inspect/attributes/stroke.scss
View file

@ -25,3 +25,8 @@
.button-children {
@extend .copy-button-children;
}
.attributes-content {
display: grid;
gap: $s-4;
}

21
frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs
View file

@ -27,19 +27,25 @@
[:& copy-button {:data (map->css value)}]]
(for [[attr-key attr-value] value]
[:& svg-attr {:attr attr-key :value attr-value}])]
[:& svg-attr {:attr attr-key :value attr-value :key (str/join "svg-key-" attr-key)}])]
[:div {:class (stl/css :svg-row)}
[:div {:class (stl/css :global/attr-label)} (d/name attr)]
[:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (d/name value)}
[:div {:class (stl/css :button-children)} (str value)]]]]))
(let [attr-name (as-> attr $
(d/name $)
(str/split $ "-")
(str/join " " $)
(str/capital $))]
[:div {:class (stl/css :svg-row)}
[:div {:class (stl/css :global/attr-label)} attr-name]
[:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (d/name value)
:class (stl/css :copy-btn-title)}
[:div {:class (stl/css :button-children)} (str value)]]]])))
(mf/defc svg-block
[{:keys [shape]}]
[:*
(for [[attr-key attr-value] (:svg-attrs shape)]
[:& svg-attr {:attr attr-key :value attr-value}])])
[:& svg-attr {:attr attr-key :value attr-value :key (str/join "svg-block-key" attr-key)}])])
(mf/defc svg-panel
@ -48,6 +54,7 @@
(when (seq (:svg-attrs shape))
[:div {:class (stl/css :attributes-block)}
[:& title-bar {:collapsable false
:origin :inspect
:title (tr "workspace.sidebar.options.svg-attrs.title")
:class (stl/css :title-spacing-svg)}]
[:& svg-block {:shape shape}]])))

7
frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs
View file

@ -99,7 +99,7 @@
[:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (copy-style-data style :font-style)}
[:div {:class (stl/css :button-children)}
(str (:font-style style))]]]])
(dm/str (:font-style style))]]]])
(when (:font-size style)
[:div {:class (stl/css :text-row)}
@ -117,7 +117,7 @@
[:div {:class (stl/css :global/attr-value)}
[:& copy-button {:data (copy-style-data style :font-weight)}
[:div {:class (stl/css :button-children)}
(str (:font-weight style))]]]])
(dm/str (:font-weight style))]]]])
(when (:line-height style)
[:div {:class (stl/css :text-row)}
@ -191,9 +191,10 @@
(when-let [shapes (seq (filter has-text? shapes))]
[:div {:class (stl/css :attributes-block)}
[:& title-bar {:collapsable false
:origin :inspect
:title (tr "inspect.attributes.typography")
:class (stl/css :title-spacing-text)}]
(for [shape shapes]
[:& text-block {:shape shape
:key (str "text-block" (:id shape))}])]))
:key (dm/str "text-block" (:id shape))}])]))

2
frontend/src/app/main/ui/viewer/inspect/attributes/text.scss
View file

@ -30,7 +30,7 @@
}
.attributes-content-row {
max-width: $s-252;
max-width: $s-240;
min-height: calc($s-2 + $s-32);
border-radius: $br-8;
border: $s-1 solid var(--menu-border-color-disabled);

38
frontend/src/app/main/ui/viewer/inspect/code.cljs
View file

@ -19,7 +19,7 @@
[app.main.store :as st]
[app.main.ui.components.code-block :refer [code-block]]
[app.main.ui.components.copy-button :refer [copy-button]]
[app.main.ui.components.select :refer [select]]
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
[app.main.ui.hooks :as hooks]
[app.main.ui.hooks.resize :refer [use-resize-hook]]
[app.main.ui.icons :as i]
@ -177,10 +177,10 @@
style-size :size}
(use-resize-hook :code 400 100 800 :y false :bottom)
set-style
(mf/use-callback
(fn [value]
(reset! style-type* value)))
;; set-style
;; (mf/use-callback
;; (fn [value]
;; (reset! style-type* value)))
set-markup
(mf/use-callback
@ -251,10 +251,13 @@
:rotated collapsed-css?)}
i/arrow-refactor]]
[:& select {:default-value style-type
:class (stl/css :code-lang-select)
:on-change set-style
:options [{:label "CSS" :value "css"}]}]
[:div {:class (stl/css :code-lang-option)}
"CSS"]
;; We will have a select when we have more than one option
;; [:& select {:default-value style-type
;; :class (stl/css :code-lang-select)
;; :on-change set-style
;; :options [{:label "CSS" :value "css"}]}]
[:div {:class (stl/css :action-btns)}
[:button {:class (stl/css :expand-button)
@ -262,6 +265,7 @@
i/code-refactor]
[:& copy-button {:data #(replace-map style-code images-data)
:class (stl/css :css-copy-btn)
:on-copied on-style-copied}]]]
(when-not collapsed-css?
@ -285,11 +289,16 @@
:collapsabled-icon true
:rotated collapsed-markup?)}
i/arrow-refactor]]
[:& select {:default-value markup-type
:class (stl/css :code-lang-select)
:options [{:label "HTML" :value "html"}
{:label "SVG" :value "svg"}]
:on-change set-markup}]
[:& radio-buttons {:selected markup-type
:on-change set-markup
:class (stl/css :code-lang-options)
:wide true
:name "listing-style"}
[:& radio-button {:value "html"
:id :html}]
[:& radio-button {:value "svg"
:id :svg}]]
[:div {:class (stl/css :action-btns)}
[:button {:class (stl/css :expand-button)
@ -297,6 +306,7 @@
i/code-refactor]
[:& copy-button {:data #(replace-map markup-code images-data)
:class (stl/css :html-copy-btn)
:on-copied on-markup-copied}]]]
(when-not collapsed-markup?

23
frontend/src/app/main/ui/viewer/inspect/code.scss
View file

@ -48,8 +48,8 @@
}
.code-row-lang {
display: flex;
justify-content: space-between;
display: grid;
grid-template-columns: $s-12 1fr $s-60;
gap: $s-4;
width: 100%;
}
@ -61,13 +61,14 @@
}
.action-btns {
display: flex;
display: grid;
grid-template-columns: 1fr 1fr;
gap: $s-4;
flex: 1;
justify-content: end;
}
.expand-button {
.expand-button,
.css-copy-btn,
.html-copy-btn {
@extend .button-tertiary;
height: $s-32;
width: $s-28;
@ -77,6 +78,9 @@
}
}
.code-lang-options {
max-width: $s-108;
}
.code-lang-select {
@include tabTitleTipography;
width: $s-72;
@ -84,6 +88,13 @@
background-color: transparent;
color: var(--menu-foreground-color-disabled);
}
.code-lang-option {
@include tabTitleTipography;
width: $s-72;
height: $s-32;
padding: $s-8;
color: var(--menu-foreground-color-disabled);
}
.code-row-display {
flex: 1;

10
frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss
View file

@ -14,8 +14,6 @@
left: unset;
right: unset;
grid-area: right-sidebar;
padding-top: $s-8;
padding-left: $s-12;
overflow: hidden;
&.viewer-code {
height: calc(100vh - $s-48);
@ -26,18 +24,20 @@
height: 100%;
display: flex;
flex-direction: column;
gap: $s-8;
}
.shape-row {
display: flex;
gap: $s-8;
align-items: center;
margin-bottom: $s-16;
height: $s-32;
}
.layers-icon,
.shape-icon {
@include flexCenter;
height: $s-32;
svg {
@extend .button-icon-small;
stroke: var(--icon-foreground);
@ -46,7 +46,9 @@
.layer-title {
@include titleTipography;
color: $df-primary;
height: $s-32;
padding: $s-8 0;
color: var(--assets-item-name-foreground-color-rest);
}
.empty {

2
frontend/src/app/main/ui/workspace/color_palette.cljs
View file

@ -31,7 +31,7 @@
:title (uc/get-color-name color)
:on-click select-color}
[:& cb/color-bullet {:color color}]
[:& cb/color-name {:color color :size size}]]))
[:& cb/color-name {:color color :size size :origin :palette}]]))
(mf/defc palette

7
frontend/src/app/main/ui/workspace/sidebar.scss
View file

@ -16,7 +16,6 @@ $width-settings-bar-max: $s-500;
"content resize";
grid-template-rows: $s-52 1fr;
grid-template-columns: 1fr 0;
gap: $s-8 0;
position: relative;
grid-area: left-sidebar;
min-width: $width-settings-bar;
@ -85,10 +84,10 @@ $width-settings-bar-max: $s-500;
.resize-area-horiz {
position: absolute;
top: calc($s-80 + var(--height, 200px));
// top: calc($s-88 + var(--height, 200px));
left: 0;
width: 100%;
height: $s-12;
border-top: $s-2 solid var(--resize-area-border-color);
// height: $s-8;
border-bottom: $s-2 solid var(--resize-area-border-color);
cursor: ns-resize;
}

3
frontend/src/app/main/ui/workspace/sidebar/layers.scss
View file

@ -241,8 +241,7 @@
}
.tool-window-content {
// TODO: sass variables are not being interpolated here, find why
--calculated-height: calc(128px + var(--height, 200px));
--calculated-height: calc(#{$s-136} + var(--height, #{$s-200}));
display: flex;
flex-direction: column;
height: calc(100vh - var(--calculated-height));

3
frontend/translations/en.po
View file

@ -5056,6 +5056,9 @@ msgstr "Done"
msgid "media.image"
msgstr "Image"
msgid "media.image.short"
msgstr "img"
msgid "media.solid"
msgstr "Solid"

3
frontend/translations/es.po
View file

@ -5140,6 +5140,9 @@ msgstr "Hecho"
msgid "media.image"
msgstr "Imagen"
msgid "media.image.short"
msgstr "img"
msgid "media.solid"
msgstr "Sólido"