Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-05 03:21:26 -05:00
Code Issues Activity

Merge pull request #1022 from penpot/advanced-options-ui

Browse source 
Advanced options UI
This commit is contained in:
Andrey Antukh 2021-06-10 10:55:28 +02:00 • committed by GitHub
commit beaa62c9a9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 99 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/resources/styles/main/partials/colorpicker.scss
View file

@ -480,6 +480,7 @@
.color-data {
align-items: center;
display: flex;
margin-bottom: $small;
position: relative;
.color-name {

9
frontend/resources/styles/main/partials/sidebar-assets.scss
View file

@ -400,6 +400,15 @@
top: 10px;
left: 10px;
}
.advanced-options {
border-color: $color-black;
background-color: $color-gray-60;
.input-text, .input-select, .adv-typography-name {
background-color: $color-gray-60;
}
}
}
}

48
frontend/resources/styles/main/partials/sidebar-element-options.scss
View file

@ -543,7 +543,7 @@
padding: 0 $x-small;
&:first-child {
justify-content: space-between;
justify-content: flex-start;
margin-left: 0;
}
@ -733,6 +733,16 @@
.grid-option {
margin-bottom: 0.5rem;
.advanced-options {
.row-flex {
justify-content: flex-end;
}
.custom-button {
left: 0;
position: absolute;
top: 12px;
}
}
}
.element-set-content .custom-select.input-option {
@ -816,13 +826,13 @@
.advanced-options-wrapper {
width: 100%;
padding-left: 0.25rem;
}
.advanced-options {
background-color: #303236;
border: 1px solid $color-gray-60;
background-color: $color-gray-50;
border-radius: 4px;
padding: 0.5rem;
padding: 8px;
position: relative;
top: 2px;
width: 100%;
@ -897,6 +907,22 @@
.download-button {
margin-top: 10px;
}
.input-element {
width: 100%;
flex-shrink: initial;
}
.row-grid-2 {
grid-column-gap: 1em;
}
.color-info {
input {
margin-right: 1em;
width: 74px;
}
}
}
.shadow-options .color-row-wrap {
@ -920,6 +946,10 @@
&:hover svg {
fill: $color-primary;
}
&.actions-inside {
position: absolute;
right: 0;
}
}
.element-set-label {
@ -985,6 +1015,7 @@
.spacing-options {
display: flex;
width: 100%;
}
.asset-section {
@ -1007,7 +1038,7 @@
width: 100%;
max-width: none;
margin: 0;
background: #303236;
background-color: #303236;
border-top: none;
border-left: none;
border-right: none;
@ -1045,17 +1076,16 @@
.go-to-lib-button {
transition: border 0.3s, color 0.3s;
text-align: center;
background: $color-gray-60;
background: $color-gray-50;
padding: 0.5rem;
border-radius: 2px;
cursor: pointer;
font-size: 14px;
margin-top: 1rem;
border: 1px solid $color-gray-60;
&:hover {
border: 1px solid $color-primary;
color: $color-primary;
background: $color-primary;
color: $color-black;
}
}
}

8
frontend/src/app/main/ui/workspace/sidebar/options/common.cljs
View file

@ -22,9 +22,7 @@
(.scrollIntoViewIfNeeded ^js node)))))
(when visible?
[:*
[:div.focus-overlay {:on-click handle-click}]
[:div.advanced-options-wrapper {:ref ref}
[:div.advanced-options {}
children]]])))
[:div.advanced-options-wrapper {:ref ref}
[:div.advanced-options {}
children]])))

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

@ -13,7 +13,6 @@
[app.main.data.workspace.changes :as dch]
[app.main.store :as st]
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
[app.main.ui.workspace.sidebar.options.rows.input-row :refer [input-row]]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [t]]))

11
frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
View file

@ -117,11 +117,13 @@
(on-save-grid grid)))
is-default (= (->> grid :params)
(->> grid :type default-grid-params))]
(->> grid :type default-grid-params))
open? (:show-advanced-options @state)]
[:div.grid-option
[:div.grid-option-main
[:button.custom-button {:class (when (:show-advanced-options @state) "is-active")
[:div.grid-option-main {:style {:display (when open? "none")}}
[:button.custom-button {:class (when open? "is-active")
:on-click toggle-advanced-options} i/actions]
[:& select {:class "flex-grow"
@ -148,8 +150,9 @@
[:button.custom-button {:on-click handle-toggle-visibility} (if display i/eye i/eye-closed)]
[:button.custom-button {:on-click handle-remove-grid} i/minus]]]
[:& advanced-options {:visible? (:show-advanced-options @state)
[:& advanced-options {:visible? open?
:on-close toggle-advanced-options}
[:button.custom-button {:on-click toggle-advanced-options} i/actions]
(when (= :square type)
[:& input-row {:label (t locale "workspace.options.grid.params.size")
:class "pixels"

42
frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
View file

@ -98,25 +98,32 @@
(fn []
(st/emit! (dch/update-shapes ids #(update-in % [:shadow index :hidden] not)))))]
[:*
[:div.element-set-options-group
[:div.element-set-options-group {:style {:display (when @open-shadow "none")}}
[:div.element-set-actions-button
{:on-click #(reset! open-shadow true)}
i/actions]
[:> numeric-input {:ref basic-offset-x-ref
:on-change (update-attr index :offset-x valid-number?)
:on-click (select-text basic-offset-x-ref)
:value (:offset-x value)}]
[:> numeric-input {:ref basic-offset-y-ref
:on-change (update-attr index :offset-y valid-number?)
:on-click (select-text basic-offset-y-ref)
:value (:offset-y value)}]
[:> numeric-input {:ref basic-blur-ref
:on-click (select-text basic-blur-ref)
:on-change (update-attr index :blur valid-number?)
:min 0
:value (:blur value)}]
;; [:> numeric-input {:ref basic-offset-x-ref
;; :on-change (update-attr index :offset-x valid-number?)
;; :on-click (select-text basic-offset-x-ref)
;; :value (:offset-x value)}]
;; [:> numeric-input {:ref basic-offset-y-ref
;; :on-change (update-attr index :offset-y valid-number?)
;; :on-click (select-text basic-offset-y-ref)
;; :value (:offset-y value)}]
;; [:> numeric-input {:ref basic-blur-ref
;; :on-click (select-text basic-blur-ref)
;; :on-change (update-attr index :blur valid-number?)
;; :min 0
;; :value (:blur value)}]
[:select.input-select
{:default-value (str (:style value))
:on-change (fn [event]
(let [value (-> event dom/get-target dom/get-value d/read-string)]
(st/emit! (dch/update-shapes ids #(assoc-in % [:shadow index :style] value)))))}
[:option {:value ":drop-shadow"} (t locale "workspace.options.shadow-options.drop-shadow")]
[:option {:value ":inner-shadow"} (t locale "workspace.options.shadow-options.inner-shadow")]]
[:div.element-set-actions
[:div.element-set-actions-button {:on-click (toggle-visibility index)}
@ -126,7 +133,10 @@
[:& advanced-options {:visible? @open-shadow
:on-close #(reset! open-shadow false)}
[:div.row-grid-2
[:div.color-data
[:div.element-set-actions-button
{:on-click #(reset! open-shadow false)}
i/actions]
[:select.input-select
{:default-value (str (:style value))
:on-change (fn [event]

17
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
View file

@ -424,7 +424,8 @@
[:div.element-set-content
[:> font-options opts]
[:div.row-flex
[:> spacing-options opts]
[:> spacing-options opts]]
[:div.row-flex
[:> text-transform-options opts]]]))
@ -467,7 +468,8 @@
[:*
[:div.element-set-options-group.typography-entry
{:class (when selected? "selected")}
{:class (when selected? "selected")
:style {:display (when @open? "none")}}
[:div.typography-selection-wrapper
{:class (when on-click "is-selectable")
:on-click on-click
@ -501,6 +503,10 @@
[:span.label (tr "workspace.assets.typography.font-id")]
[:span (:font-id typography)]]
[:div.element-set-actions-button.actions-inside
{:on-click #(reset! open? false)}
i/actions]
[:div.row-flex
[:span.label (tr "workspace.assets.typography.font-variant-id")]
[:span (:font-variant-id typography)]]
@ -532,6 +538,11 @@
{:type "text"
:ref name-input-ref
:default-value (cp/merge-path-item (:path typography) (:name typography))
:on-blur on-name-blur}]]]
:on-blur on-name-blur}]
[:div.element-set-actions-button
{:on-click #(reset! open? false)}
i/actions]]]
[:& typography-options {:values typography
:on-change on-change}]])]]))