Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-24 15:56:11 -05:00
Code Issues Activity

wip workspace bar tools

Browse source
This commit is contained in:
Juan de la Cruz 2019-12-19 14:07:25 +01:00
parent 007ee0de5e
commit 3984da6c0f
3 changed files with 77 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
frontend/src/uxbox/builtins/icons.cljs
View file

@ -68,6 +68,17 @@
{:d {:d
"M298.766 343.507C295.152 347.12 371.3 500 381.92 500c10.62 0 104.594-152.013 102.007-156.493-2.583-4.474-63.805-.626-63.805-.626s26.42-111.48-50.044-195.794c-87.817-96.833-193.242-82.57-193.242-82.57s6.47-60.767 0-64.432C171.166-3.13 15.942 87.23 16.02 96.417c.08 9.187 149.695 93.815 156.386 90.08 6.692-3.738 1.877-63.18 1.877-63.18s77.484-9.466 147.628 61.927c63.27 64.394 36.283 158.888 36.283 158.888s-55.935-4.117-59.427-.625z"}]]])) "M298.766 343.507C295.152 347.12 371.3 500 381.92 500c10.62 0 104.594-152.013 102.007-156.493-2.583-4.474-63.805-.626-63.805-.626s26.42-111.48-50.044-195.794c-87.817-96.833-193.242-82.57-193.242-82.57s6.47-60.767 0-64.432C171.166-3.13 15.942 87.23 16.02 96.417c.08 9.187 149.695 93.815 156.386 90.08 6.692-3.738 1.877-63.18 1.877-63.18s77.484-9.466 147.628 61.927c63.27 64.394 36.283 158.888 36.283 158.888s-55.935-4.117-59.427-.625z"}]]]))
(def artboard
(html
[:svg
{:viewBox "0 0 500 500"
:height "500"
:width "500"}
[:g
[:path
{:d
"M0 0v134.00391L134.00586 0H0zm166.32227 0v44.453125h289.22461V455.54688H44.453125V164.07617H0V500h500V0H166.32227z"}]]]))
(def chat (def chat
(html (html
[:svg#svg2 [:svg#svg2

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

@ -85,11 +85,41 @@
[:div.workspace-options [:div.workspace-options
[:ul.options-btn [:ul.options-btn
; [:li.tooltip.tooltip-bottom
; {:alt (tr "header.draw-tools")
; :class (when (contains? layout :drawtools) "selected")
; :on-click #(st/emit! (dw/toggle-layout-flag :drawtools))}
; i/shapes]
[:li.tooltip.tooltip-bottom [:li.tooltip.tooltip-bottom
{:alt (tr "header.draw-tools") {:alt (tr "header.color-palette")
:class (when (contains? layout :drawtools) "selected") :class (when (contains? layout :colorpalette) "selected")
:on-click #(st/emit! (dw/toggle-layout-flag :drawtools))} :on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))}
i/shapes] i/artboard]
[:li.tooltip.tooltip-bottom
{:alt (tr "header.color-palette")
:class (when (contains? layout :colorpalette) "selected")
:on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))}
i/box]
[:li.tooltip.tooltip-bottom
{:alt (tr "header.color-palette")
:class (when (contains? layout :colorpalette) "selected")
:on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))}
i/circle]
[:li.tooltip.tooltip-bottom
{:alt (tr "header.color-palette")
:class (when (contains? layout :colorpalette) "selected")
:on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))}
i/text]
[:li.tooltip.tooltip-bottom
{:alt (tr "header.color-palette")
:class (when (contains? layout :colorpalette) "selected")
:on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))}
i/curve]
[:li.tooltip.tooltip-bottom
{:alt (tr "header.color-palette")
:class (when (contains? layout :colorpalette) "selected")
:on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))}
i/pencil]
[:li.tooltip.tooltip-bottom [:li.tooltip.tooltip-bottom
{:alt (tr "header.color-palette") {:alt (tr "header.color-palette")
:class (when (contains? layout :colorpalette) "selected") :class (when (contains? layout :colorpalette) "selected")
@ -100,31 +130,29 @@
:class (when (contains? layout :icons) "selected") :class (when (contains? layout :icons) "selected")
:on-click #(st/emit! (dw/toggle-layout-flag :icons))} :on-click #(st/emit! (dw/toggle-layout-flag :icons))}
i/icon-set] i/icon-set]
[:li.tooltip.tooltip-bottom ; [:li.tooltip.tooltip-bottom
{:alt (tr "header.layers") ; {:alt (tr "header.layers")
:class (when (contains? layout :layers) "selected") ; :class (when (contains? layout :layers) "selected")
:on-click #(st/emit! (dw/toggle-layout-flag :layers))} ; :on-click #(st/emit! (dw/toggle-layout-flag :layers))}
i/layers] ; i/layers]
[:li.tooltip.tooltip-bottom ; [:li.tooltip.tooltip-bottom
{:alt (tr "header.element-options") ; {:alt (tr "header.element-options")
:class (when (contains? layout :element-options) "selected") ; :class (when (contains? layout :element-options) "selected")
:on-click #(st/emit! (dw/toggle-layout-flag :element-options))} ; :on-click #(st/emit! (dw/toggle-layout-flag :element-options))}
i/options] ; i/options]
[:li.tooltip.tooltip-bottom [:li.tooltip.tooltip-bottom
{:alt (tr "header.document-history") {:alt (tr "header.document-history")
:class (when (contains? layout :document-history) "selected") :class (when (contains? layout :document-history) "selected")
:on-click #(st/emit! (dw/toggle-layout-flag :document-history))} :on-click #(st/emit! (dw/toggle-layout-flag :document-history))}
i/undo-history]] i/undo-history]
[:ul.options-btn ; [:li.tooltip.tooltip-bottom
[:li.tooltip.tooltip-bottom ; {:alt (tr "header.undo")
{:alt (tr "header.undo") ; :on-click on-undo}
:on-click on-undo} ; i/undo]
i/undo] ; [:li.tooltip.tooltip-bottom
[:li.tooltip.tooltip-bottom ; {:alt (tr "header.redo")
{:alt (tr "header.redo") ; :on-click on-redo}
:on-click on-redo} ; i/redo]
i/redo]]
[:ul.options-btn
[:li.tooltip.tooltip-bottom [:li.tooltip.tooltip-bottom
{:alt (tr "header.download") {:alt (tr "header.download")
;; :on-click on-download ;; :on-click on-download
@ -133,8 +161,7 @@
[:li.tooltip.tooltip-bottom [:li.tooltip.tooltip-bottom
{:alt (tr "header.image") {:alt (tr "header.image")
:on-click on-image} :on-click on-image}
i/image]] i/image]
[:ul.options-btn
[:li.tooltip.tooltip-bottom [:li.tooltip.tooltip-bottom
{:alt (tr "header.rules") {:alt (tr "header.rules")
:class (when (contains? flags :rules) "selected") :class (when (contains? flags :rules) "selected")

24
frontend/src/uxbox/main/ui/workspace/selection.cljs
View file

@ -26,10 +26,10 @@
(def ^:private +circle-props+ (def ^:private +circle-props+
{:r 6 {:r 6
:style {:fillOpacity "1" :style {:fillOpacity "1"
:strokeWidth "1px" :strokeWidth "2px"
:vectorEffect "non-scaling-stroke"} :vectorEffect "non-scaling-stroke"}
:fill "#31e6e0" :fill "rgba(49,239,184,.7)"
:stroke "#28c4d4"}) :stroke "#31EFB8"})
;; --- Resize Implementation ;; --- Resize Implementation
@ -90,10 +90,10 @@
:on-mouse-down on-click :on-mouse-down on-click
:r r :r r
:style {:fillOpacity "1" :style {:fillOpacity "1"
:strokeWidth "1px" :strokeWidth "2px"
:vectorEffect "non-scaling-stroke"} :vectorEffect "non-scaling-stroke"}
:fill "#31e6e0" :fill "rgba(49,239,184,.7)"
:stroke "#28c4d4" :stroke "#31EFB8"
:cx cx :cx cx
:cy cy}]) :cy cy}])
@ -105,8 +105,8 @@
[:rect.main {:x x1 :y y1 [:rect.main {:x x1 :y y1
:width width :width width
:height height :height height
:stroke-dasharray (str (/ 5.0 zoom) "," (/ 5 zoom)) :stroke-dasharray (str (/ 8.0 zoom) "," (/ 5 zoom))
:style {:stroke "#333" :fill "transparent" :style {:stroke "#31EFB8" :fill "transparent"
:stroke-opacity "1"}}] :stroke-opacity "1"}}]
[:& control-item {:class "top" [:& control-item {:class "top"
:on-click #(on-click :top %) :on-click #(on-click :top %)
@ -183,8 +183,8 @@
:r (/ 6.0 zoom) :r (/ 6.0 zoom)
:key index :key index
:on-mouse-down #(on-mouse-down % index) :on-mouse-down #(on-mouse-down % index)
:fill "#31e6e0" :fill "rgba(49,239,184,.7)"
:stroke "#28c4d4" :stroke "#31EFB8"
:style {:cursor "pointer"}}])]))) :style {:cursor "pointer"}}])])))
;; TODO: add specs for clarity ;; TODO: add specs for clarity
@ -209,9 +209,9 @@
:width width :width width
:height height :height height
;; :stroke-dasharray (str (/ 5.0 zoom) "," (/ 5 zoom)) ;; :stroke-dasharray (str (/ 5.0 zoom) "," (/ 5 zoom))
:style {:stroke "#333" :style {:stroke "#31EFB8"
:stroke-width "0.5" :stroke-width "0.5"
:stroke-opacity "0.5" :stroke-opacity "1"
:fill "transparent"}}]])) :fill "transparent"}}]]))
(mf/defc single-selection-handlers (mf/defc single-selection-handlers