diff --git a/frontend/uxbox/ui/workspace/options.cljs b/frontend/uxbox/ui/workspace/options.cljs index 72ec61025..96e02ee03 100644 --- a/frontend/uxbox/ui/workspace/options.cljs +++ b/frontend/uxbox/ui/workspace/options.cljs @@ -8,14 +8,19 @@ [uxbox.ui.workspace.base :as wb])) (def +menus-map+ - {:builtin/icon [:menu/size-and-pos] - :builtin/icon-svg [:menu/size-and-pos]}) + {:builtin/icon [:menu/measures :menu/fill] + :builtin/icon-svg [:menu/measures]}) (def +menus-by-id+ - {:menu/size-and-pos + {:menu/measures {:name "Size & position" :icon i/infocard - :id (gensym "menu")}}) + :id :menu/measures} + + :menu/fill + {:name "Fill" + :icon i/fill + :id :menu/fill}}) (defn viewportcoord->clientcoord [pageid viewport-x viewport-y] @@ -31,51 +36,97 @@ (viewportcoord->clientcoord page vx vy))) (defmulti -render-menu - (fn [type shape] type)) + (fn [menu own shape] (:id menu))) -(defmethod -render-menu :size-and-position - [_ shape] - (html [:p "hello world"])) +(defmethod -render-menu :menu/fill + [menu own shape] + (html + [:div.element-set {:key (str (:id menu))} + [:div.element-set-title (:name menu)] + [:div.element-set-content + ;; SLIDEBAR FOR ROTATION AND OPACITY + [:span "Color"] + [:div.row-flex + [:input#width.input-text + {:placeholder "#" + :type "text" + :value (:color shape "") + :on-change (constantly nil)}]] + + ;; RECENT COLORS + [:span "Recent colors"] + [:div.row-flex + [:span.color-th] + [:span.color-th {:style {:background "#c5cb7f"}}] + [:span.color-th {:style {:background "#6cb533"}}] + [:span.color-th {:style {:background "#67c6b5"}}] + [:span.color-th {:style {:background "#a178e3"}}] + [:span.color-th.palette-th i/palette]] + + ;; SLIDEBAR FOR ROTATION AND OPACITY + [:span "Opacity"] + [:div.row-flex + [:input.slidebar {:type "range"}]]]])) + +(defmethod -render-menu :menu/measures + [menu own shape] + (html + [:div.element-set {:key (str (:id menu))} + [:div.element-set-title (:name menu)] + [:div.element-set-content + ;; SLIDEBAR FOR ROTATION AND OPACITY + [:span "Size"] + [:div.row-flex + [:input#width.input-text + {:placeholder "Width" + :type "number" + :value (:width shape) + :on-change (constantly nil)}] + [:div.lock-size i/lock] + [:input#width.input-text + {:placeholder "Height" + :type "number" + :value (:height shape) + :on-change (constantly nil)}]] + + [:span "Position"] + [:div.row-flex + [:input#width.input-text + {:placeholder "x" + :type "number" + :value (:x shape) + :on-change (constantly nil)}] + [:input#width.input-text + {:placeholder "y" + :type "number" + :value (:x shape) + :on-change (constantly nil)}]] + + [:span "Rotation"] + [:div.row-flex + [:input.slidebar {:type "range"}]]]])) (defn element-opts-render [own shape] (let [local (:rum/local own) shape (rum/react shape) [popup-x popup-y] (get-position shape) - zoom 1] + zoom 1 + menus (get +menus-map+ (:type shape)) + active-menu (:menu @local (first menus))] (html [:div#element-options.element-options {:style {:left (* popup-x zoom) :top (* popup-y zoom)}} [:ul.element-icons (for [menu-id (get +menus-map+ (:type shape)) - :let [menu (get +menus-by-id+ menu-id)]] - [:li#e-info - {:on-click (constantly nil) - :key (str "menu-" (:id menu)) - :class nil #_"selected"} + :let [menu (get +menus-by-id+ menu-id) + selected? (= active-menu menu-id)]] + [:li#e-info {:on-click #(swap! local assoc :menu menu-id) + :key (str "menu-" (:id menu)) + :class (when selected? "selected")} (:icon menu)])] - (for [menu-id (get +menus-map+ (:type shape)) - :let [menu (get +menus-by-id+ menu-id)]] - [:div#element-basics.element-set - {:key (str (:id menu)) - :class nil } - [:div.element-set-title (:name menu)] - [:div.element-set-content - - ;; SLIDEBAR FOR ROTATION AND OPACITY - [:span "Rotation"] - [:div.row-flex - [:input.slidebar {:type "range"}]] - - ;; RECENT COLORS - [:span "Recent colors"] - [:div.row-flex - [:span.color-th] - [:span.color-th {:style {:background "#c5cb7f"}}] - [:span.color-th {:style {:background "#6cb533"}}] - [:span.color-th {:style {:background "#67c6b5"}}] - [:span.color-th {:style {:background "#a178e3"}}] - [:span.color-th.palette-th i/palette]]]])]))) + (let [menu (get +menus-by-id+ active-menu)] + (-render-menu menu own shape))]))) (def ^:static element-opts (util/component