Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-24 23:49:45 -05:00
Code Issues Activity

💄 Adds new UI elements files and visual changes

Browse source
This commit is contained in:
elhombretecla 2023-09-12 11:00:15 +02:00 • committed by Eva
parent c291b632a1
commit 28010b786d
17 changed files with 63 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/resources/styles/common/refactor/basic-rules.scss
View file

@ -316,6 +316,7 @@
.menu-dropdown {
@include menuShadow;
color: var(--title-foreground-color-hover);
display: flex;
flex-direction: column;
gap: $s-4;

4
frontend/resources/styles/common/refactor/design-tokens.scss
View file

@ -128,7 +128,7 @@
--pill-foreground-color: var(--color-foreground-primary);
--menu-background-color: var(--color-background-tertiary);
--menu-foreground-color: var(--color-foreground-secondary);
--menu-foreground-color: var(--color-foreground-primary);
--menu-background-color-selected: var(--color-background-tertiary);
--menu-foreground-color-selected: var(--color-foreground-primary);
--menu-background-color-hover: var(--color-background-quaternary);
@ -175,7 +175,7 @@
--assets-component-background-color: var(--white); // We don't want this color to change with palette
--radio-btns-background-color: var(--color-background-tertiary);
--radio-btn-background-color-selected: var(--color-background-primary);
--radio-btn-background-color-selected: var(--color-background-quaternary);
--radio-btn-foreground-color: var(--color-foreground-secondary);
--radio-btn-foreground-color-selected: var(--color-accent-primary);
--radio-btn-border-color-selected: var(--color-background-quaternary);

6
frontend/src/app/main/ui/components/radio_buttons.cljs
View file

@ -8,6 +8,7 @@
(:require-macros [app.main.style :as stl])
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.main.ui.formats :as fmt]
[app.util.dom :as dom]
[rumext.v2 :as mf]))
@ -138,7 +139,6 @@
:decode-fn decode-fn})]
[:& (mf/provider context) {:value context-value}
[:div {:class (stl/css-case :radio-btn-wrapper true
class true)
:style {:width width}}
[:div {:class (dm/str class " " (stl/css :radio-btn-wrapper))
:style {:width width}}
children]]))

2
frontend/src/app/main/ui/components/radio_buttons.scss
View file

@ -17,7 +17,7 @@
height: $s-28;
flex-grow: 1;
border-radius: $s-6;
border: solid $s-2 transparent;
border: solid $s-1 transparent;
box-sizing: content-box;
input {
display: none;

1
frontend/src/app/main/ui/components/tab_container.scss
View file

@ -28,6 +28,7 @@
height: $s-32;
border-radius: $br-8;
background: var(--color-background-secondary);
padding: $s-2;
cursor: pointer;
font-size: $fs12;
.tab-container-tab-wrapper {

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

@ -127,7 +127,8 @@
@extend .menu-dropdown;
position: absolute;
left: calc(var(--width, $s-256) + $s-180);
width: 270px;
min-width: 270px;
width: 110%;
.shortcut {
@extend .shortcut;
}

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

@ -12,6 +12,7 @@
flex-direction: column;
width: 100%;
padding-left: $s-12;
.tab-spacing {
margin-right: $s-12;
margin-bottom: $s-16;

1
frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs
View file

@ -94,6 +94,7 @@
[:div {:class (stl/css :boolean-options)}
[:div {:class (stl/css :bool-group)}
[:& radio-buttons {:selected (d/name head-bool-type)
:class (stl/css :boolean-radio-btn)
:on-change set-bool-refactor
:name "bool-options"}
[:& radio-button {:icon i/boolean-union-refactor

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.css.json
View file

@ -1 +1 @@
{"button-primary":"menus_bool_button-primary_OZ9LY","button-secondary":"menus_bool_button-secondary_XAFBl","button-tertiary":"menus_bool_button-tertiary_YQhEH","boolean-options":"menus_bool_boolean-options_Yq7h2","bool-group":"menus_bool_bool-group_eJQaa","flatten":"menus_bool_flatten_Mx-oM","button-radio":"menus_bool_button-radio_WaRtW","button-warning":"menus_bool_button-warning_3dgn5","button-disabled":"menus_bool_button-disabled_uItqB","button-tag":"menus_bool_button-tag_FX2MF","button-icon":"menus_bool_button-icon_O1hdU","button-icon-small":"menus_bool_button-icon-small_NE9w7","link":"menus_bool_link_YleIO","asset-element":"menus_bool_asset-element_AOtGG","input-element":"menus_bool_input-element_r4K6y","new-scrollbar":"menus_bool_new-scrollbar_9D-29","menu-dropdown":"menus_bool_menu-dropdown_ghGsu","menu-item":"menus_bool_menu-item_PBOy4","shortcut":"menus_bool_shortcut_CzGpH","shortcut-key":"menus_bool_shortcut-key_6ESUj","user-icon":"menus_bool_user-icon_u8tS1","disabled":"menus_bool_disabled_Q2PTU","spin-animation":"menus_bool_spin-animation_uXbpx"}
{"button-primary":"menus_bool_button-primary_OZ9LY","button-secondary":"menus_bool_button-secondary_XAFBl","button-tertiary":"menus_bool_button-tertiary_YQhEH","boolean-options":"menus_bool_boolean-options_Yq7h2","bool-group":"menus_bool_bool-group_eJQaa","flatten":"menus_bool_flatten_Mx-oM","button-radio":"menus_bool_button-radio_WaRtW","button-warning":"menus_bool_button-warning_3dgn5","button-disabled":"menus_bool_button-disabled_uItqB","button-tag":"menus_bool_button-tag_FX2MF","button-icon":"menus_bool_button-icon_O1hdU","button-icon-small":"menus_bool_button-icon-small_NE9w7","link":"menus_bool_link_YleIO","asset-element":"menus_bool_asset-element_AOtGG","input-element":"menus_bool_input-element_r4K6y","new-scrollbar":"menus_bool_new-scrollbar_9D-29","menu-dropdown":"menus_bool_menu-dropdown_ghGsu","menu-item":"menus_bool_menu-item_PBOy4","shortcut":"menus_bool_shortcut_CzGpH","shortcut-key":"menus_bool_shortcut-key_6ESUj","user-icon":"menus_bool_user-icon_u8tS1","disabled":"menus_bool_disabled_Q2PTU","boolean-radio-btn":"menus_bool_boolean-radio-btn_EChGS","spin-animation":"menus_bool_spin-animation_uXbpx"}

3
frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss
View file

@ -36,5 +36,8 @@
}
}
}
.boolean-radio-btn {
background-color: transparent;
}
}
}

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
View file

@ -8,8 +8,9 @@
.element-set {
.element-title {
margin-right: $s-12;
.title-spacing-layout {
margin: 0 0 $s-4 0;
margin: 0;
}
.title-actions {
@ -39,6 +40,7 @@
display: flex;
gap: $s-4;
margin-bottom: $s-12;
margin-top: $s-4;
.wrap-button {
@extend .button-tertiary;
border-radius: $br-8;

11
frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs
View file

@ -5,10 +5,12 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.sidebar.options.shapes.group
(:require-macros [app.main.style :as stl])
(:require
[app.common.data :as d]
[app.common.types.shape.layout :as ctl]
[app.main.refs :as refs]
[app.main.ui.context :as ctx]
[app.main.ui.hooks :as hooks]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu]]
@ -31,7 +33,8 @@
{::mf/wrap [mf/memo]
::mf/wrap-props false}
[props]
(let [shape (unchecked-get props "shape")
(let [new-css-system (mf/use-ctx ctx/new-css-system)
shape (unchecked-get props "shape")
shape-with-children (unchecked-get props "shape-with-children")
shared-libs (unchecked-get props "shared-libs")
objects (->> shape-with-children (group-by :id) (d/mapm (fn [_ v] (first v))))
@ -66,7 +69,9 @@
[comp-ids comp-values] [[(:id shape)] (select-keys shape component-attrs)]
[layout-item-ids layout-item-values] (get-attrs [shape] objects :layout-item)]
[:div.options
[:div {:class (stl/css-case new-css-system
:options true)}
[:& layer-menu {:type type :ids layer-ids :values layer-values}]
[:& measures-menu {:type type :ids measure-ids :values measure-values :shape shape}]
[:& component-menu {:ids comp-ids :values comp-values :shape shape}] ;;remove this in components-v2
@ -90,8 +95,6 @@
(when (or (not is-layout-child?) is-layout-child-absolute?)
[:& constraints-menu {:ids constraint-ids :values constraint-values}])
(when-not (empty? fill-ids)
[:& fill-menu {:type type :ids fill-ids :values fill-values}])

1
frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.css.json Normal file
View file

@ -0,0 +1 @@
{"button-primary":"shapes_group_button-primary_3YsFJ","button-secondary":"shapes_group_button-secondary_5w8ZE","button-tertiary":"shapes_group_button-tertiary_oGyWP","button-radio":"shapes_group_button-radio_sN6Iu","button-warning":"shapes_group_button-warning_3T5ny","button-disabled":"shapes_group_button-disabled_Sne1l","button-tag":"shapes_group_button-tag_MiHvW","button-icon":"shapes_group_button-icon_2kU9k","button-icon-small":"shapes_group_button-icon-small_FsVta","link":"shapes_group_link_JwvvK","asset-element":"shapes_group_asset-element_--UYW","input-element":"shapes_group_input-element_71Yj6","new-scrollbar":"shapes_group_new-scrollbar_CkPdN","menu-dropdown":"shapes_group_menu-dropdown_6SUZA","menu-item":"shapes_group_menu-item_HiCsN","shortcut":"shapes_group_shortcut_fEK4X","shortcut-key":"shapes_group_shortcut-key_6bTeI","user-icon":"shapes_group_user-icon_IryZR","options":"shapes_group_options_s7fvt","spin-animation":"shapes_group_spin-animation_ObWj0"}

14
frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.scss Normal file
View file

@ -0,0 +1,14 @@
// 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
@import "refactor/common-refactor.scss";
.options {
width: 100%;
display: flex;
flex-direction: column;
gap: $s-16;
}

12
frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs
View file

@ -5,6 +5,7 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.sidebar.options.shapes.multiple
(:require-macros [app.main.style :as stl])
(:require
[app.common.attrs :as attrs]
[app.common.data :as d]
@ -14,6 +15,7 @@
[app.common.types.shape.layout :as ctl]
[app.main.data.workspace.texts :as dwt]
[app.main.refs :as refs]
[app.main.ui.context :as ctx]
[app.main.ui.hooks :as hooks]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-attrs blur-menu]]
[app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu]]
@ -264,7 +266,8 @@
{::mf/wrap [#(mf/memo' % (mf/check-props ["shapes" "shapes-with-children" "page-id" "file-id"]))]
::mf/wrap-props false}
[props]
(let [shapes (unchecked-get props "shapes")
(let [new-css-system (mf/use-ctx ctx/new-css-system)
shapes (unchecked-get props "shapes")
shapes-with-children (unchecked-get props "shapes-with-children")
;; remove children from bool shapes
@ -339,10 +342,10 @@
(get-attrs shapes objects-no-measures :stroke)
(get-attrs shapes objects-no-measures :exports)
(get-attrs shapes objects-no-measures :layout-container)
(get-attrs shapes objects-no-measures :layout-item)
])))]
(get-attrs shapes objects-no-measures :layout-item)])))]
[:div.options
[:div {:class (stl/css-case new-css-system
:options true)}
(when-not (empty? layer-ids)
[:& layer-menu {:type type :ids layer-ids :values layer-values}])
@ -364,7 +367,6 @@
(when-not (or (empty? constraint-ids) is-layout-child?)
[:& constraints-menu {:ids constraint-ids :values constraint-values}])
(when-not (empty? text-ids)
[:& ot/text-menu {:type type :ids text-ids :values text-values}])

1
frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.css.json Normal file
View file

@ -0,0 +1 @@
{"button-primary":"shapes_multiple_button-primary_tBxly","button-secondary":"shapes_multiple_button-secondary_Zdbm7","button-tertiary":"shapes_multiple_button-tertiary_Jm9gZ","button-radio":"shapes_multiple_button-radio_8704N","button-warning":"shapes_multiple_button-warning_Wll0q","button-disabled":"shapes_multiple_button-disabled_s7vii","button-tag":"shapes_multiple_button-tag_-XskF","button-icon":"shapes_multiple_button-icon_abpuP","button-icon-small":"shapes_multiple_button-icon-small_CKGK-","link":"shapes_multiple_link_cW5PS","asset-element":"shapes_multiple_asset-element_-uz8i","input-element":"shapes_multiple_input-element_hEvdj","new-scrollbar":"shapes_multiple_new-scrollbar_KNebV","menu-dropdown":"shapes_multiple_menu-dropdown_VPG-P","menu-item":"shapes_multiple_menu-item_ujp5B","shortcut":"shapes_multiple_shortcut_qvN33","shortcut-key":"shapes_multiple_shortcut-key_QPNHs","user-icon":"shapes_multiple_user-icon_C6b9g","options":"shapes_multiple_options_wIEW5","spin-animation":"shapes_multiple_spin-animation_J799p"}

14
frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.scss Normal file
View file

@ -0,0 +1,14 @@
// 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
@import "refactor/common-refactor.scss";
.options {
width: 100%;
display: flex;
flex-direction: column;
gap: $s-16;
}