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

Merge pull request #222 from uxbox/random_fixes

Browse source 
Random fixes
This commit is contained in:
Andrey Antukh 2020-05-20 15:42:05 +02:00 • committed by GitHub
commit ca5091d8b0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 95 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -217,5 +217,19 @@
}
}
}
.chrome-picker {
font-family: inherit !important;
input {
margin-bottom: auto;
}
& > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
width: 25px !important;
height: 25px !important;
border-radius: 20px !important;
margin: 0 !important;
}
}

8
frontend/resources/styles/main/partials/workspace-header.scss
View file

@ -36,7 +36,7 @@
height: 30px;
width: 28px;
}
}
&:hover {
@ -118,6 +118,8 @@
cursor: pointer;
font-size: $fs12;
padding: $small $x-small;
display: flex;
justify-content: space-between;
svg {
fill: $color-gray-60;
@ -130,6 +132,10 @@
margin: 0 $x-small;
}
.shortcut {
color: $color-gray-20;
}
&:hover {
background-color: $color-primary-lighter;
}

13
frontend/src/uxbox/main/data/workspace.cljs
View file

@ -1516,11 +1516,14 @@
;; Shortcuts impl https://github.com/ccampbell/mousetrap
(def shortcuts
{"ctrl+shift+m" #(st/emit! (toggle-layout-flag :sitemap))
"ctrl+shift+i" #(st/emit! (toggle-layout-flag :libraries))
"ctrl+shift+l" #(st/emit! (toggle-layout-flag :layers))
"ctrl+shift+r" #(st/emit! (toggle-layout-flag :rules))
"ctrl+shift+d" #(st/emit! (toggle-layout-flag :dynamic-alignment))
{"ctrl+m" #(st/emit! (toggle-layout-flag :sitemap))
"ctrl+i" #(st/emit! (toggle-layout-flag :libraries))
"ctrl+l" #(st/emit! (toggle-layout-flag :layers))
"ctrl+r" #(st/emit! (toggle-layout-flag :rules))
"ctrl+a" #(st/emit! (toggle-layout-flag :dynamic-alignment))
"ctrl+p" #(st/emit! (toggle-layout-flag :colorpalette))
"ctrl+'" #(st/emit! (toggle-layout-flag :display-grid))
"ctrl+shift+'" #(st/emit! (toggle-layout-flag :snap-grid))
"+" #(st/emit! (increase-zoom nil))
"-" #(st/emit! (decrease-zoom nil))
"g" #(st/emit! create-group)

3
frontend/src/uxbox/main/ui/components/editable_select.cljs
View file

@ -16,7 +16,7 @@
[uxbox.main.ui.icons :as i]
[uxbox.main.ui.components.dropdown :refer [dropdown]]))
(mf/defc editable-select [{:keys [value type options class on-change]}]
(mf/defc editable-select [{:keys [value type options class on-change placeholder]}]
(let [state (mf/use-state {:id (uuid/next)
:is-open? false
:current-value value})
@ -52,6 +52,7 @@
[:div.editable-select {:class class}
[:input.input-text {:value (or (-> @state :current-value value->label) "")
:on-change handle-change-input
:placeholder placeholder
:type type}]
[:span.dropdown-button {:on-click open-dropdown} i/arrow-down]

22
frontend/src/uxbox/main/ui/workspace/drawarea.cljs
View file

@ -116,8 +116,9 @@
(rx/of handle-drawing-generic)))))
(def handle-drawing-generic
(letfn [(resize-shape [{:keys [x y] :as shape} initial point lock? point-snap]
(let [shape' (geom/shape->rect-shape shape)
(letfn [(resize-shape [{:keys [x y] :as shape} point lock? point-snap]
(let [initial (gpt/point x y)
shape' (geom/shape->rect-shape shape)
shapev (gpt/point (:width shape') (:height shape'))
deltav (gpt/to-vec initial point-snap)
scalev (gpt/divide (gpt/add shapev deltav) shapev)
@ -130,8 +131,8 @@
(assoc-in [:modifiers :resize-origin] (gpt/point x y))
(assoc-in [:modifiers :resize-rotation] 0))))
(update-drawing [state initial point lock? point-snap]
(update-in state [:workspace-local :drawing] resize-shape initial point lock? point-snap))]
(update-drawing [state point lock? point-snap]
(update-in state [:workspace-local :drawing] resize-shape point lock? point-snap))]
(ptk/reify ::handle-drawing-generic
ptk/WatchEvent
@ -140,8 +141,7 @@
stoper? #(or (ms/mouse-up? %) (= % :interrupt))
stoper (rx/filter stoper? stream)
initial @ms/mouse-position
mouse ms/mouse-position
page-id (get state :current-page-id)
objects (get-in state [:workspace-data page-id :objects])
layout (get state :workspace-layout)
@ -165,12 +165,18 @@
(rx/concat
(rx/of #(assoc-in state [:workspace-local :drawing] shape))
(->> mouse
(->> (snap/closest-snap-point page-id [shape] layout initial)
(rx/map (fn [{:keys [x y]}]
#(-> %
(assoc-in [:workspace-local :drawing :x] x)
(assoc-in [:workspace-local :drawing :y] y)))))
(->> ms/mouse-position
(rx/with-latest vector ms/mouse-position-ctrl)
(rx/switch-map (fn [[point :as current]]
(->> (snap/closest-snap-point page-id [shape] layout point)
(rx/map #(conj current %)))))
(rx/map (fn [[pt ctrl? point-snap]] #(update-drawing % initial pt ctrl? point-snap)))
(rx/map (fn [[pt ctrl? point-snap]] #(update-drawing % pt ctrl? point-snap)))
(rx/take-until stoper))
(rx/of handle-finish-drawing)))))))

14
frontend/src/uxbox/main/ui/workspace/frame_grid.cljs
View file

@ -42,7 +42,16 @@
:stroke-width (str (/ 1 zoom))}}])]])))
(mf/defc layout-grid [{:keys [key frame zoom grid]}]
(let [{color-value :value color-opacity :opacity} (-> grid :params :color)]
(let [{color-value :value color-opacity :opacity} (-> grid :params :color)
gutter (-> grid :params :gutter)
gutter? (and (not (nil? gutter)) (not= gutter 0))
style (if gutter?
#js {:fill color-value
:opacity color-opacity}
#js {:stroke color-value
:strokeOpacity color-opacity
:fill "transparent"})]
[:g.grid
(for [{:keys [x y width height]} (gg/grid-areas frame grid)]
[:rect {:key (str key "-" x "-" y)
@ -50,8 +59,7 @@
:y y
:width width
:height height
:style {:fill color-value
:opacity color-opacity}}])]))
:style style}])]))
(mf/defc grid-display-frame [{:keys [frame zoom]}]
(let [grids (:grids frame)]

21
frontend/src/uxbox/main/ui/workspace/header.cljs
View file

@ -75,43 +75,50 @@
[:span
(if (contains? layout :rules)
(t locale "workspace.header.menu.hide-rules")
(t locale "workspace.header.menu.show-rules"))]]
(t locale "workspace.header.menu.show-rules"))]
[:span.shortcut "Ctrl+r"]]
[:li {:on-click #(st/emit! (dw/toggle-layout-flag :display-grid))}
[:span
(if (contains? layout :display-grid)
(t locale "workspace.header.menu.hide-grid")
(t locale "workspace.header.menu.show-grid"))]]
(t locale "workspace.header.menu.show-grid"))]
[:span.shortcut "Ctrl+'"]]
[:li {:on-click #(st/emit! (dw/toggle-layout-flag :snap-grid))}
[:span
(if (contains? layout :snap-grid)
(t locale "workspace.header.menu.disable-snap-grid")
(t locale "workspace.header.menu.enable-snap-grid"))]]
(t locale "workspace.header.menu.enable-snap-grid"))]
[:span.shortcut "Ctrl+Shift+'"]]
[:li {:on-click #(st/emit! (dw/toggle-layout-flag :sitemap :layers))}
[:span
(if (or (contains? layout :sitemap) (contains? layout :layers))
(t locale "workspace.header.menu.hide-layers")
(t locale "workspace.header.menu.show-layers"))]]
(t locale "workspace.header.menu.show-layers"))]
[:span.shortcut "Ctrl+l"]]
[:li {:on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))}
[:span
(if (contains? layout :colorpalette)
(t locale "workspace.header.menu.hide-palette")
(t locale "workspace.header.menu.show-palette"))]]
(t locale "workspace.header.menu.show-palette"))]
[:span.shortcut "Ctrl+p"]]
[:li {:on-click #(st/emit! (dw/toggle-layout-flag :libraries))}
[:span
(if (contains? layout :libraries)
(t locale "workspace.header.menu.hide-libraries")
(t locale "workspace.header.menu.show-libraries"))]]
(t locale "workspace.header.menu.show-libraries"))]
[:span.shortcut "Ctrl+i"]]
[:li {:on-click #(st/emit! (dw/toggle-layout-flag :dynamic-alignment))}
[:span
(if (contains? layout :dynamic-alignment)
(t locale "workspace.header.menu.disable-dynamic-alignment")
(t locale "workspace.header.menu.enable-dynamic-alignment"))]]
(t locale "workspace.header.menu.enable-dynamic-alignment"))]
[:span.shortcut "Ctrl+a"]]
]]]))
;; --- Header Component

6
frontend/src/uxbox/main/ui/workspace/sidebar/options/frame_grid.cljs
View file

@ -146,6 +146,7 @@
:type (when (number? (:size params)) "number" )
:class "input-option"
:options size-options
:placeholder "Auto"
:on-change handle-change-size}])
[:div.grid-option-main-actions
@ -167,6 +168,7 @@
:options size-options
:value (:size params)
:min 1
:placeholder "Auto"
:on-change handle-change-size}])
(when (= :column type)
@ -175,6 +177,7 @@
:options size-options
:value (:size params)
:min 1
:placeholder "Auto"
:on-change handle-change-size}])
(when (#{:row :column} type)
@ -196,6 +199,7 @@
(t locale "workspace.options.grid.params.height")
(t locale "workspace.options.grid.params.width"))
:class "pixels"
:placeholder "Auto"
:value (or (:item-length params) "")
:on-change handle-change-item-length}])
@ -205,10 +209,12 @@
:class "pixels"
:value (:gutter params)
:min 0
:placeholder "0"
:on-change (handle-change :params :gutter)}]
[:& input-row {:label (t locale "workspace.options.grid.params.margin")
:class "pixels"
:min 0
:placeholder "0"
:value (:margin params)
:on-change (handle-change :params :margin)}]])

8
frontend/src/uxbox/main/ui/workspace/sidebar/options/rows/input_row.cljs
View file

@ -15,7 +15,7 @@
[uxbox.main.ui.components.editable-select :refer [editable-select]]
[uxbox.util.dom :as dom]))
(mf/defc input-row [{:keys [label options value class min max on-change type]}]
(mf/defc input-row [{:keys [label options value class min max on-change type placeholder]}]
[:div.row-flex.input-row
[:span.element-set-subtitle label]
[:div.input-element {:class class}
@ -26,11 +26,13 @@
:class "input-option"
:options options
:on-change on-change}]
:editable-select
[:& editable-select {:value value
:class "input-option"
:options options
:type (when (number? value) "number")
:placeholder placeholder
:on-change on-change}]
(let [handle-change
@ -41,9 +43,9 @@
(or (not max) (<= value max)))
(on-change value))))]
[:input.input-text
{:placeholder label
{:placeholder placeholder
:type "number"
:on-change handle-change
:value value}]))
:value (or value "")}]))
]])

16
frontend/src/uxbox/main/ui/workspace/snap_feedback.cljs
View file

@ -56,12 +56,16 @@
(when (not-empty snaps) (map #(vector point %) snaps))) @state))]
(mf/use-effect
(fn []
(->> subject
(rx/switch-map #(rx/combine-latest
concat
(get-snap :y %)
(get-snap :x %)))
(rx/subs #(reset! state %)))))
(let [sub
(->> subject
(rx/switch-map #(rx/combine-latest
concat
(get-snap :y %)
(get-snap :x %)))
(rx/subs #(reset! state %)))]
;; On unmount callback
#(rx/dispose! sub))))
(mf/use-effect
(mf/deps shapes)

2
frontend/src/uxbox/util/color.cljs
View file

@ -33,7 +33,7 @@
[v]
(try
(into [] (gcolor/hexToRgb v))
(catch js/Object e [0 0 0])))
(catch :default e [0 0 0])))
(defn rgb->hex
[[r g b]]

4
frontend/src/uxbox/util/geom/grid.cljs
View file

@ -30,7 +30,7 @@
[{:keys [width height x y] :as frame} {:keys [size gutter margin item-length type] :as params}]
(let [size (if (number? size) size (calculate-size width item-length margin gutter))
parts (/ width size)
item-width (or item-length (+ parts (- gutter) (/ gutter size) (- (/ (* margin 2) size))))
item-width (min (or item-length ##Inf) (+ parts (- gutter) (/ gutter size) (- (/ (* margin 2) size))))
item-height height
initial-offset (case type
:right (- width (* item-width size) (* gutter (dec size)) margin)
@ -46,7 +46,7 @@
(let [size (if (number? size) size (calculate-size height item-length margin gutter))
parts (/ height size)
item-width width
item-height (or item-length (+ parts (- gutter) (/ gutter size) (- (/ (* margin 2) size))))
item-height (min (or item-length ##Inf) (+ parts (- gutter) (/ gutter size) (- (/ (* margin 2) size))))
initial-offset (case type
:right (- height (* item-height size) (* gutter (dec size)) margin)
:center (/ (- height (* item-height size) (* gutter (dec size))) 2)