mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-12-23 10:11:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Design tweaks to frontend components

Browse source
This commit is contained in:
Keavon Chambers 2021-04-29 00:32:25 -07:00
parent 2500fc5053
commit 46eb6b46ec
5 changed files with 32 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

12
client/web/assets/svg/24x24-bounds-16x16-icon/flip-horizontal.svg
View file

@ -1,8 +1,8 @@
<svg viewBox="0 0 24 24">
<path d="M20,8.62v6.76l-4-2v-2.76L20,8.62 M21,7l-6,3v4l6,3V7L21,7z" />
<polygon points="10,14 4,17 4,7 10,10" />
<rect x="12" y="17" width="1" height="2" />
<rect x="12" y="13" width="1" height="2" />
<rect x="12" y="9" width="1" height="2" />
<rect x="12" y="5" width="1" height="2" />
<path d="M19.8,8.6v6.8l-4.7-2v-2.8L19.8,8.6 M21,7l-7,3v4l7,3V7L21,7z" />
<polygon points="9,14 3,17 3,7 9,10" />
<rect x="11" y="17" width="1" height="2" />
<rect x="11" y="13" width="1" height="2" />
<rect x="11" y="9" width="1" height="2" />
<rect x="11" y="5" width="1" height="2" />
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 326 B

After

Width:  |  Height:  |  Size: 326 B

Before After
Before After

12
client/web/assets/svg/24x24-bounds-16x16-icon/flip-vertical.svg
View file

@ -1,8 +1,8 @@
<svg viewBox="0 0 24 24">
<path d="M13.38,16l2,4H8.62l2-4H13.38 M14,15h-4l-3,6h10L14,15L14,15z" />
<polygon points="10,10 7,4 17,4 14,10" />
<rect x="5" y="12" width="2" height="1" />
<rect x="9" y="12" width="2" height="1" />
<rect x="13" y="12" width="2" height="1" />
<rect x="17" y="12" width="2" height="1" />
<path d="M13.4,15.2l2,4.7H8.6l2-4.7H13.4 M14,14h-4l-3,7h10L14,14L14,14z" />
<polygon points="10,9 7,3 17,3 14,9" />
<rect x="5" y="11" width="2" height="1" />
<rect x="9" y="11" width="2" height="1" />
<rect x="13" y="11" width="2" height="1" />
<rect x="17" y="11" width="2" height="1" />
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 328 B

After

Width:  |  Height:  |  Size: 329 B

Before After
Before After

21
client/web/src/components/widgets/NumberInput.vue
View file

@ -9,11 +9,11 @@
<style lang="scss">
.number-input {
width: 64px;
height: 22px;
height: 24px;
position: relative;
border: 1px solid #888;
border-radius: 2px;
background: #111;
overflow: hidden;
input {
width: calc(100% - 8px);
@ -42,15 +42,25 @@
top: 0;
outline: none;
border: none;
background: #333;
background: none;
padding: 9px 0;
&:hover {
background: #666;
&.right::before {
border-color: transparent transparent transparent #fff;
}
&.left::after {
border-color: transparent #fff transparent transparent;
}
}
&.right {
right: 0;
padding: 8px 6px 8px 7px;
padding-left: 7px;
padding-right: 6px;
&::before {
content: "";
@ -65,7 +75,8 @@
&.left {
left: 0;
padding: 8px 7px 8px 6px;
padding-left: 6px;
padding-right: 7px;
&::after {
content: "";

3
client/web/src/components/widgets/RadioPicker.vue
View file

@ -9,7 +9,7 @@
font-size: 0;
button {
fill: #fff;
fill: #ddd;
border-radius: 0;
margin: 0;
@ -31,6 +31,7 @@
&.active {
background: #3194d6;
fill: #fff;
}
& + .icon-button {

3
client/web/src/components/widgets/ShelfItem.vue
View file

@ -7,7 +7,8 @@
<style lang="scss">
.shelf-item {
padding: 4px;
border-radius: 4px;
border-radius: 2px;
font-size: 0;
&:hover {
background: #666;