From 3984da6c0f9adf16c0f8fc9da567964751325802 Mon Sep 17 00:00:00 2001 From: Juan de la Cruz Date: Thu, 19 Dec 2019 14:07:25 +0100 Subject: [PATCH] wip workspace bar tools --- frontend/src/uxbox/builtins/icons.cljs | 11 +++ .../src/uxbox/main/ui/workspace/header.cljs | 81 ++++++++++++------- .../uxbox/main/ui/workspace/selection.cljs | 24 +++--- 3 files changed, 77 insertions(+), 39 deletions(-) diff --git a/frontend/src/uxbox/builtins/icons.cljs b/frontend/src/uxbox/builtins/icons.cljs index 73b90c61f..ae5e0ea3f 100644 --- a/frontend/src/uxbox/builtins/icons.cljs +++ b/frontend/src/uxbox/builtins/icons.cljs @@ -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 diff --git a/frontend/src/uxbox/main/ui/workspace/header.cljs b/frontend/src/uxbox/main/ui/workspace/header.cljs index 22bf6adc3..f3aa5fffa 100644 --- a/frontend/src/uxbox/main/ui/workspace/header.cljs +++ b/frontend/src/uxbox/main/ui/workspace/header.cljs @@ -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") diff --git a/frontend/src/uxbox/main/ui/workspace/selection.cljs b/frontend/src/uxbox/main/ui/workspace/selection.cljs index 6e2819827..05706d214 100644 --- a/frontend/src/uxbox/main/ui/workspace/selection.cljs +++ b/frontend/src/uxbox/main/ui/workspace/selection.cljs @@ -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