Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-20 19:51:23 -05:00
Code Issues Activity

add grid settings lightbox

Browse source
This commit is contained in:
elhombretecla 2016-03-02 17:11:18 +01:00
parent dce8beab32
commit b6e3a70267
6 changed files with 58 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/styles/framework.scss
View file

@ -423,7 +423,7 @@ input[type="checkbox"]:focus {
margin-right: 10px;
background-color: $color-white;
border: 1px solid $color-gray-lighter;
box-shadow: inset 0 0 0 0 $color-gray-light ;
box-shadow: inset 0 0 0 0 $main-ui-color ;
box-sizing: border-box;
}

19
resources/styles/partials/lightbox.scss
View file

@ -28,6 +28,17 @@
width: 500px;
@include animation(.1s,1s,fadeInDown);
.lightbox-label {
display: flex;
font-weight: bold;
margin: $medium 0;
width: 100%;
}
form {
width: 100%;
}
.input-text {
margin: 1rem 0;
width: 100%;
@ -80,7 +91,8 @@
}
.btn-primary {
margin-top: 10px;
margin: $big auto 0 auto;
min-width: 120px;
}
}
@ -182,3 +194,8 @@
}
}
// Project Settings
.settings {
}

7
src/uxbox/ui/users.cljs
View file

@ -8,6 +8,7 @@
[uxbox.data.auth :as da]
[uxbox.ui.icons :as i]
[uxbox.ui.navigation :as nav]
[uxbox.ui.lightbox :as lightbox]
[uxbox.ui.mixins :as mx]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@ -16,6 +17,7 @@
(defn menu-render
[own open?]
(let [open-settings-dialog #(lightbox/open! :settings)]
(html
[:ul.dropdown {:class (when-not open?
"hide")}
@ -24,7 +26,7 @@
[:span "Page settings"]]
[:li
i/grid
[:span "Grid settings"]]
[:span {:on-click open-settings-dialog} "Grid settings"]]
[:li
i/eye
[:span "Preview"]]
@ -33,7 +35,7 @@
[:span "Your account"]]
[:li {:on-click #(rs/emit! (da/logout))}
i/exit
[:span "Exit"]]]))
[:span "Exit"]]])))
(def user-menu
(mx/component
@ -129,4 +131,3 @@
;; [:div.login-body
;; [:a i/logo]
;; (recover-password-form)]])

6
src/uxbox/ui/workspace/clipboard.cljs
View file

@ -9,6 +9,7 @@
(:require [sablono.core :as html :refer-macros [html]]
[uxbox.ui.icons :as i]
[uxbox.ui.mixins :as mx]
[uxbox.util.dom :as dom]
[uxbox.ui.lightbox :as lightbox]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@ -23,7 +24,10 @@
(for [i (range 5)]
[:div.clipboard-item {:key i}
[:span.clipboard-icon i/box]
[:span (str "shape " i)]])]]))
[:span (str "shape " i)]])]
[:a.close {:href "#"
:on-click #(do (dom/prevent-default %)
(lightbox/close!))} i/close]]))
(def clipboard-dialog
(mx/component

6
src/uxbox/ui/workspace/header.cljs
View file

@ -60,8 +60,7 @@
flags (rum/react wb/flags-l)
toggle #(rs/emit! (dw/toggle-flag %))
;; TODO: temporary
open-clipboard-dialog #(lightbox/open! :clipboard)
open-settings-dialog #(lightbox/open! :settings)]
open-clipboard-dialog #(lightbox/open! :clipboard)]
(html
[:header#workspace-bar.workspace-bar
[:div.main-icon
@ -103,8 +102,7 @@
:on-click open-clipboard-dialog}
i/undo]
[:li.tooltip.tooltip-bottom
{:alt "Redo (Ctrl + Shift + Z)"
:on-click open-settings-dialog}
{:alt "Redo (Ctrl + Shift + Z)"}
i/redo]]
[:ul.options-btn
;; TODO: refactor

32
src/uxbox/ui/workspace/settings.cljs
View file

@ -9,6 +9,7 @@
(:require [sablono.core :as html :refer-macros [html]]
[uxbox.ui.icons :as i]
[uxbox.ui.mixins :as mx]
[uxbox.util.dom :as dom]
[uxbox.ui.lightbox :as lightbox]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@ -19,10 +20,33 @@
[own]
(html
[:div.lightbox-body.settings
[:div.settings-list
(for [i (range 5)]
[:div {:key i}
[:span (str "shape " i)]])]]))
[:h3 "Grid settings"]
[:form {:on-submit (constantly nil)}
[:span.lightbox-label "Grid size"]
[:div.project-size
[:input#grid-x.input-text
{:placeholder "X px"
:type "number"
:min 0 ;;TODO check this value
:max 666666 ;;TODO check this value
}]
[:input#grid-y.input-text
{:placeholder "Y px"
:type "number"
:min 0 ;;TODO check this value
:max 666666 ;;TODO check this value
}]]
[:span.lightbox-label "Grid color"]
[:span "COLOR PICKER HERE!"]
[:span.lightbox-label "Grid magnet option"]
[:div.input-checkbox.check-primary
[:input {:type "checkbox" :id "magnet" :value "Yes"}]
[:label {:for "magnet"} "Activate magnet"]]
[:input.btn-primary {:type "submit" :value "Save"}]
]
[:a.close {:href "#"
:on-click #(do (dom/prevent-default %)
(lightbox/close!))} i/close]]))
(def settings-dialog
(mx/component