tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add updateStatus on PropertyView in StyleManager

pull/187/head
Artur Arseniev 9 years ago
parent
050fcf5997
commit
b91a50c4a5
5 changed files with 481 additions and 343 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      dist/css/grapes.min.css
  2. 1
      src/style_manager/model/Property.js
  3. 24
      src/style_manager/view/PropertyView.js
  4. 445
      src/styles/scss/_gjs_style_manager.scss
  5. 352
      src/styles/scss/main.scss

2
dist/css/grapes.min.css
View File

File diff suppressed because one or more lines are too long

1
src/style_manager/model/Property.js
View File

@ -17,6 +17,7 @@ module.exports = Backbone.Model.extend({
detached: false,
visible: true,
functionName: '',
status: '',
properties: [],
layers: [],
list: [],

24
src/style_manager/view/PropertyView.js
View File

@ -41,6 +41,26 @@ module.exports = Backbone.View.extend({
this.listenTo(this.model, 'change:value', this.valueChanged);
this.listenTo(this.model, 'targetUpdated', this.targetUpdated);
this.listenTo(this.model, 'change:visible', this.updateVisibility);
this.listenTo(this.model, 'change:status', this.updateStatus);
},
updateStatus() {
const status = this.model.get('status');
const pfx = this.pfx;
const ppfx = this.ppfx;
const updatedCls = `${ppfx}active-color`;
const computedCls = `${ppfx}warn-color`;
const labelEl = this.$el.find(`> .${pfx}label`);
labelEl.removeClass(`${updatedCls} ${computedCls}`);
switch (status) {
case 'updated':
labelEl.addClass(updatedCls);
break;
case 'computed':
labelEl.addClass(computedCls);
break;
}
},
/**
@ -104,10 +124,6 @@ module.exports = Backbone.View.extend({
this.setValue(value, 1);
this.model.set('status', status);
if (this.model.get('property') == 'font-size') {
console.log('FS', targetValue, defaultValue, computedValue);
}
/*
get targetValue
if targetValue

445
src/styles/scss/_gjs_style_manager.scss
View File

@ -0,0 +1,445 @@
.#{$sm-prefix}close-btn {
display: block;
font-size: 23px;
position: absolute;
cursor: pointer;
right: 5px;
top: 0;
@include opacity(0.2);
&:hover {
@include opacity(0.7);
}
}
.#{$sm-prefix}header {
font-size: 11px;
font-weight: lighter;
padding: 10px;
}
.#{$sm-prefix}sector {
clear: both;
font-weight: lighter;
text-align: left;
##{$sm-prefix}caret {
padding-right: 5px;
font-size: 11px;
}
&.#{$sm-prefix}open {
@extend .#{$app-prefix}category-open;
}
.#{$sm-prefix}title {
@extend .#{$app-prefix}category-title;
}
.#{$sm-prefix}label {
margin: 5px 5px 2px 0;
}
/* ------------------Field-------------------- */
.#{$sm-prefix}field {
width: 100%;
position: relative;
input,
select {
background-color: transparent;
color: $mainLhlColor;
border: none;
width: 100%;
}
input {
box-sizing: border-box;
}
select {
position: relative;
z-index: 1;
@include appearance(none);
&::-ms-expand {
display: none;
}
}
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 $mainLhlColor;
}
input:focus,
select:focus {
outline: none;
}
.#{$sm-prefix}unit {
position: absolute;
right: 10px;
top: 3px;
font-size: 10px;
color: $mainLhlColor;
cursor: pointer;
}
.#{$clm-prefix}sel-arrow,
.#{$sm-prefix}int-arrows,
.#{$sm-prefix}sel-arrow {
height: 100%;
width: 9px;
position: absolute;
right: 0;
top: 0;
cursor: ns-resize;
}
.#{$sm-prefix}sel-arrow {
cursor: pointer;
}
.#{$clm-prefix}d-s-arrow,
.#{$sm-prefix}d-arrow,
.#{$sm-prefix}d-s-arrow,
.#{$sm-prefix}u-arrow {
position: absolute;
height: 0;
width: 0;
border-left: 3px solid transparent;
border-right: 4px solid transparent;
cursor: pointer;
}
.#{$sm-prefix}u-arrow {
border-bottom: 4px solid $mainLhlColor;
top: 4px;
}
.#{$clm-prefix}d-s-arrow,
.#{$sm-prefix}d-arrow,
.#{$sm-prefix}d-s-arrow {
border-top: 4px solid $mainLhlColor;
bottom: 4px;
}
.#{$clm-prefix}d-s-arrow,
.#{$sm-prefix}d-s-arrow {
bottom: 7px;
}
&.#{$sm-prefix}color,
&.#{$sm-prefix}input,
&.#{$sm-prefix}integer,
&.#{$sm-prefix}list,
&.#{$sm-prefix}select {
background-color: $mainDkColor;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 1px 1px 0 $mainLhColor;
color: $mainLhlColor;
border-radius: 2px;
box-sizing: border-box;
padding: 0 5px;
}
&.#{$sm-prefix}composite {
@extend .#{$app-prefix}color-main;
border-radius: 2px;
}
&.#{$sm-prefix}select {
padding: 0;
}
&.#{$sm-prefix}select select {
height: 20px;
}
&.#{$sm-prefix}select option {
padding: 3px 0;
}
&.#{$sm-prefix}composite {
background-color: rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.25);
}
&.#{$sm-prefix}list {
width: auto;
padding: 0;
overflow: hidden;
float: left;
input {
display: none;
}
label {
cursor: pointer;
padding: 5px;
display: block;
}
.#{$sm-prefix}radio:checked + label {
background-color: rgba(255, 255, 255, 0.2);
}
.#{$sm-prefix}icon {
background-repeat: no-repeat;
background-position: center;
text-shadow: none;
line-height: normal;
//padding: 5px 19px;
}
}
&.#{$sm-prefix}integer select {
width: auto;
padding: 0;
}
}
/* ------------------END Field-------------------- */
.#{$sm-prefix}list .#{$sm-prefix}el {
float: left;
border-left: 1px solid $mainDkColor;
&:first-child {
border: none;
}
&:hover {
background: $mainDkColor;
}
}
.#{$sm-prefix}properties {
font-size: 11px;
padding: 10px 5px;
}
/* ------------------Property-------------------- */
.#{$sm-prefix}property {
box-sizing: border-box;
float: left;
width: 50%;
margin-bottom: 5px;
padding: 0 5px;
&.#{$sm-prefix}composite,
&.#{$sm-prefix}file,
&.#{$sm-prefix}list,
&.#{$sm-prefix}stack {
width: 100%;
}
.#{$sm-prefix}btn {
background-color: lighten($mainDkColor, 13%);
border-radius: 2px;
box-shadow: 1px 1px 0 lighten($mainDkColor, 2%), 1px 1px 0 lighten($mainDkColor, 17%) inset;
padding: 5px;
position: relative;
text-align: center;
height: auto;
width: 100%;
cursor: pointer;
color: $fontColor;
box-sizing: border-box;
text-shadow: -1px -1px 0 $mainDkColor;
border: none;
@include opacity(0.85);
}
.#{$sm-prefix}btn-c {
box-sizing: border-box;
float: left;
width: 100%;
padding: 0 5px;
}
&.#{$sm-prefix}file ##{$sm-prefix}preview-box {
background-color: $lightBorder;
border-radius: 2px;
margin-top: 5px;
position: relative;
overflow: hidden;
&.#{$sm-prefix}show {
border: 1px solid darken($lightBorder, 1%);
padding: 3px 5px;
}
##{$sm-prefix}close {
@extend .#{$sm-prefix}close-btn;
display: block;
}
}
&.#{$sm-prefix}file .#{$sm-prefix}show ##{$sm-prefix}preview-file {
height: 50px;
}
&.#{$sm-prefix}file ##{$sm-prefix}preview-file {
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center center;
}
.#{$sm-prefix}layers {
margin-top: 5px;
min-height: 30px;
}
.#{$sm-prefix}layer {
background-color: rgba(255, 255, 255, 0.055);
border-radius: 2px;
box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2), 1px 1px 0 rgba(255, 255, 255, 0.055) inset;
margin: 2px;
padding: 7px;
position: relative;
cursor: pointer;
> ##{$sm-prefix}preview-box {
@extend .checker-bg;
height: 15px;
position: absolute;
right: 27px;
top: 6px;
width: 15px;
}
##{$sm-prefix}preview,
##{$sm-prefix}preview-box {
border-radius: 2px;
}
##{$sm-prefix}close-layer {
display: block;
font-size: 23px;
position: absolute;
cursor: pointer;
right: 5px;
top: 0;
@include opacity(0.5);
&:hover {
@include opacity(0.8);
}
}
> ##{$sm-prefix}preview-box ##{$sm-prefix}preview {
background-color: white;
height: 100%;
width: 100%;
background-size: cover !important;
}
&.#{$sm-prefix}active {
background-color: rgba(255, 255, 255, 0.12);
}
&.#{$sm-prefix}no-preview ##{$sm-prefix}preview-box {
display: none;
}
}
}
##{$sm-prefix}text-shadow ##{$sm-prefix}preview::after {
color: #000;
content: "T";
font-weight: 900;
line-height: 17px;
padding: 0 4px;
}
/* ------------------END Property-------------------- */
.#{$sm-prefix}stack .#{$sm-prefix}properties {
padding-top: 5px;
}
.#{$sm-prefix}stack ##{$sm-prefix}add {
@extend .#{$app-prefix}color-main;
background: none;
border: none;
cursor: pointer;
font-size: 22px;
line-height: 10px;
position: absolute;
right: 0;
top: -20px;
opacity: 0.75;
&:hover {
@include opacity(1);
}
}
.#{$sm-prefix}colorp-c {
@extend .#{$app-prefix}bg-main;
height: 100%;
width: 20px;
position: absolute;
right: 0;
top: 0;
box-sizing: border-box;
border-radius: 2px;
padding: 2px;
.#{$app-prefix}checker-bg {
height: 100%;
width: 100%;
border-radius: 1px;
}
}
.#{$sm-prefix}color-picker {
background-color: $fontColor;
cursor: pointer;
height: 16px;
width: 100%;
margin-top: -16px;
box-shadow: 0 0 1px $mainDkColor;
border-radius: 1px;
}
.#{$sm-prefix}btn-upload ##{$sm-prefix}upload {
left: 0;
top: 0;
position: absolute;
width: 100%;
opacity: 0;
cursor: pointer;
}
.#{$sm-prefix}btn-upload ##{$sm-prefix}label {
padding: 2px 0;
}
}
.#{$sm-prefix}layer > ##{$sm-prefix}move {
@include opacity(0.7);
cursor: move;
font-size: 12px;
float: left;
margin: 0 5px 0 0;
&:hover {
@include opacity(0.9);
}
}

352
src/styles/scss/main.scss
View File

@ -90,6 +90,18 @@ $fontV: 20;//random(1000)
//.#{$app-prefix}fonts {}
.#{$app-prefix}active {
&-color {
color: $colorBlue;
}
}
.#{$app-prefix}warn {
&-color {
color: $colorYell;
}
}
.#{$app-prefix}fonts::before {
display: block;
font: normal normal normal 14px font3336; // shortening font declaration
@ -740,345 +752,9 @@ $lightBorder: rgba(255, 255, 255, 0.05);
/********* Style Manager **********/
.#{$sm-prefix}close-btn{
display:block;
font-size: 23px;
position: absolute;
cursor: pointer;
right: 5px;
top: 0;
@include opacity(0.2);
@import "gjs_style_manager";
&:hover{ @include opacity(0.7); }
}
.#{$sm-prefix}header {
font-size: 11px;
font-weight: lighter;
padding: 10px;
}
.#{$sm-prefix}sector {
clear:both;
font-weight: lighter;
text-align:left;
##{$sm-prefix}caret{
padding-right: 5px;
font-size: 11px;
}
&.#{$sm-prefix}open {
@extend .#{$app-prefix}category-open;
}
.#{$sm-prefix}title {
@extend .#{$app-prefix}category-title;
}
.#{$sm-prefix}label {
margin: 5px 5px 2px 0;
}
/*------------------Field--------------------*/
.#{$sm-prefix}field {
width: 100%;
position:relative;
input, select {
background-color: transparent;
color: $mainLhlColor;
border:none;
width: 100%;
}
input {
box-sizing: border-box;
}
select {
position: relative;
z-index:1;
@include appearance(none);
&::-ms-expand { display: none;}
}
select:-moz-focusring{
color: transparent;
text-shadow: 0 0 0 $mainLhlColor;
}
select:focus, input:focus{
outline: none;
}
.#{$sm-prefix}unit {
position: absolute;
right: 10px; top: 3px;
font-size: 10px;
color: $mainLhlColor;
cursor:pointer;
}
.#{$sm-prefix}int-arrows, .#{$sm-prefix}sel-arrow, .#{$clm-prefix}sel-arrow{
height: 100%; width: 9px;
position: absolute;
right: 0; top: 0;
cursor: ns-resize;
}
.#{$sm-prefix}sel-arrow{ cursor:pointer }
.#{$sm-prefix}u-arrow, .#{$sm-prefix}d-arrow, .#{$sm-prefix}d-s-arrow, .#{$clm-prefix}d-s-arrow{
position: absolute;
height: 0; width: 0;
border-left: 3px solid transparent;
border-right: 4px solid transparent;
cursor:pointer;
}
.#{$sm-prefix}u-arrow {
border-bottom: 4px solid $mainLhlColor;
top: 4px;
}
.#{$sm-prefix}d-arrow, .#{$sm-prefix}d-s-arrow, .#{$clm-prefix}d-s-arrow{
border-top: 4px solid $mainLhlColor;
bottom: 4px;
}
.#{$sm-prefix}d-s-arrow, .#{$clm-prefix}d-s-arrow{ bottom: 7px; }
&.#{$sm-prefix}integer, &.#{$sm-prefix}select, &.#{$sm-prefix}list, &.#{$sm-prefix}color, &.#{$sm-prefix}input {
background-color: $mainDkColor;/*353535*/
border: 1px solid rgba(0, 0, 0, 0.1);/*292929*/
box-shadow: 1px 1px 0 $mainLhColor;/*575757*/
color: $mainLhlColor;
border-radius: 2px;
box-sizing: border-box;
padding: 0 5px;
}
&.#{$sm-prefix}composite{
@extend .#{$app-prefix}color-main;
border-radius: 2px;
}
&.#{$sm-prefix}select{ padding:0; }
&.#{$sm-prefix}select select{ height: 20px; }
&.#{$sm-prefix}select option { padding: 3px 0;}
&.#{$sm-prefix}composite{
background-color: rgba(0,0,0,0.1);
border: 1px solid rgba(0, 0, 0, 0.25);
}
&.#{$sm-prefix}list{
width:auto;
padding:0;
overflow: hidden;
float:left;
input{ display:none; }
label{ cursor:pointer; padding: 5px; display:block;}
.#{$sm-prefix}radio:checked + label{
background-color: rgba(255, 255, 255, 0.2);/*5b5b5b*/
}
.#{$sm-prefix}icon{
background-repeat: no-repeat;
background-position:center;
text-shadow: none;
line-height: normal;
//padding: 5px 19px;
}
}
&.#{$sm-prefix}integer select{ width:auto; padding: 0;}
}
/*------------------END Field--------------------*/
.#{$sm-prefix}list .#{$sm-prefix}el{
float:left;
border-left: 1px solid $mainDkColor;
&:first-child{border:none}
&:hover{background: $mainDkColor; }
}
.#{$sm-prefix}properties {
font-size: 11px;
padding: 10px 5px;
}
/*------------------Property--------------------*/
.#{$sm-prefix}property{
box-sizing: border-box;
float:left; width:50%;
margin-bottom: 5px;
padding: 0 5px;
&.#{$sm-prefix}file, &.#{$sm-prefix}composite, &.#{$sm-prefix}stack, &.#{$sm-prefix}list{
width:100%;
}
.#{$sm-prefix}btn{
background-color: lighten($mainDkColor, 13%);/*#5d5d5d*/
border-radius: 2px;
box-shadow: 1px 1px 0 lighten($mainDkColor, 2%), 1px 1px 0 lighten($mainDkColor, 17%) inset;
padding: 5px;
position: relative;
text-align: center;
height: auto; width: 100%;
cursor: pointer;
color: $fontColor;
box-sizing: border-box;
text-shadow: -1px -1px 0 $mainDkColor;
border: none;
@include opacity(0.85);
}
.#{$sm-prefix}btn-c {
box-sizing: border-box;
float: left;
width: 100%;
padding: 0 5px;
}
&.#{$sm-prefix}file ##{$sm-prefix}preview-box {
background-color: $lightBorder;
border-radius: 2px;
margin-top: 5px;
position:relative;
overflow: hidden;
&.#{$sm-prefix}show{
border: 1px solid darken($lightBorder,1%);
padding: 3px 5px;
}
##{$sm-prefix}close{
@extend .#{$sm-prefix}close-btn;
display:block;
}
}
&.#{$sm-prefix}file .#{$sm-prefix}show ##{$sm-prefix}preview-file{ height: 50px;}
&.#{$sm-prefix}file ##{$sm-prefix}preview-file {
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center center;
}
.#{$sm-prefix}layers {
margin-top: 5px;
min-height: 30px;
}
.#{$sm-prefix}layer {
background-color: rgba(255, 255, 255, 0.055);
border-radius: 2px;
box-shadow: 1px 1px 0 rgba(0,0,0,0.2), 1px 1px 0 rgba(255, 255, 255, 0.055) inset;
margin: 2px;
padding: 7px;
position: relative;
cursor: pointer;
> ##{$sm-prefix}preview-box {
@extend .checker-bg;
height: 15px;
position: absolute;
right: 27px;
top: 6px;
width: 15px;
}
##{$sm-prefix}preview-box, ##{$sm-prefix}preview{
border-radius:2px;
}
##{$sm-prefix}close-layer{
display:block;
font-size: 23px;
position: absolute;
cursor: pointer;
right: 5px;
top: 0;
@include opacity(0.5);
&:hover{
@include opacity(0.8);
}
}
> ##{$sm-prefix}preview-box ##{$sm-prefix}preview {
background-color: white;
height: 100%;
width: 100%;
background-size: cover !important;
}
&.#{$sm-prefix}active {
background-color: rgba(255, 255, 255, 0.12);
}
&.#{$sm-prefix}no-preview ##{$sm-prefix}preview-box{
display:none;
}
}
}
##{$sm-prefix}text-shadow ##{$sm-prefix}preview::after {
color: #000;
content: "T";
font-weight: 900;
line-height: 17px;
padding: 0 4px;
}
/*------------------END Property--------------------*/
.#{$sm-prefix}stack .#{$sm-prefix}properties{padding-top: 5px;}
.#{$sm-prefix}stack ##{$sm-prefix}add {
@extend .#{$app-prefix}color-main;
background: none;
border: none;
cursor: pointer;
font-size: 22px;
line-height: 10px;
position: absolute;
right: 0; top: -20px;
opacity: 0.75;
&:hover{ @include opacity(1); }
}
.#{$sm-prefix}colorp-c {
@extend .#{$app-prefix}bg-main;
height: 100%; width: 20px;
position: absolute;
right: 0; top: 0;
box-sizing: border-box;
border-radius: 2px;
padding: 2px;
.#{$app-prefix}checker-bg{
height: 100%; width: 100%;
border-radius: 1px;
}
}
.#{$sm-prefix}color-picker {
background-color: $fontColor;
cursor: pointer;
height: 16px;
width: 100%;
margin-top: -16px;
box-shadow: 0 0 1px $mainDkColor;
border-radius: 1px;
}
.#{$sm-prefix}btn-upload ##{$sm-prefix}upload {
left: 0; top: 0;
position: absolute;
width: 100%;
opacity: 0;
cursor: pointer;
}
.#{$sm-prefix}btn-upload ##{$sm-prefix}label { padding: 2px 0;}
}
.#{$sm-prefix}layer > ##{$sm-prefix}move {
@include opacity(0.7);
cursor: move;
font-size: 12px;
float: left;
margin: 0 5px 0 0;
&:hover{
@include opacity(0.9);
}
}
/********* END Style Manager **********/
/********* Blocks **********/
@import "gjs_blocks";

Write Preview
Loading…
Cancel
Save