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

Update trait view

pull/36/head
Artur Arseniev 10 years ago
parent
31e9234af4
commit
2870b23e9a
8 changed files with 135 additions and 134 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      src/commands/view/OpenTraitManager.js
  2. 3
      src/domain_abstract/view/DomainViews.js
  3. 4
      src/trait_manager/config/config.js
  4. 21
      src/trait_manager/main.js
  5. 46
      src/trait_manager/view/TraitView.js
  6. 40
      src/trait_manager/view/TraitsView.js
  7. 48
      styles/css/main.css
  8. 102
      styles/scss/main.scss

5
src/commands/view/OpenTraitManager.js
View File

@ -7,10 +7,7 @@ define(function() {
var pfx = config.stylePrefix; var pfx = config.stylePrefix;
var tm = editor.TraitManager; var tm = editor.TraitManager;
if(!this.obj){ if(!this.obj){
var tmView = new tm.TraitsView({ var tmView = tm.getTraitsViewer();
collection: [],
editor: editor.editor
});
this.obj = $('<div/>').get(0); this.obj = $('<div/>').get(0);
this.obj.appendChild(tmView.render().el); this.obj.appendChild(tmView.render().el);
var panels = editor.Panels; var panels = editor.Panels;

3
src/domain_abstract/view/DomainViews.js
View File

@ -28,7 +28,8 @@ function(Backbone) {
add: function(model, fragment){ add: function(model, fragment){
var frag = fragment || null; var frag = fragment || null;
var view = new this.itemView({ var view = new this.itemView({
model: model model: model,
config: this.config
}, this.config); }, this.config);
var rendered = view.render().el; var rendered = view.render().el;

4
src/trait_manager/config/config.js
View File

@ -1,9 +1,5 @@
define(function () { define(function () {
return { return {
stylePrefix: 'trt-', stylePrefix: 'trt-',
// Text to show in case no element selected
textNoElement: 'Select an element before using Style Manager',
}; };
}); });

21
src/trait_manager/main.js
View File

@ -5,7 +5,7 @@ define(function(require) {
defaults = require('./config/config'), defaults = require('./config/config'),
Traits = require('./model/Traits'), Traits = require('./model/Traits'),
TraitsView = require('./view/TraitsView'); TraitsView = require('./view/TraitsView');
var sectors, SectView; var TraitsViewer;
return { return {
@ -32,22 +32,21 @@ define(function(require) {
var ppfx = c.pStylePrefix; var ppfx = c.pStylePrefix;
if(ppfx) if(ppfx)
c.stylePrefix = ppfx + c.stylePrefix; c.stylePrefix = ppfx + c.stylePrefix;
TraitsViewer = new TraitsView({
sectors = new Traits(c.traits); collection: [],
TraitView = new TraitsView({ editor: c.em,
collection: sectors,
target: c.em,
config: c, config: c,
}); });
return this; return this;
}, },
/** /**
* Render sectors and properties *
* @return {HTMLElement} * Get Traits viewer
* */ * @private
render: function(){ */
return SectView.render().el; getTraitsViewer: function() {
return TraitsViewer;
}, },
}; };

46
src/trait_manager/view/TraitView.js
View File

@ -9,22 +9,34 @@ define(['backbone'], function (Backbone) {
initialize: function(o) { initialize: function(o) {
this.config = o.config || {}; this.config = o.config || {};
this.pfx = this.config.stylePrefix || ''; this.pfx = this.config.stylePrefix || '';
this.ppfx = this.config.pStylePrefix || '';
this.target = this.model.get('target');
this.className = this.pfx + 'trait';
this.labelClass = this.ppfx + 'label';
this.fieldClass = this.ppfx + 'field';
this.inputhClass = this.ppfx + 'input-holder';
this.listenTo(this.model, 'change:value', this.onValueChange);
}, },
/**
* Fires when the input is changed
* @private
*/
onChange: function() { onChange: function() {
//change model value this.model.set('value', this.getInputEl().value);
}, },
/** /**
* On change callback * On change callback
* @private * @private
*/ */
onValuesChange: function() { onValueChange: function() {
var m = this.model; var m = this.model;
var trg = m.target; var trg = this.target;
var attrs = trg.get('attributes'); var attrs = trg.get('attributes');
attrs[m.get('name')] = m.get('value'); attrs[m.get('name')] = m.get('value');
trg.set('attributes', attrs); trg.set('attributes', attrs);
console.log(trg);
}, },
/** /**
@ -32,17 +44,7 @@ define(['backbone'], function (Backbone) {
* @private * @private
*/ */
renderLabel: function() { renderLabel: function() {
/* this.$el.html('<div class="' + this.labelClass + '">' + this.getLabel() + '</div>');
this.$el.html(this.templateLabel({
pfx : this.pfx,
ppfx : this.ppfx,
icon : this.model.get('icon'),
info : this.model.get('info'),
label : this.model.get('name'),
}));
*/
console.log(this.model);
this.$el.html('<div class="label"><div>' + this.getLabel() + '</div></div>');
}, },
/** /**
@ -55,24 +57,34 @@ define(['backbone'], function (Backbone) {
return model.get('label') || model.get('name'); return model.get('label') || model.get('name');
}, },
/**
* Returns input element
* @return {HTMLElement}
* @private
*/
getInputEl: function() {
return this.$input.get(0);
},
/** /**
* Renders input * Renders input
* @private
* */ * */
renderField: function(){ renderField: function(){
if(!this.$input){ if(!this.$input){
this.$el.append('<div class="input-h"></div>'); this.$el.append('<div class="' + this.fieldClass +'"><div class="' + this.inputhClass +'"></div></div>');
this.$input = $('<input>', { this.$input = $('<input>', {
placeholder: this.model.get('defaults'), placeholder: this.model.get('defaults'),
type: 'text' type: 'text'
}); });
this.$el.find('.input-h').html(this.$input); this.$el.find('.' + this.inputhClass).html(this.$input);
} }
//this.setValue(this.componentValue, 0);
}, },
render : function() { render : function() {
this.renderLabel(); this.renderLabel();
this.renderField(); this.renderField();
this.el.className = this.className;
return this; return this;
}, },

40
src/trait_manager/view/TraitsView.js
View File

@ -12,9 +12,7 @@ define(['backbone', 'Abstract/view/DomainViews', './TraitView'],
this.em = o.editor; this.em = o.editor;
this.pfx = this.config.stylePrefix || ''; this.pfx = this.config.stylePrefix || '';
this.listenTo(this.em, 'change:selectedComponent', this.updatedCollection); this.listenTo(this.em, 'change:selectedComponent', this.updatedCollection);
/* this.updatedCollection();
if target not empty refresh
*/
}, },
/** /**
@ -23,38 +21,10 @@ define(['backbone', 'Abstract/view/DomainViews', './TraitView'],
*/ */
updatedCollection: function() { updatedCollection: function() {
var comp = this.em.get('selectedComponent'); var comp = this.em.get('selectedComponent');
this.collection = comp.get('traits'); if(comp){
this.render(); this.collection = comp.get('traits');
}, this.render();
}
onChange: function() {
//change model value
},
/**
* On change callback
* @private
*/
onValuesChange: function() {
var m = this.model;
var trg = m.target;
var attrs = trg.get('attributes');
attrs[m.get('name')] = m.get('value');
trg.set('attributes', attrs);
},
/**
* Render label
* @private
*/
renderLabel: function() {
this.$el.html(this.templateLabel({
pfx : this.pfx,
ppfx : this.ppfx,
icon : this.model.get('icon'),
info : this.model.get('info'),
label : this.model.get('name'),
}));
}, },
}); });

48
styles/css/main.css
View File

@ -1,4 +1,5 @@
@charset "UTF-8"; @charset "UTF-8";
/* stylelint-disable */
/*** /***
Spectrum Colorpicker v1.7.1 Spectrum Colorpicker v1.7.1
https://github.com/bgrins/spectrum https://github.com/bgrins/spectrum
@ -2558,15 +2559,15 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
content: ""; } content: ""; }
/* Dark theme */ /* Dark theme */
/* Light: #573454 Dark: #3b2639 -moz-linear-gradient(top, #fca99b 0%, #6e2842 100%)*/ /* Light: #573454 Dark: #3b2639 -moz-linear-gradient(top, #fca99b 0%, #6e2842 100%) */
/*l: #d8d7db*/ /* l: #d8d7db */
/* Light theme /* Light theme
$mainColor: #fff; $mainColor: #fff;
$fontColor: #9299a3; $fontColor: #9299a3;
$fontColorActive: #4f8ef7; $fontColorActive: #4f8ef7;
*/ */
/* darken($mainColor, 4%) - #383838*/ /* darken($mainColor, 4%) - #383838 */
/*#515151*/ /* #515151 */
@font-face { @font-face {
font-family: 'font3336'; font-family: 'font3336';
src: url("../fonts/main-fonts.eot?v=5"); src: url("../fonts/main-fonts.eot?v=5");
@ -2574,46 +2575,46 @@ $fontColorActive: #4f8ef7;
font-weight: normal; font-weight: normal;
font-style: normal; } font-style: normal; }
.gjs-fonts:before { .gjs-fonts::before {
display: block; display: block;
font: normal normal normal 14px font3336; font: normal normal normal 14px font3336;
font-size: inherit;
text-rendering: auto; text-rendering: auto;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
font-size: 5em; } font-size: 5em; }
.gjs-f-b1:before { .gjs-f-b1::before {
content: 'q'; } content: 'q'; }
.gjs-f-b2:before { .gjs-f-b2::before {
content: 'w'; } content: 'w'; }
.gjs-f-b3:before { .gjs-f-b3::before {
content: 'e'; } content: 'e'; }
.gjs-f-b37:before { .gjs-f-b37::before {
content: 'r'; } content: 'r'; }
.gjs-f-hero:before { .gjs-f-hero::before {
content: 't'; } content: 't'; }
.gjs-f-h1p:before { .gjs-f-h1p::before {
content: 'y'; } content: 'y'; }
.gjs-f-3ba:before { .gjs-f-3ba::before {
content: 'u'; } content: 'u'; }
.gjs-f-image:before { .gjs-f-image::before {
content: 'i'; } content: 'i'; }
.gjs-f-text:before { .gjs-f-text::before {
content: 'o'; } content: 'o'; }
.gjs-f-quo:before { .gjs-f-quo::before {
content: 'p'; } content: 'p'; }
.gjs-invis-invis, .gjs-clm-tags #gjs-clm-new, .gjs-no-app { .gjs-invis-invis, .gjs-clm-tags #gjs-clm-new,
.gjs-no-app {
background-color: transparent; background-color: transparent;
border: none; border: none;
color: inherit; } color: inherit; }
@ -2716,6 +2717,14 @@ div.gjs-select {
.gjs-select select:focus { .gjs-select select:focus {
outline: none; } outline: none; }
/************* TRAITS ****************/
.gjs-trt-trait {
display: flex;
justify-content: space-between;
padding: 10px;
font-size: 0.75em;
font-weight: lighter; }
/************* CANVAS ****************/ /************* CANVAS ****************/
.gjs-cv-canvas { .gjs-cv-canvas {
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, 0.15);
@ -2848,7 +2857,7 @@ ol.example li.placeholder:before {
outline: 1px solid #3b97e3; } outline: 1px solid #3b97e3; }
*.gjs-com-hover-delete, div.gjs-com-hover-delete { *.gjs-com-hover-delete, div.gjs-com-hover-delete {
outline: 2px solid #DD3636; outline: 2px solid #dd3636;
opacity: 0.5; opacity: 0.5;
filter: alpha(opacity=50); } filter: alpha(opacity=50); }
@ -2867,7 +2876,7 @@ ol.example li.placeholder:before {
display: none; } display: none; }
.gjs-com-badge-red { .gjs-com-badge-red {
background-color: #DD3636; } background-color: #dd3636; }
.gjs-badge-warning { .gjs-badge-warning {
background-color: #ffca6f; } background-color: #ffca6f; }
@ -3106,6 +3115,7 @@ ol.example li.placeholder:before {
background-color: transparent; background-color: transparent;
width: 100%; width: 100%;
position: relative; position: relative;
padding: 3px 0;
z-index: 1; } z-index: 1; }
.gjs-field select { .gjs-field select {
height: 20px; } height: 20px; }

102
styles/scss/main.scss
View File

@ -1,3 +1,4 @@
/* stylelint-disable */
@import "spectrum"; @import "spectrum";
@import "font-awesome"; @import "font-awesome";
@ -13,10 +14,11 @@ $com-prefix: $app-prefix + 'com-';
$sm-prefix: $app-prefix + 'sm-'; $sm-prefix: $app-prefix + 'sm-';
$cv-prefix: $app-prefix + 'cv-'; $cv-prefix: $app-prefix + 'cv-';
$clm-prefix: $app-prefix + 'clm-'; $clm-prefix: $app-prefix + 'clm-';
$trt-prefix: $app-prefix + 'trt-';
/* Dark theme */ /* Dark theme */
$mainColor: #444; /* Light: #573454 Dark: #3b2639 -moz-linear-gradient(top, #fca99b 0%, #6e2842 100%)*/ $mainColor: #444; /* Light: #573454 Dark: #3b2639 -moz-linear-gradient(top, #fca99b 0%, #6e2842 100%) */
$fontColor: #ddd; /*l: #d8d7db*/ $fontColor: #ddd; /* l: #d8d7db */
$fontColorActive: #f8f8f8; $fontColorActive: #f8f8f8;
/* Light theme /* Light theme
@ -25,14 +27,14 @@ $fontColor: #9299a3;
$fontColorActive: #4f8ef7; $fontColorActive: #4f8ef7;
*/ */
$mainDkColor: rgba(0, 0, 0, 0.3);/* darken($mainColor, 4%) - #383838*/ $mainDkColor: rgba(0, 0, 0, 0.3);/* darken($mainColor, 4%) - #383838 */
$mainDklColor: rgba(0, 0, 0, 0.1); $mainDklColor: rgba(0, 0, 0, 0.1);
$mainLhColor: rgba(255, 255, 255, 0.1);/*#515151*/ $mainLhColor: rgba(255, 255, 255, 0.1); /* #515151 */
$mainLhlColor: rgba(255, 255, 255, 0.7); $mainLhlColor: rgba(255, 255, 255, 0.7);
$fontColorDk: #777; $fontColorDk: #777;
$mainFont: Helvetica, sans-serif; $mainFont: Helvetica, sans-serif;
$colorBlue: #3b97e3; $colorBlue: #3b97e3;
$colorRed: #DD3636; $colorRed: #dd3636;
$colorYell: #ffca6f; $colorYell: #ffca6f;
$colorGreen: #62c462; $colorGreen: #62c462;
$tagBg: #804f7b; $tagBg: #804f7b;
@ -47,60 +49,60 @@ $fontV: 5;//random(1000)
@font-face { @font-face {
font-family: 'font3336'; font-family: 'font3336';
src: url('#{$fontPath}/#{$fontName}.eot?v=#{$fontV}'); src: url('#{$fontPath}/#{$fontName}.eot?v=#{$fontV}');
src: url('#{$fontPath}/#{$fontName}.woff?v=#{$fontV}') format('woff'), src:
//url('#{$fontPath}/#{$fontName}.woff2?v=#{$fontV}') format('woff2'), url('#{$fontPath}/#{$fontName}.woff?v=#{$fontV}') format('woff'),
url('#{$fontPath}/#{$fontName}.ttf?v=#{$fontV}') format('truetype'), //url('#{$fontPath}/#{$fontName}.woff2?v=#{$fontV}') format('woff2'),
url('#{$fontPath}/#{$fontName}.svg?v=#{$fontV}') format('svg'), url('#{$fontPath}/#{$fontName}.ttf?v=#{$fontV}') format('truetype'),
url('#{$fontPath}/#{$fontName}.eot?v=#{$fontV}') format('embedded-opentype'); url('#{$fontPath}/#{$fontName}.svg?v=#{$fontV}') format('svg'),
url('#{$fontPath}/#{$fontName}.eot?v=#{$fontV}') format('embedded-opentype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@mixin user-select($v) { @mixin user-select($v) {
-moz-user-select: $v; -moz-user-select: $v;
-khtml-user-select: $v; -khtml-user-select: $v;
-webkit-user-select:$v; -webkit-user-select: $v;
-ms-user-select: $v; -ms-user-select: $v;
-o-user-select: $v; -o-user-select: $v;
user-select: $v; user-select: $v;
} }
@mixin opacity($v) { @mixin opacity($v) {
opacity: $v; opacity: $v;
$opacity-ie: $v * 100; filter: alpha(opacity=$v * 100);
filter: alpha(opacity=$opacity-ie);
} }
@mixin appearance($v){ @mixin appearance($v) {
-webkit-appearance: $v; -webkit-appearance: $v;
-moz-appearance: $v; -moz-appearance: $v;
appearance: $v; appearance: $v;
} }
.#{$app-prefix}fonts{} //.#{$app-prefix}fonts {}
.#{$app-prefix}fonts:before{ .#{$app-prefix}fonts::before {
display: block; display: block;
font: normal normal normal 14px font3336; // shortening font declaration font: normal normal normal 14px font3336; // shortening font declaration
font-size: inherit; // can't have font-size inherit on line above, so need to override
text-rendering: auto; // optimizelegibility throws things off #1094 text-rendering: auto; // optimizelegibility throws things off #1094
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
font-size: 5em; font-size: 5em;
} }
.#{$app-prefix}f-b1:before { content: 'q'; } .#{$app-prefix}f-b1::before { content: 'q'; }
.#{$app-prefix}f-b2:before { content: 'w'; } .#{$app-prefix}f-b2::before { content: 'w'; }
.#{$app-prefix}f-b3:before { content: 'e'; } .#{$app-prefix}f-b3::before { content: 'e'; }
.#{$app-prefix}f-b37:before { content: 'r'; } .#{$app-prefix}f-b37::before { content: 'r'; }
.#{$app-prefix}f-hero:before { content: 't'; } .#{$app-prefix}f-hero::before { content: 't'; }
.#{$app-prefix}f-h1p:before { content: 'y'; } .#{$app-prefix}f-h1p::before { content: 'y'; }
.#{$app-prefix}f-3ba:before { content: 'u'; } .#{$app-prefix}f-3ba::before { content: 'u'; }
.#{$app-prefix}f-image:before { content: 'i'; } .#{$app-prefix}f-image::before { content: 'i'; }
.#{$app-prefix}f-text:before { content: 'o'; } .#{$app-prefix}f-text::before { content: 'o'; }
.#{$app-prefix}f-quo:before { content: 'p'; } .#{$app-prefix}f-quo::before { content: 'p'; }
.#{$app-prefix}invis-invis, .#{$app-prefix}no-app{ .#{$app-prefix}invis-invis,
.#{$app-prefix}no-app {
background-color: transparent; background-color: transparent;
border: none; border: none;
color:inherit; color:inherit;
@ -188,17 +190,20 @@ $fontV: 5;//random(1000)
color: $fontColor; color: $fontColor;
padding: 0.5em 1em; padding: 0.5em 1em;
} }
.#{$app-prefix}select{ .#{$app-prefix}select {
@extend .#{$app-prefix}input; @extend .#{$app-prefix}input;
} }
div.#{$app-prefix}select{
div.#{$app-prefix}select {
padding: 0; padding: 0;
} }
.#{$app-prefix}select select{
padding-right: 10px .#{$app-prefix}select select {
padding-right: 10px;
} }
.#{$app-prefix}select:-moz-focusring, .#{$app-prefix}select:-moz-focusring,
.#{$app-prefix}select select:-moz-focusring{ .#{$app-prefix}select select:-moz-focusring {
color: transparent; color: transparent;
text-shadow: 0 0 0 $mainLhlColor; text-shadow: 0 0 0 $mainLhlColor;
} }
@ -214,10 +219,20 @@ div.#{$app-prefix}select{
.#{$app-prefix}select option, .#{$app-prefix}select option,
.#{$clm-prefix}select option, .#{$clm-prefix}select option,
.#{$sm-prefix}select option, .#{$sm-prefix}select option,
.#{$sm-prefix}unit option{ .#{$sm-prefix}unit option {
@extend .#{$app-prefix}bg-main; @extend .#{$app-prefix}bg-main;
//background-color: $mainDkColor; //background-color: $mainDkColor;
} }
/************* TRAITS ****************/
.#{$trt-prefix}trait {
display: flex;
justify-content: space-between;
padding: 10px;
font-size: 0.75em;
font-weight: lighter;
}
/************* CANVAS ****************/ /************* CANVAS ****************/
.#{$cv-prefix}canvas { .#{$cv-prefix}canvas {
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, 0.15);
@ -638,6 +653,7 @@ $arrowColor: $mainLhlColor; /*b1b1b1*/
background-color: transparent; background-color: transparent;
width: 100%; width: 100%;
position: relative; position: relative;
padding: 3px 0;
z-index:1; z-index:1;
} }

Write Preview
Loading…
Cancel
Save