mirror of
https://github.com/penpot/penpot.git
synced 2025-01-24 15:39:50 -05:00
✨ Resizable color palette
This commit is contained in:
alonso.torres
parent
8d4612c683
commit
b26cbeccca
14 changed files with 181 additions and 110 deletions
|
|
@ -5,30 +5,26 @@
|
|||
// Copyright (c) UXBOX Labs SL
|
||||
|
||||
.color-cell {
|
||||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: 1fr auto;
|
||||
height: 100%;
|
||||
justify-items: center;
|
||||
width: 65px;
|
||||
|
||||
.color-bullet {
|
||||
// Creates strange artifacts
|
||||
border: 2px solid $color-gray-60;
|
||||
// box-shadow: 0 0 0 2px $color-gray-60;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
width: var(--bullet-size);
|
||||
height: var(--bullet-size);
|
||||
|
||||
&:hover {
|
||||
border-color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.cell-big .color-bullet {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
&.cell-small .color-bullet {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.color-bullet.color-big {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
& > * {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -38,10 +34,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
ul.palette-menu .color-bullet {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid $color-gray-10;
|
||||
margin-right: 5px;
|
||||
background-size: 8px;
|
||||
|
|
@ -67,14 +63,12 @@ ul.palette-menu .color-bullet {
|
|||
grid-area: color;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid $color-gray-10;
|
||||
background-size: 8px;
|
||||
}
|
||||
|
||||
.asset-section .asset-list-item .color-bullet {
|
||||
border: 1px solid $color-gray-20;
|
||||
border-radius: 10px;
|
||||
height: 20px;
|
||||
margin-right: $size-1;
|
||||
width: 20px;
|
||||
|
|
@ -91,38 +85,29 @@ ul.palette-menu .color-bullet {
|
|||
.color-bullet {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
|
||||
left center;
|
||||
background-color: $color-white;
|
||||
border-radius: 50%;
|
||||
|
||||
& > * {
|
||||
& .color-bullet-wrapper {
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") left center;
|
||||
background-color: $color-white;
|
||||
clip-path: circle(50%);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.is-gradient {
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") left center;
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
||||
& .color-bullet-wrapper > * {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.color-bullet.is-library-color .color-bullet-left,
|
||||
.selected-colors .color-bullet .color-bullet-left {
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
|
||||
.color-bullet.is-library-color .color-bullet-right,
|
||||
.selected-colors .color-bullet .color-bullet-right {
|
||||
border-radius: 0 10px 10px 0;
|
||||
}
|
||||
|
||||
.color-palette .color-bullet .color-bullet-left {
|
||||
border-radius: 25px 0 0 25px;
|
||||
}
|
||||
|
||||
.color-palette .color-bullet .color-bullet-right {
|
||||
border-radius: 0 25px 25px 0;
|
||||
}
|
||||
|
||||
.color-data .color-bullet.is-library-color {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.color-data .color-bullet.multiple {
|
||||
background: transparent;
|
||||
|
||||
|
|
@ -133,7 +118,7 @@ ul.palette-menu .color-bullet {
|
|||
|
||||
.color-data .color-bullet {
|
||||
border: 1px solid $color-gray-30;
|
||||
border-radius: $br-small;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -144,10 +129,6 @@ ul.palette-menu .color-bullet {
|
|||
margin: 5px 4px 0 0;
|
||||
width: 20px;
|
||||
|
||||
&.color-name {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&.palette-th {
|
||||
align-items: center;
|
||||
border: 1px solid $color-gray-30;
|
||||
|
|
@ -198,3 +179,11 @@ ul.palette-menu .color-bullet {
|
|||
fill: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
.color-data .color-bullet.is-not-library-color {
|
||||
border-radius: $br-small;
|
||||
|
||||
& .color-bullet-wrapper {
|
||||
clip-path: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -122,6 +122,7 @@
|
|||
overflow: hidden;
|
||||
width: 100%;
|
||||
padding: 0.25rem;
|
||||
height: 100%;
|
||||
|
||||
&.size-small {
|
||||
height: 3.5rem;
|
||||
|
|
@ -135,6 +136,7 @@
|
|||
transition: all 0.6s ease;
|
||||
width: 100%;
|
||||
scroll-behavior: smooth;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.color-cell {
|
||||
|
|
@ -145,24 +147,21 @@
|
|||
flex-shrink: 0;
|
||||
position: relative;
|
||||
|
||||
&.cell-big {
|
||||
flex-basis: 66px;
|
||||
}
|
||||
|
||||
&.cell-small {
|
||||
flex-basis: 52px;
|
||||
}
|
||||
|
||||
.color-text {
|
||||
color: $color-gray-20;
|
||||
font-size: $fs12;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 66px;
|
||||
width: 65px;
|
||||
text-align: center;
|
||||
margin-top: 0.25rem;
|
||||
|
||||
.no-text & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.current {
|
||||
.color-text {
|
||||
color: $color-gray-50;
|
||||
|
|
|
|||
|
|
@ -231,15 +231,23 @@
|
|||
|
||||
.asset-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-auto-rows: 6vh;
|
||||
column-gap: 0.5rem;
|
||||
row-gap: 0.5rem;
|
||||
|
||||
&.big {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-auto-rows: 10vh;
|
||||
|
||||
.three-row & {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.four-row & {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.grid-cell {
|
||||
padding: $size-1;
|
||||
|
||||
|
|
|
|||
|
|
@ -207,6 +207,11 @@ span.element-name {
|
|||
margin-left: auto;
|
||||
position: relative;
|
||||
width: 32px;
|
||||
right: 20px;
|
||||
|
||||
&.is-parent {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 13px;
|
||||
|
|
@ -242,7 +247,7 @@ span.element-name {
|
|||
}
|
||||
|
||||
.toggle-content {
|
||||
margin-left: auto;
|
||||
margin-left: 8px;
|
||||
width: 12px;
|
||||
|
||||
svg {
|
||||
|
|
|
|||
|
|
@ -432,6 +432,15 @@
|
|||
stored
|
||||
(d/concat-set flags)))))))
|
||||
|
||||
(defn remove-layout-flags
|
||||
[& flags]
|
||||
(ptk/reify ::remove-layout-flags
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(update state :workspace-layout
|
||||
(fn [stored]
|
||||
(reduce disj stored (d/concat-set flags)))))))
|
||||
|
||||
;; --- Set element options mode
|
||||
|
||||
(defn set-options-mode
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
[app.main.data.workspace.transforms :as dwt]
|
||||
[app.main.data.workspace.undo :as dwu]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.hooks.resize :as r]
|
||||
[app.util.dom :as dom]))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
@ -38,9 +39,17 @@
|
|||
:command (ds/a-mod "h")
|
||||
:fn #(st/emit! (dw/go-to-layout :document-history))}
|
||||
|
||||
:toggle-palette {:tooltip (ds/alt "P")
|
||||
:command (ds/a-mod "p")
|
||||
:fn #(st/emit! (dw/toggle-layout-flags :colorpalette))}
|
||||
:toggle-colorpalette {:tooltip (ds/alt "P")
|
||||
:command (ds/a-mod "p")
|
||||
:fn #(do (r/set-resize-type! :bottom)
|
||||
(st/emit! (dw/remove-layout-flags :textpalette)
|
||||
(dw/toggle-layout-flags :colorpalette)))}
|
||||
|
||||
:toggle-textpalette {:tooltip (ds/alt "T")
|
||||
:command (ds/a-mod "t")
|
||||
:fn #(do (r/set-resize-type! :bottom)
|
||||
(st/emit! (dw/remove-layout-flags :colorpalette)
|
||||
(dw/toggle-layout-flags :textpalette)))}
|
||||
|
||||
:toggle-rules {:tooltip (ds/meta-shift "R")
|
||||
:command (ds/c-mod "shift+r")
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
(ns app.main.ui.components.color-bullet
|
||||
(:require
|
||||
[app.util.color :as uc]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
|
|
@ -21,17 +22,18 @@
|
|||
[:div.color-bullet.multiple {:on-click #(when on-click (on-click %))}]
|
||||
|
||||
;; No multiple selection
|
||||
(let [color (if (string? color) {:color color :opacity 1} color)
|
||||
background (if (:gradient color) (uc/color->background color) "auto")]
|
||||
[:div.color-bullet.tooltip.tooltip-right {:class (if (:id color) "is-library-color" "is-not-library-color")
|
||||
:on-click #(when on-click (on-click %))
|
||||
:alt (or (:name color) (:color color) (gradient-type->string (:type (:gradient color))))
|
||||
:style {:background background}}
|
||||
(when (not(:gradient color))
|
||||
[:*
|
||||
(let [color (if (string? color) {:color color :opacity 1} color)]
|
||||
[:div.color-bullet.tooltip.tooltip-right
|
||||
{:class (dom/classnames :is-library-color (some? (:id color))
|
||||
:is-not-library-color (nil? (:id color))
|
||||
:is-gradient (some? (:gradient color)))
|
||||
:on-click #(when on-click (on-click %))
|
||||
:alt (or (:name color) (:color color) (gradient-type->string (:type (:gradient color))))}
|
||||
(if (:gradient color)
|
||||
[:div.color-bullet-wrapper {:style {:background (uc/color->background color)}}]
|
||||
[:div.color-bullet-wrapper
|
||||
[:div.color-bullet-left {:style {:background (uc/color->background (assoc color :opacity 1))}}]
|
||||
[:div.color-bullet-right {:style {:background (uc/color->background color)}}]]
|
||||
)])))
|
||||
[:div.color-bullet-right {:style {:background (uc/color->background color)}}]])])))
|
||||
|
||||
(mf/defc color-name [{:keys [color size on-click on-double-click]}]
|
||||
(let [color (if (string? color) {:color color :opacity 1} color)
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
[app.main.ui.workspace.left-toolbar :refer [left-toolbar]]
|
||||
[app.main.ui.workspace.libraries]
|
||||
[app.main.ui.workspace.sidebar :refer [left-sidebar right-sidebar]]
|
||||
[app.main.ui.workspace.textpalette :refer [textpalette]]
|
||||
[app.main.ui.workspace.viewport :refer [viewport]]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
|
|
@ -41,7 +42,10 @@
|
|||
{:keys [options-mode]} local
|
||||
file (obj/get props "file")
|
||||
layout (obj/get props "layout")
|
||||
|
||||
colorpalette? (:colorpalette layout)
|
||||
textpalette? (:textpalette layout)
|
||||
hide-ui? (:hide-ui layout)
|
||||
|
||||
on-resize
|
||||
(mf/use-callback
|
||||
|
|
@ -52,7 +56,11 @@
|
|||
|
||||
node-ref (use-resize-observer on-resize)]
|
||||
[:*
|
||||
(when colorpalette? [:& colorpalette])
|
||||
(when (and colorpalette? (not hide-ui?))
|
||||
[:& colorpalette])
|
||||
|
||||
(when (and textpalette? (not hide-ui?))
|
||||
[:& textpalette])
|
||||
|
||||
[:section.workspace-content {:ref node-ref}
|
||||
[:section.workspace-viewport
|
||||
|
|
@ -64,7 +72,7 @@
|
|||
:selected selected
|
||||
:layout layout}]]]
|
||||
|
||||
(when-not (:hide-ui layout)
|
||||
(when-not hide-ui?
|
||||
[:*
|
||||
[:& left-toolbar {:layout layout}]
|
||||
(if (:collapse-left-sidebar layout)
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
(ns app.main.ui.workspace.colorpalette
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.math :as mth]
|
||||
[app.main.data.workspace.colors :as mdc]
|
||||
[app.main.refs :as refs]
|
||||
|
|
@ -15,6 +16,7 @@
|
|||
[app.main.ui.hooks.resize :refer [use-resize-hook]]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.util.color :as uc]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :refer [tr]]
|
||||
[app.util.keyboard :as kbd]
|
||||
[app.util.object :as obj]
|
||||
|
|
@ -39,7 +41,7 @@
|
|||
|
||||
;; --- Components
|
||||
(mf/defc palette-item
|
||||
[{:keys [color size]}]
|
||||
[{:keys [color]}]
|
||||
(let [ids-with-children (map :id (mf/deref refs/selected-shapes-with-children))
|
||||
select-color
|
||||
(fn [event]
|
||||
|
|
@ -47,10 +49,9 @@
|
|||
(st/emit! (mdc/change-stroke ids-with-children (merge uc/empty-color color)))
|
||||
(st/emit! (mdc/change-fill ids-with-children (merge uc/empty-color color)))))]
|
||||
|
||||
[:div.color-cell {:class (str "cell-"(name size))
|
||||
:on-click select-color}
|
||||
[:div.color-cell {:on-click select-color}
|
||||
[:& cb/color-bullet {:color color}]
|
||||
[:& cb/color-name {:color color :size size}]]))
|
||||
[:& cb/color-name {:color color}]]))
|
||||
|
||||
(mf/defc palette
|
||||
[{:keys [current-colors recent-colors file-colors shared-libs selected]}]
|
||||
|
|
@ -116,7 +117,9 @@
|
|||
(events/unlistenByKey key1))))
|
||||
|
||||
[:div.color-palette {:ref parent-ref
|
||||
:style #js {"--height" (str size "px")}}
|
||||
:class (dom/classnames :no-text (< size 72))
|
||||
:style #js {"--height" (str size "px")
|
||||
"--bullet-size" (str (if (< size 72) (- size 15) (- size 30)) "px")}}
|
||||
[:div.resize-area {:on-pointer-down on-pointer-down
|
||||
:on-lost-pointer-capture on-lost-pointer-capture
|
||||
:on-mouse-move on-mouse-move}]
|
||||
|
|
@ -155,31 +158,18 @@
|
|||
(for [[idx color] (map-indexed vector (take 7 (reverse recent-colors))) ]
|
||||
[:& cb/color-bullet {:key (str "color-" idx)
|
||||
:color color}])]]
|
||||
|
||||
[:hr.dropdown-separator]
|
||||
|
||||
[:li
|
||||
{:on-click #(st/emit! (mdc/change-palette-size :big))}
|
||||
(when (= size :big) i/tick)
|
||||
(tr "workspace.libraries.colors.big-thumbnails")]
|
||||
|
||||
[:li
|
||||
{:on-click #(st/emit! (mdc/change-palette-size :small))}
|
||||
(when (= size :small) i/tick)
|
||||
(tr "workspace.libraries.colors.small-thumbnails")]]]
|
||||
]]
|
||||
|
||||
[:div.color-palette-actions
|
||||
{:on-click #(swap! state assoc :show-menu true)}
|
||||
[:div.color-palette-actions-button i/actions]]
|
||||
|
||||
[:span.left-arrow {:on-click on-left-arrow-click} i/arrow-slide]
|
||||
[:div.color-palette-content {:class (if (= size :big) "size-big" "size-small")
|
||||
:ref container :on-wheel on-scroll}
|
||||
[:div.color-palette-content {:ref container :on-wheel on-scroll}
|
||||
[:div.color-palette-inside {:style {:position "relative"
|
||||
:right (str (* 66 offset) "px")}}
|
||||
(for [[idx item] (map-indexed vector current-colors)]
|
||||
[:& palette-item {:color item
|
||||
:key idx}])]]
|
||||
[:& palette-item {:color item :key idx}])]]
|
||||
|
||||
[:span.right-arrow {:on-click on-right-arrow-click} i/arrow-slide]]))
|
||||
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
[app.main.repo :as rp]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.dropdown :refer [dropdown]]
|
||||
[app.main.ui.hooks.resize :as r]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.workspace.presence :refer [active-sessions]]
|
||||
[app.util.dom :as dom]
|
||||
|
|
@ -297,12 +298,25 @@
|
|||
(tr "workspace.header.menu.show-layers"))]
|
||||
[:span.shortcut (sc/get-tooltip :toggle-layers)]]
|
||||
|
||||
[:li {:on-click #(st/emit! (dw/toggle-layout-flags :colorpalette))}
|
||||
[:li {:on-click (fn []
|
||||
(r/set-resize-type! :bottom)
|
||||
(st/emit! (dw/remove-layout-flags :textpalette)
|
||||
(dw/toggle-layout-flags :colorpalette)))}
|
||||
[:span
|
||||
(if (contains? layout :colorpalette)
|
||||
(tr "workspace.header.menu.hide-palette")
|
||||
(tr "workspace.header.menu.show-palette"))]
|
||||
[:span.shortcut (sc/get-tooltip :toggle-palette)]]
|
||||
(tr "workspace.header.menu.hide-colorpalette")
|
||||
(tr "workspace.header.menu.show-colorpalette"))]
|
||||
[:span.shortcut (sc/get-tooltip :toggle-colorpalette)]]
|
||||
|
||||
[:li {:on-click (fn []
|
||||
(r/set-resize-type! :bottom)
|
||||
(st/emit! (dw/remove-layout-flags :colorpalette)
|
||||
(dw/toggle-layout-flags :textpalette)))}
|
||||
[:span
|
||||
(if (contains? layout :textpalette)
|
||||
(tr "workspace.header.menu.hide-textpalette")
|
||||
(tr "workspace.header.menu.show-textpalette"))]
|
||||
[:span.shortcut (sc/get-tooltip :toggle-textpalette)]]
|
||||
|
||||
[:li {:on-click #(st/emit! (dw/toggle-layout-flags :assets))}
|
||||
[:span
|
||||
|
|
|
|||
|
|
@ -120,17 +120,19 @@
|
|||
|
||||
[:ul.left-toolbar-options.panels
|
||||
[:li.tooltip.tooltip-right
|
||||
{;;:alt (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-textpalette))
|
||||
{:alt (tr "workspace.toolbar.text-palette" (sc/get-tooltip :toggle-textpalette))
|
||||
:class (when (contains? layout :textpalette) "selected")
|
||||
:on-click (do
|
||||
:on-click (fn []
|
||||
(r/set-resize-type! :bottom)
|
||||
(st/emitf (dw/toggle-layout-flags :textpalette)))}
|
||||
i/palette]
|
||||
(st/emit! (dw/remove-layout-flags :colorpalette)
|
||||
(dw/toggle-layout-flags :textpalette)))}
|
||||
"Ag"]
|
||||
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-palette))
|
||||
{:alt (tr "workspace.toolbar.color-palette" (sc/get-tooltip :toggle-colorpalette))
|
||||
:class (when (contains? layout :colorpalette) "selected")
|
||||
:on-click (do
|
||||
:on-click (fn []
|
||||
(r/set-resize-type! :bottom)
|
||||
(st/emitf (dw/toggle-layout-flags :colorpalette)))}
|
||||
(st/emit! (dw/remove-layout-flags :textpalette)
|
||||
(dw/toggle-layout-flags :colorpalette)))}
|
||||
i/palette]]]]))
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
[app.main.ui.workspace.sidebar.layers :refer [layers-toolbox]]
|
||||
[app.main.ui.workspace.sidebar.options :refer [options-toolbox]]
|
||||
[app.main.ui.workspace.sidebar.sitemap :refer [sitemap]]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.object :as obj]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
|
|
@ -37,6 +38,10 @@
|
|||
(st/emit! (dw/toggle-layout-flags :collapse-left-sidebar)))]
|
||||
|
||||
[:aside.settings-bar.settings-bar-left {:ref parent-ref
|
||||
:class (dom/classnames
|
||||
:two-row (<= size 300)
|
||||
:three-row (and (> size 300) (<= size 400))
|
||||
:four-row (> size 400))
|
||||
:style #js {"--width" (str size "px")}}
|
||||
[:div.resize-area {:on-pointer-down on-pointer-down
|
||||
:on-lost-pointer-capture on-lost-pointer-capture
|
||||
|
|
|
|||
|
|
@ -213,7 +213,7 @@
|
|||
:on-start-edit #(reset! disable-drag true)
|
||||
:on-stop-edit #(reset! disable-drag false)}]
|
||||
|
||||
[:div.element-actions
|
||||
[:div.element-actions {:class (when (:shapes item) "is-parent")}
|
||||
[:div.toggle-element {:class (when (:hidden item) "selected")
|
||||
:on-click toggle-visibility}
|
||||
(if (:hidden item) i/eye-closed i/eye)]
|
||||
|
|
|
|||
31
frontend/src/app/main/ui/workspace/textpalette.cljs
Normal file
31
frontend/src/app/main/ui/workspace/textpalette.cljs
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
;;
|
||||
;; Copyright (c) UXBOX Labs SL
|
||||
|
||||
(ns app.main.ui.workspace.textpalette
|
||||
(:require
|
||||
#_[app.util.dom :as dom]
|
||||
#_[app.common.data :as d]
|
||||
#_[app.common.math :as mth]
|
||||
#_[app.main.data.workspace.colors :as mdc]
|
||||
#_[app.main.refs :as refs]
|
||||
#_[app.main.store :as st]
|
||||
#_[app.main.ui.components.color-bullet :as cb]
|
||||
#_[app.main.ui.components.dropdown :refer [dropdown]]
|
||||
#_[app.main.ui.hooks.resize :refer [use-resize-hook]]
|
||||
#_[app.main.ui.icons :as i]
|
||||
#_[app.util.color :as uc]
|
||||
#_[app.util.i18n :refer [tr]]
|
||||
#_[app.util.keyboard :as kbd]
|
||||
#_[app.util.object :as obj]
|
||||
#_[cuerdas.core :as str]
|
||||
#_[goog.events :as events]
|
||||
#_[okulary.core :as l]
|
||||
[rumext.alpha :as mf]
|
||||
))
|
||||
|
||||
(mf/defc textpalette
|
||||
[]
|
||||
[:div])
|
||||
Loading…
Add table
Reference in a new issue