mirror of
https://github.com/penpot/penpot.git
synced 2025-04-13 15:31:26 -05:00
Add interactions base elements.
This commit is contained in:
elhombretecla
Andrey Antukh
parent
f80ac704a7
commit
9c9b0ca908
6 changed files with 274 additions and 6 deletions
54
resources/public/images/svg/play.svg
Normal file
54
resources/public/images/svg/play.svg
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="500"
|
||||
height="500"
|
||||
viewBox="0 0 500 500.00001"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="0.91 r13725"
|
||||
sodipodi:docname="play.svg">
|
||||
<metadata
|
||||
id="metadata10">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs8" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1056"
|
||||
id="namedview6"
|
||||
showgrid="false"
|
||||
inkscape:zoom="0.472"
|
||||
inkscape:cx="250"
|
||||
inkscape:cy="250"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="24"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg2" />
|
||||
<path
|
||||
d="m 121.67073,70.753329 0,359.389241 c 0,12.19281 8.74009,22.00921 23.46146,21.00294 14.72137,-1.00628 22.01162,-5.33889 27.30623,-10.32034 71.43412,-52.70054 141.82816,-106.26647 212.71245,-159.42587 7.89079,-6.55446 17.48742,-12.31195 23.29965,-20.13673 5.24872,-9.68035 -1.12541,-20.67448 -11.37732,-26.63162 C 320.53204,173.95026 244.16396,113.11502 166.1641,53.583899 c -4.02348,-2.658979 -9.04841,-4.760077 -22.40044,-4.800328 -13.35284,-0.04025 -22.09293,9.776148 -22.09293,21.968958 z m 44.01841,39.302621 c 32.61935,25.56497 124.45828,97.72763 175.71703,139.98708 3.07839,5.93701 -5.40168,9.45575 -9.37686,13.25704 -54.54483,42.67403 -111.22136,83.65914 -166.34097,125.8727 z"
|
||||
id="path4"
|
||||
inkscape:connector-curvature="0" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -44,6 +44,10 @@ $br-big: 8px;
|
|||
width: 50%;
|
||||
}
|
||||
|
||||
.column-half {
|
||||
margin-right: $small;
|
||||
}
|
||||
|
||||
// Display
|
||||
.hidden {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -75,6 +75,107 @@
|
|||
|
||||
}
|
||||
|
||||
.element-list {
|
||||
margin-bottom: $small;
|
||||
|
||||
li {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $soft-ui-border;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: $small;
|
||||
width: 100%;
|
||||
|
||||
.list-icon {
|
||||
|
||||
svg {
|
||||
fill: $medium-ui-icons;
|
||||
height: 15px;
|
||||
margin-right: $x-small;
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
color: $medium-ui-text;
|
||||
font-size: $fs14;
|
||||
max-width: 75%;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.list-actions {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
margin-left: auto;
|
||||
|
||||
a {
|
||||
|
||||
svg {
|
||||
fill: $soft-ui-icons;
|
||||
height: 15px;
|
||||
margin-left: $x-small;
|
||||
width: 15px;
|
||||
|
||||
&:hover {
|
||||
fill: $intense-ui-icons;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
.list-icon {
|
||||
|
||||
svg {
|
||||
fill: $main-ui-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
color: $main-ui-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.selected {
|
||||
|
||||
.list-icon {
|
||||
|
||||
svg {
|
||||
fill: $main-ui-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
color: $main-ui-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
.list-actions {
|
||||
display: flex;
|
||||
@include animation(0s,.3s,fadeIn);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.element-set-content {
|
||||
|
|
@ -137,6 +238,16 @@
|
|||
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
color: $color-danger;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.color-th {
|
||||
|
|
@ -195,6 +306,7 @@
|
|||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.element-color-picker {
|
||||
|
|
|
|||
6
resources/styles/partials/sidebar-interactions.scss
Normal file
6
resources/styles/partials/sidebar-interactions.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
// 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) 2015-2016 Andrey Antukh <niwi@niwi.nz>
|
||||
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
87
src/uxbox/main/ui/workspace/sidebar/interactions.cljs
Normal file
87
src/uxbox/main/ui/workspace/sidebar/interactions.cljs
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
;; 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) 2015-2016 Andrey Antukh <niwi@niwi.nz>
|
||||
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(ns uxbox.main.ui.workspace.sidebar.options.interactions
|
||||
(:require [sablono.core :as html :refer-macros [html]]
|
||||
[rum.core :as rum]
|
||||
[lentes.core :as l]
|
||||
[uxbox.locales :refer (tr)]
|
||||
[uxbox.router :as r]
|
||||
[uxbox.rstore :as rs]
|
||||
[uxbox.state :as st]
|
||||
[uxbox.library :as library]
|
||||
[uxbox.data.shapes :as uds]
|
||||
[uxbox.data.lightbox :as udl]
|
||||
[uxbox.ui.icons :as i]
|
||||
[uxbox.ui.mixins :as mx]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.data :refer (parse-int parse-float read-string)]))
|
||||
|
||||
(defn- interactions-menu-render
|
||||
[own menu shape]
|
||||
(html
|
||||
[:div.element-set {:key (str (:id menu))}
|
||||
[:div.element-set-title (:name menu)]
|
||||
|
||||
[:div.element-set-content
|
||||
|
||||
[:span "Trigger"]
|
||||
[:div.row-flex
|
||||
[:select#style.input-select {:placeholder "Choose a trigger"
|
||||
:value ""}
|
||||
[:option {:value ":click"} "Click"]
|
||||
[:option {:value ":doubleclick"} "Double-click"]
|
||||
[:option {:value ":rightclick"} "Right-click"]
|
||||
[:option {:value ":hover"} "Hover"]
|
||||
[:option {:value ":mousein"} "Mouse in"]]]
|
||||
|
||||
[:span "Action"]
|
||||
[:div.row-flex
|
||||
[:select#style.input-select {:placeholder "Choose an action"
|
||||
:value ""}
|
||||
[:option {:value ":show"} "Show"]
|
||||
[:option {:value ":hide"} "Hide"]
|
||||
[:option {:value ":toggle"} "Toggle"]
|
||||
[:option {:value ":moveto"} "Move to"]
|
||||
[:option {:value ":moveby"} "Move by"]]]
|
||||
|
||||
[:span "Element"]
|
||||
[:div.row-flex
|
||||
[:select#style.input-select {:placeholder "Choose an element"
|
||||
:value ""}
|
||||
[:option {:value ":1"} "Box 1"]
|
||||
[:option {:value ":2"} "Circle 1"]
|
||||
[:option {:value ":3"} "Circle 2"]
|
||||
[:option {:value ":4"} "Icon 1"]
|
||||
[:option {:value ":5"} "Icon 2"]]]
|
||||
|
||||
[:span "Page"]
|
||||
[:div.row-flex
|
||||
[:select#style.input-select {:placeholder "Choose a page"
|
||||
:value ""}
|
||||
[:option {:value ":1"} "page 1"]
|
||||
[:option {:value ":2"} "page 2"]
|
||||
[:option {:value ":3"} "page 3"]
|
||||
[:option {:value ":4"} "page 4"]
|
||||
[:option {:value ":5"} "page 5"]]]
|
||||
|
||||
[:span "Key"]
|
||||
[:div.row-flex
|
||||
[:select#style.input-select {:placeholder "Choose a key"
|
||||
:value ""}
|
||||
[:option {:value ":1"} "key 1"]
|
||||
[:option {:value ":2"} "key 2"]
|
||||
[:option {:value ":3"} "key 3"]
|
||||
[:option {:value ":4"} "key 4"]
|
||||
[:option {:value ":5"} "key 5"]]]]
|
||||
]))
|
||||
|
||||
(def interactions-menu
|
||||
(mx/component
|
||||
{:render interactions-menu-render
|
||||
:name "interactions-menu"
|
||||
:mixed [mx/static]}))
|
||||
|
|
@ -28,6 +28,7 @@
|
|||
[uxbox.main.ui.workspace.sidebar.options.fill :as options-fill]
|
||||
[uxbox.main.ui.workspace.sidebar.options.text :as options-text]
|
||||
[uxbox.main.ui.workspace.sidebar.options.stroke :as options-stroke]
|
||||
[uxbox.main.ui.workspace.sidebar.options.interactions :as options-interactions]
|
||||
[uxbox.common.geom :as geom]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.data :refer (parse-int parse-float read-string)]))
|
||||
|
|
@ -35,11 +36,11 @@
|
|||
;; --- Constants
|
||||
|
||||
(def ^:private +menus-map+
|
||||
{:icon [:menu/icon-measures :menu/fill :menu/stroke]
|
||||
:rect [:menu/rect-measures :menu/fill :menu/stroke]
|
||||
:line [:menu/line-measures :menu/stroke]
|
||||
:circle [:menu/circle-measures :menu/fill :menu/stroke]
|
||||
:text [:menu/fill :menu/text]
|
||||
{:icon [:menu/icon-measures :menu/fill :menu/stroke :menu/interactions]
|
||||
:rect [:menu/rect-measures :menu/fill :menu/stroke :menu/interactions]
|
||||
:line [:menu/line-measures :menu/stroke :menu/interactions]
|
||||
:circle [:menu/circle-measures :menu/fill :menu/stroke :menu/interactions]
|
||||
:text [:menu/fill :menu/text :menu/interactions]
|
||||
:group []})
|
||||
|
||||
(def ^:private +menus+
|
||||
|
|
@ -70,7 +71,11 @@
|
|||
{:name "Text"
|
||||
:id :menu/text
|
||||
:icon i/text
|
||||
:comp options-text/text-menu}])
|
||||
:comp options-text/text-menu}
|
||||
{:name "Interactions"
|
||||
:id :menu/interactions
|
||||
:icon i/action
|
||||
:comp options-interactions/interactions-menu}])
|
||||
|
||||
(def ^:private +menus-by-id+
|
||||
(into {} (map #(vector (:id %) %)) +menus+))
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue