Browse Source

Update plus icon in stack view

up-style-manager
Artur Arseniev 4 years ago
parent
commit
9db14da26f
  1. 2
      dist/css/grapes.min.css
  2. 1
      src/editor/config/config.js
  3. 8
      src/style_manager/view/PropertyStackView.js
  4. 4
      src/styles/scss/_gjs_style_manager.scss

2
dist/css/grapes.min.css

File diff suppressed because one or more lines are too long

1
src/editor/config/config.js

@ -170,6 +170,7 @@ export default {
close: close:
'<svg viewBox="0 0 24 24"><path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path></svg>', '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path></svg>',
move: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M13,6V11H18V7.75L22.25,12L18,16.25V13H13V18H16.25L12,22.25L7.75,18H11V13H6V16.25L1.75,12L6,7.75V11H11V6H7.75L12,1.75L16.25,6H13Z"/></svg>', move: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M13,6V11H18V7.75L22.25,12L18,16.25V13H13V18H16.25L12,22.25L7.75,18H11V13H6V16.25L1.75,12L6,7.75V11H11V6H7.75L12,1.75L16.25,6H13Z"/></svg>',
plus: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" /></svg>',
}, },
// Dom element // Dom element

8
src/style_manager/view/PropertyStackView.js

@ -12,10 +12,14 @@ export default PropertyCompositeView.extend({
}, },
templateInput() { templateInput() {
const { pfx } = this; const { pfx, em } = this;
const icons = em?.getConfig('icons');
const iconPlus = icons?.plus || '+';
return ` return `
<div class="${pfx}field ${pfx}stack"> <div class="${pfx}field ${pfx}stack">
<button type="button" id="${pfx}add" data-add-layer>+</button> <button type="button" id="${pfx}add" data-add-layer>
${iconPlus}
</button>
<div data-layers-wrapper></div> <div data-layers-wrapper></div>
</div> </div>
`; `;

4
src/styles/scss/_gjs_style_manager.scss

@ -411,12 +411,12 @@
border: none; border: none;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
font-size: 22px;
line-height: 10px;
position: absolute; position: absolute;
right: 0; right: 0;
top: -17px; top: -17px;
opacity: 0.75; opacity: 0.75;
width: 18px;
height: 18px;
&:hover { &:hover {
@include opacity(1); @include opacity(1);

Loading…
Cancel
Save