Skip to content

Commit 11470ab

Browse files
Titanium2099Titanium2099
committed
properties tab for SVG elements
1 parent a321cc1 commit 11470ab

6 files changed

Lines changed: 701 additions & 0 deletions

File tree

‎src/components/fixed-tools/fixed-tools.jsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import Input from '../forms/input.jsx';
1717
import InputGroup from '../input-group/input-group.jsx';
1818
import Label from '../forms/label.jsx';
1919
import LabeledIconButton from '../labeled-icon-button/labeled-icon-button.jsx';
20+
import TransformTools from '../../containers/transform-tools.jsx';
2021
import layout from '../../lib/layout-constants';
2122
import {hideLabel} from '../../lib/hide-label';
2223
import styles from './fixed-tools.css';
@@ -82,6 +83,11 @@ const messages = defineMessages({
8283
defaultMessage: 'More',
8384
description: 'Label for dropdown to access more action buttons',
8485
id: 'paint.paintEditor.more'
86+
},
87+
properties: {
88+
defaultMessage: 'Properties',
89+
description: 'Label for the button to open shape properties',
90+
id: 'paint.paintEditor.properties'
8591
}
8692
});
8793

@@ -177,6 +183,11 @@ const FixedToolsComponent = props => {
177183
title={props.intl.formatMessage(messages.ungroup)}
178184
onClick={props.onUngroup}
179185
/>
186+
<TransformTools
187+
onUpdateImage={props.onUpdateImage}
188+
hideLabel={hideLabel(props.intl.locale)}
189+
title={props.intl.formatMessage(messages.properties)}
190+
/>
180191
</InputGroup> : null
181192
}
182193

@@ -309,6 +320,7 @@ FixedToolsComponent.propTypes = {
309320
onSendToFront: PropTypes.func.isRequired,
310321
onUndo: PropTypes.func.isRequired,
311322
onUngroup: PropTypes.func.isRequired,
323+
onUpdateImage: PropTypes.func.isRequired,
312324
onUpdateName: PropTypes.func.isRequired,
313325
rtl: PropTypes.bool.isRequired,
314326
width: PropTypes.number

‎src/components/fixed-tools/icons/properties.svg‎

Lines changed: 13 additions & 0 deletions
Loading

‎src/containers/transform-tools.css‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
@import '../css/colors.css';
2+
@import '../css/units.css';
3+
4+
.popover-content {
5+
display: flex;
6+
flex-direction: column;
7+
padding: 0.75rem;
8+
background: $popover-background;
9+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
10+
max-height: 450px;
11+
overflow-y: auto;
12+
width: 250px;
13+
color: $text-primary;
14+
user-select: none;
15+
}
16+
17+
.section {
18+
padding-bottom: 0.75rem;
19+
margin-bottom: 0.75rem;
20+
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
21+
}
22+
23+
.section:last-child {
24+
border-bottom: none;
25+
margin-bottom: 0;
26+
padding-bottom: 0;
27+
}
28+
29+
.section-header {
30+
font-weight: bold;
31+
font-size: 0.65rem;
32+
color: $text-primary;
33+
opacity: 0.6;
34+
text-transform: uppercase;
35+
letter-spacing: 0.05em;
36+
margin-bottom: 0.5rem;
37+
}
38+
39+
.grid-2x2 {
40+
display: grid;
41+
grid-template-columns: 1fr 1fr;
42+
gap: 0.5rem;
43+
}
44+
45+
.grid-2 {
46+
display: grid;
47+
grid-template-columns: 1fr 1fr;
48+
gap: 0.5rem;
49+
}
50+
51+
.input-wrapper {
52+
position: relative;
53+
display: flex;
54+
align-items: center;
55+
width: 100%;
56+
}
57+
58+
.input-prefix {
59+
position: absolute;
60+
left: 8px;
61+
font-size: 0.65rem;
62+
font-weight: bold;
63+
color: $text-primary;
64+
opacity: 0.45;
65+
pointer-events: none;
66+
z-index: 5;
67+
text-transform: uppercase;
68+
}
69+
70+
.compact-input, .dash-compact-input {
71+
width: 100% !important;
72+
height: 1.85rem !important;
73+
padding-left: 1.75rem !important;
74+
padding-right: 0.25rem !important;
75+
font-size: 0.75rem !important;
76+
font-weight: 500 !important;
77+
border-radius: 4px !important;
78+
border: 1px solid $form-border !important;
79+
background-color: $input-background !important;
80+
color: $text-primary !important;
81+
text-align: left !important;
82+
box-sizing: border-box !important;
83+
}
84+
85+
.dash-compact-input {
86+
padding-left: 2.6rem !important;
87+
}
88+
89+
.compact-input:hover,
90+
.dash-compact-input:hover {
91+
border-color: $looks-secondary !important;
92+
}
93+
94+
.compact-input:focus,
95+
.dash-compact-input:focus {
96+
border-color: $looks-secondary !important;
97+
box-shadow: 0 0 0 2px $looks-transparent !important;
98+
}
99+
100+
.full-width-row {
101+
position: relative;
102+
display: flex;
103+
align-items: center;
104+
width: 100%;
105+
}
106+
107+
.select-label {
108+
position: absolute;
109+
left: 8px;
110+
font-size: 0.65rem;
111+
font-weight: bold;
112+
color: $text-primary;
113+
opacity: 0.45;
114+
pointer-events: none;
115+
z-index: 5;
116+
text-transform: uppercase;
117+
}
118+
119+
.select-input, .blend-select-input {
120+
width: 100% !important;
121+
height: 1.85rem !important;
122+
padding-left: 2.25rem !important;
123+
padding-right: 1.25rem !important;
124+
font-size: 0.75rem !important;
125+
font-weight: 500 !important;
126+
border-radius: 4px !important;
127+
border: 1px solid $form-border !important;
128+
background-color: $input-background !important;
129+
color: $text-primary !important;
130+
appearance: none !important;
131+
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23575e75%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-7.4H18.4c-5%200-10%202.4-13%206.5a18.6%2018.6%200%200%200-3.3%2015.4c1%205.7%203.4%2010.5%207.6%2014.2L132.8%20221c3.8%204%208.5%206%2013.6%206a19.2%2019.2%200%200%200%2013.7-5.8l123-123.5c4-3.8%206.3-8.6%207.2-14.2a18.4%2018.4%200%200%200-3.3-14.1z%22%2F%3E%3C%2Fsvg%3E') !important;
132+
background-repeat: no-repeat !important;
133+
background-position: right 8px center !important;
134+
background-size: 8px auto !important;
135+
cursor: pointer !important;
136+
outline: none !important;
137+
transition: 0.2s ease !important;
138+
box-sizing: border-box !important;
139+
}
140+
141+
.blend-select-input{
142+
padding-left: 3.0rem !important;
143+
}
144+
145+
.select-input:hover,
146+
.blend-select-input:hover {
147+
border-color: $looks-secondary !important;
148+
}
149+
150+
.select-input:focus,
151+
.blend-select-input:focus {
152+
border-color: $looks-secondary !important;
153+
box-shadow: 0 0 0 2px $looks-transparent !important;
154+
}
155+
156+
.mod-unselect {
157+
user-select: none;
158+
}

0 commit comments

Comments
 (0)