0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-24 07:46:13 -05:00

wip workspace bar tools

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

View file

@ -68,6 +68,17 @@
{: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"}]]]))
(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
(html
[:svg#svg2

View file

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

View file

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