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

Update Class Manager feature

pull/11/head^2
Artur Arseniev 10 years ago
parent
4964d24902
commit
e482185630
15 changed files with 466 additions and 194 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. 10
      src/class_manager/config/config.js
  2. 43
      src/class_manager/main.js
  3. 2
      src/class_manager/model/ClassTag.js
  4. 11
      src/class_manager/model/ClassTags.js
  5. 11
      src/class_manager/model/Classes.js
  6. 12
      src/class_manager/template/classTags.html
  7. 93
      src/class_manager/view/ClassItemsView.js
  8. 22
      src/class_manager/view/ClassTagView.js
  9. 167
      src/class_manager/view/ClassTagsView.js
  10. 47
      src/commands/view/OpenStyleManager.js
  11. 6
      src/editor/model/Editor.js
  12. 30
      src/style_manager/main.js
  13. 148
      styles/css/main.css
  14. 2
      styles/css/main.css.map
  15. 56
      styles/scss/main.scss

10
src/class_manager/config/config.js
View File

@ -1,7 +1,17 @@
define(function () { define(function () {
return { return {
// Style prefix
stylePrefix : 'clm-',
// Default classes // Default classes
classes : [], classes : [],
// Label for classes
label: 'Classes',
// Label for states
statesLabel: 'States',
}; };
}); });

43
src/class_manager/main.js
View File

@ -8,16 +8,22 @@ define(function(require) {
{ {
var c = config || {}, var c = config || {},
def = require('./config/config'), def = require('./config/config'),
Classes = require('./model/Classes'); ClassTags = require('./model/ClassTags'),
ClassTagsView = require('./view/ClassTagsView');
for (var name in def) { for (var name in def) {
if (!(name in c)) if (!(name in c))
c[name] = def[name]; c[name] = def[name];
} }
this.classes = new Classes(c.classes); this.classes = new ClassTags(c.classes);
this.Classes = Classes; var obj = {
collection: this.classes,
config: c,
};
this.tagsView = new ClassTagsView(obj);
//this.ClassTagsView = new ClassTagsView(obj);
}; };
ClassManager.prototype = { ClassManager.prototype = {
@ -40,6 +46,37 @@ define(function(require) {
var res = this.classes.where({name: id}); var res = this.classes.where({name: id});
return res.length ? res[0] : null; return res.length ? res[0] : null;
}, },
/**
* Add new class to collection only if it's not already exists
* @param {String} name Class name
* @return {Object} Model class
* */
addClass: function(name){
var label = name;
var fname = this.escapeName(name);
var c = this.getClass(fname);
if(!c)
return this.classes.add({name: fname, label: label});
return c;
},
/**
* Escape string
* @param {String} name
* @return {String}
*/
escapeName: function(name) {
return name.toLowerCase().replace(/([^a-z0-9\w]+)/gi, '-');
},
/**
* Renders a collection of class tags. Useful for components classes
* @return {Object} Rendered view
*/
renderTags: function(){
return this.tagsView.render().el;
},
}; };
return ClassManager; return ClassManager;

2
src/class_manager/model/Class.js → src/class_manager/model/ClassTag.js
View File

@ -1,7 +1,7 @@
define(['backbone'], define(['backbone'],
function (Backbone) { function (Backbone) {
/** /**
* @class Class * @class ClassTag
* */ * */
return Backbone.Model.extend({ return Backbone.Model.extend({

11
src/class_manager/model/ClassTags.js
View File

@ -0,0 +1,11 @@
define(['backbone','./ClassTag'],
function (Backbone, ClassTag) {
/**
* @class ClassTags
* */
return Backbone.Collection.extend({
model: ClassTag,
});
});

11
src/class_manager/model/Classes.js
View File

@ -1,11 +0,0 @@
define(['backbone','./Class'],
function (Backbone, Class) {
/**
* @class Classes
* */
return Backbone.Collection.extend({
model: Class,
});
});

12
src/class_manager/template/classTags.html
View File

@ -0,0 +1,12 @@
<div id="<%= pfx %>up">
<div id="<%= pfx %>label"><%= label %></div>
<div id="<%= pfx %>status-c">
<%= statesLabel %>
<span id="<%= pfx %>input-c"></span>
</div>
</div>
<div id="<%= pfx %>tags-field">
<div id="<%= pfx %>tags-c"></div>
<input id="<%= pfx %>new" />
<span id="<%= pfx %>add-tag" class="fa fa-plus"></span>
</div>

93
src/class_manager/view/ClassItemsView.js
View File

@ -1,93 +0,0 @@
define(['backbone', 'text!./../template/classItems.html'],
function (Backbone, itemsTemplate) {
/**
* @class ClassItemsView
* */
return Backbone.View.extend({
template: _.template(itemsTemplate),
events:{
'click .add': 'startNewClass',
'keyup .input' : 'onInputKeyUp'
},
initialize: function(o) {
this.events['click #'+this.pfx+'add'] = 'addLayer';
if(!this.layers){
this.layers = new Layers();
this.model.set('layers', this.layers);
this.$layers = new LayersView({
collection : this.layers,
stackModel : this.model,
preview : this.model.get('preview'),
config : o.config
});
}
this.targetCl = this.target.classes;
this.listenTo( this.targetCl, 'add', this.addClass);
this.listenTo( this.targetCl, 'reset', this.renderClasses);
this.delegateEvents();
},
onInputKeyUp: function(e){
if (e.keyCode === 13) {
this.addItem();
}else{
this.searchItem();
}
},
/**
* Add new object to collection
* @param Object Model
* @param Object Fragment collection
*
* @return Object Object created
* */
addToClasses: function(model, fragmentEl){
var fragment = fragmentEl || null;
var viewObject = ClassTagView;
var view = new viewObject({
model: model,
config: this.config,
});
var rendered = view.render().el;
if(fragment)
fragment.appendChild( rendered );
else
this.$classes.append(rendered);
return rendered;
},
renderClasses: function() {
var fragment = document.createDocumentFragment();
this.$classes.empty();
this.collection.each(function(model){
this.addToClasses(model, fragment);
},this);
this.$classes.append(fragment);
return this;
},
/** @inheritdoc */
render : function(){
this.renderLabel();
this.renderField();
this.renderLayers();
this.$el.attr('class', this.className);
return this;
},
});
});

22
src/class_manager/view/ClassTagView.js
View File

@ -0,0 +1,22 @@
define(['backbone'],
function (Backbone) {
/**
* @class ClassTagView
* */
return Backbone.View.extend({
initialize: function(o) {
this.config = o.config || {};
this.pfx = this.config.stylePrefix;
this.className = this.pfx + 'tag';
},
/** @inheritdoc */
render : function(){
this.$el.html(this.model.get('name')+': ' + this.model.get('label'));
this.$el.attr('class', this.className);
return this;
},
});
});

167
src/class_manager/view/ClassTagsView.js
View File

@ -0,0 +1,167 @@
define(['backbone', 'text!./../template/classTags.html', './ClassTagView'],
function (Backbone, tagsTemplate, ClassTagView) {
/**
* @class ClassTagsView
* */
return Backbone.View.extend({
template: _.template(tagsTemplate),
events:{
'click .add': 'startNewClass',
},
initialize: function(o) {
this.config = o.config || {};
this.pfx = this.config.stylePrefix;
this.className = this.pfx + 'tags';
this.addBtnId = this.pfx + 'add-tag';
this.newInputId = this.pfx + 'new';
this.events['click #' + this.addBtnId] = 'startNewTag';
this.events['blur #'+this.newInputId] = 'endNewTag';
this.events['keyup #'+this.newInputId] = 'onInputKeyUp';
this.target = this.config.target;
this.listenTo( this.target ,'change:selectedComponent',this.componentChanged);
this.listenTo( this.collection, 'add', this.addNew);
this.listenTo( this.collection, 'reset', this.renderClasses);
this.delegateEvents();
},
/**
* Add new model
* @param {Object} model
*/
addNew: function(model){
this.addToClasses(model);
},
/**
* Start new tag event
* @param {Object} e
*
*/
startNewTag: function(e) {
this.$addBtn.hide();
this.$input.show().focus();
},
/**
* Start new tag event
* @param {Object} e
*
*/
endNewTag: function(e) {
this.$addBtn.show();
this.$input.hide().val('');
},
/**
* Add new class tag
* @param {Object} model
*
*/
addTag: function(model){
},
/**
* Triggered when component is changed
* @param {Object} e
*/
componentChanged: function(e){
console.log('chnaged');
},
/**
* Checks what to do on keyup event
* @param {Object} e
*/
onInputKeyUp: function(e) {
if (e.keyCode === 13)
this.addNewTag(this.$input.val());
else if(e.keyCode === 27)
this.endNewTag();
else{
//this.searchItem();
console.log('search');
}
},
/**
* Add new tag to collection, if possible, and to the component
* @param {Object} e
*/
addNewTag: function(name){
if(!name)
return;
if(this.target){
var cm = this.target.get('ClassManager');
var model = cm.addClass(name);
console.log(model);
}
this.endNewTag();
},
/**
* Add new object to collection
* @param {Object} model Model
* @param {Object} fragmentEl Fragment collection
*
* @return {Object} Object created
* */
addToClasses: function(model, fragmentEl) {
var fragment = fragmentEl || null;
var view = new ClassTagView({
model: model,
config: this.config,
});
var rendered = view.render().el;
if(fragment)
fragment.appendChild( rendered );
else
this.$classes.append(rendered);
return rendered;
},
/**
* Render the collection of classes
* @return {this}
*/
renderClasses: function() {
var fragment = document.createDocumentFragment();
this.collection.each(function(model){
this.addToClasses(model, fragment);
},this);
this.$classes.empty().append(fragment);
return this;
},
/** @inheritdoc */
render : function(){
this.$el.html( this.template({
label: this.config.label,
statesLabel: this.config.statesLabel,
pfx: this.pfx,
}));
this.$input = this.$el.find('input#' + this.newInputId);
this.$addBtn = this.$el.find('#' + this.addBtnId);
this.$classes = this.$el.find('#' + this.pfx + 'tags-c');
this.renderClasses();
this.$el.attr('class', this.className);
return this;
},
});
});

47
src/commands/view/OpenStyleManager.js
View File

@ -7,7 +7,7 @@ define(['StyleManager'], function(StyleManager) {
run: function(em, sender) run: function(em, sender)
{ {
this.sender = sender; this.sender = sender;
if(!this.$sm){ if(!this.$cn){
var config = em.get('Config'), var config = em.get('Config'),
panels = em.get('Panels'), panels = em.get('Panels'),
pfx = config.styleManager.stylePrefix || 'sm-'; pfx = config.styleManager.stylePrefix || 'sm-';
@ -15,22 +15,40 @@ define(['StyleManager'], function(StyleManager) {
config.styleManager.stylePrefix = config.stylePrefix + pfx; config.styleManager.stylePrefix = config.stylePrefix + pfx;
config.styleManager.target = em; config.styleManager.target = em;
var sm = new StyleManager(config.styleManager); // Main container
this.$sm = sm.render(); this.$cn = $('<div/>');
// Secondary container
this.$cn2 = $('<div/>');
this.$cn.append(this.$cn2);
if(!panels.getPanel('views-container')) // Class Manager container
this.panel = panels.addPanel({ id: 'views-container'}); this.clm = em.get('ClassManager');
else if(this.clm){
this.panel = panels.getPanel('views-container'); //this.$clm = this.clm.renderTags();
//this.$cn2.append(this.$clm);
}
// Style Manager manager container
this.sm = new StyleManager(config.styleManager);
this.$sm = this.sm.render();
this.$cn2.append(this.$sm);
// Create header // Create header
this.$header = $('<div>', { this.$header = $('<div>', {
class : config.styleManager.stylePrefix + 'header', class : config.styleManager.stylePrefix + 'header',
text : config.styleManager.textNoElement, text : config.styleManager.textNoElement,
}); });
//this.$cn = this.$cn.add(this.$header);
this.$cn.append(this.$header);
// Add all to the panel // Create panel if not exists
this.panel.set('appendContent', this.$sm.add(this.$header) ).trigger('change:appendContent'); if(!panels.getPanel('views-container'))
this.panel = panels.addPanel({ id: 'views-container'});
else
this.panel = panels.getPanel('views-container');
// Add all containers to the panel
this.panel.set('appendContent', this.$cn).trigger('change:appendContent');
this.target = em; this.target = em;
this.listenTo( this.target ,'change:selectedComponent', this.toggleSm); this.listenTo( this.target ,'change:selectedComponent', this.toggleSm);
@ -46,18 +64,21 @@ define(['StyleManager'], function(StyleManager) {
if(!this.sender.get('active')) if(!this.sender.get('active'))
return; return;
if(this.target.get('selectedComponent')){ if(this.target.get('selectedComponent')){
this.$sm.show(); this.$cn2.show();
this.$header.hide(); this.$header.hide();
}else{ }else{
this.$sm.hide(); this.$cn2.hide();
this.$header.show(); this.$header.show();
} }
}, },
stop: function() stop: function()
{ {
if(this.$sm) // Hide secondary container if exists
this.$sm.hide(); if(this.$cn2)
this.$cn2.hide();
// Hide header container if exists
if(this.$header) if(this.$header)
this.$header.hide(); this.$header.hide();
} }

6
src/editor/model/Editor.js
View File

@ -62,7 +62,11 @@ define([
* */ * */
initClassManager: function() initClassManager: function()
{ {
this.clm = new ClassManager(this.config.classManager); var cfg = this.config.classManager,
pfx = cfg.stylePrefix || 'clm-';
cfg.stylePrefix = this.config.stylePrefix + pfx;
cfg.target = this;
this.clm = new ClassManager(cfg);
this.set('ClassManager', this.clm); this.set('ClassManager', this.clm);
}, },

30
src/style_manager/main.js
View File

@ -2,7 +2,7 @@ define(function(require) {
/** /**
* @class StyleManager * @class StyleManager
* @param {Object} Configurations * @param {Object} Configurations
* *
* @return {Object} * @return {Object}
* */ * */
function StyleManager(config) function StyleManager(config)
@ -16,33 +16,33 @@ define(function(require) {
if (!(name in c)) if (!(name in c))
c[name] = defaults[name]; c[name] = defaults[name];
} }
this.sectors = new Sectors(c.sectors); this.sectors = new Sectors(c.sectors);
var obj = { var obj = {
collection : this.sectors, collection : this.sectors,
target : c.target, target : c.target,
config : c, config : c,
}; };
this.SectorsView = new SectorsView(obj); this.SectorsView = new SectorsView(obj);
} }
StyleManager.prototype = { StyleManager.prototype = {
/** /**
* Get all sectors * Get all sectors
* *
* @return {Sectors} * @return {Sectors}
* */ * */
getSectors : function() getSectors : function()
{ {
return this.sectors; return this.sectors;
}, },
/** /**
* Get sector by id * Get sector by id
* @param {String} id Object id * @param {String} id Object id
* *
* @return {Sector}|{null} * @return {Sector}|{null}
* */ * */
getSector : function(id) getSector : function(id)
@ -50,12 +50,12 @@ define(function(require) {
var res = this.sectors.where({id: id}); var res = this.sectors.where({id: id});
return res.length ? res[0] : null; return res.length ? res[0] : null;
}, },
/** /**
* Add new Sector * Add new Sector
* @param {String} id Object id * @param {String} id Object id
* @param {Object} obj Object data * @param {Object} obj Object data
* *
* @return {Sector} * @return {Sector}
* */ * */
addSector : function(id, obj) addSector : function(id, obj)
@ -65,16 +65,16 @@ define(function(require) {
return this.sectors.add(obj); return this.sectors.add(obj);
} }
}, },
/** /**
* Render sectors * Render sectors
* *
* @return {String} * @return {String}
* */ * */
render : function(){ render : function(){
return this.SectorsView.render().$el; return this.SectorsView.render().$el;
}, },
}; };
return StyleManager; return StyleManager;
}); });

148
styles/css/main.css
View File

@ -2557,6 +2557,10 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
/*#383838*/ /*#383838*/
/*#515151*/ /*#515151*/
/*l: #d8d7db*/ /*l: #d8d7db*/
.wte-invis-invis, .wte-clm-tags #wte-clm-new {
background-color: transparent;
border: none; }
.wte-test::btn { .wte-test::btn {
color: '#fff'; } color: '#fff'; }
@ -2564,7 +2568,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
opacity: 0.5; opacity: 0.5;
filter: alpha(opacity=50); } filter: alpha(opacity=50); }
.checker-bg, .wte-sm-sector .wte-sm-property .wte-sm-layer > #wte-sm-preview-box { .checker-bg, .wte-sm-sector .wte-sm-property .wte-sm-layer > #wte-sm-preview-box, .wte-clm-tags .wte-sm-property .wte-sm-layer > #wte-sm-preview-box {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg=="); } background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg=="); }
/********************* MAIN ************************/ /********************* MAIN ************************/
@ -2915,7 +2919,7 @@ ol.example li.placeholder:before {
/*#252525*/ /*#252525*/
/*#d5d5d5*/ /*#d5d5d5*/
/*b1b1b1*/ /*b1b1b1*/
.wte-sm-close-btn, .wte-sm-sector .wte-sm-property.wte-sm-file #wte-sm-preview-box #wte-sm-close { .wte-sm-close-btn, .wte-sm-sector .wte-sm-property.wte-sm-file #wte-sm-preview-box #wte-sm-close, .wte-clm-tags .wte-sm-property.wte-sm-file #wte-sm-preview-box #wte-sm-close {
display: block; display: block;
font-size: 23px; font-size: 23px;
position: absolute; position: absolute;
@ -2924,7 +2928,7 @@ ol.example li.placeholder:before {
top: 0; top: 0;
opacity: 0.2; opacity: 0.2;
filter: alpha(opacity=20); } filter: alpha(opacity=20); }
.wte-sm-close-btn:hover, .wte-sm-sector .wte-sm-property.wte-sm-file #wte-sm-preview-box #wte-sm-close:hover { .wte-sm-close-btn:hover, .wte-sm-sector .wte-sm-property.wte-sm-file #wte-sm-preview-box #wte-sm-close:hover, .wte-clm-tags .wte-sm-property.wte-sm-file #wte-sm-preview-box #wte-sm-close:hover {
opacity: 0.7; opacity: 0.7;
filter: alpha(opacity=70); } filter: alpha(opacity=70); }
@ -2935,7 +2939,7 @@ ol.example li.placeholder:before {
padding: 10px; padding: 10px;
text-shadow: 0 1px 0 #252525; } text-shadow: 0 1px 0 #252525; }
.wte-sm-sector { .wte-sm-sector, .wte-clm-tags {
clear: both; clear: both;
border-bottom: 1px solid #303030; border-bottom: 1px solid #303030;
color: #eee; color: #eee;
@ -2945,10 +2949,10 @@ ol.example li.placeholder:before {
/*------------------END Field--------------------*/ /*------------------END Field--------------------*/
/*------------------Property--------------------*/ /*------------------Property--------------------*/
/*------------------END Property--------------------*/ } /*------------------END Property--------------------*/ }
.wte-sm-sector #wte-sm-caret { .wte-sm-sector #wte-sm-caret, .wte-clm-tags #wte-sm-caret {
padding-right: 5px; padding-right: 5px;
font-size: 11px; } font-size: 11px; }
.wte-sm-sector .wte-sm-title { .wte-sm-sector .wte-sm-title, .wte-clm-tags .wte-sm-title {
background-color: #3a3a3a; background-color: #3a3a3a;
font-size: 13px; font-size: 13px;
letter-spacing: 1px; letter-spacing: 1px;
@ -2957,19 +2961,19 @@ ol.example li.placeholder:before {
border-bottom: 1px solid #303030; border-bottom: 1px solid #303030;
border-top: 1px solid #414141; border-top: 1px solid #414141;
cursor: pointer; } cursor: pointer; }
.wte-sm-sector .wte-sm-label { .wte-sm-sector .wte-sm-label, .wte-clm-tags .wte-sm-label {
margin: 5px 5px 2px 0; } margin: 5px 5px 2px 0; }
.wte-sm-sector .wte-sm-field { .wte-sm-sector .wte-sm-field, .wte-clm-tags .wte-sm-field {
width: 100%; width: 100%;
position: relative; } position: relative; }
.wte-sm-sector .wte-sm-field input { .wte-sm-sector .wte-sm-field input, .wte-clm-tags .wte-sm-field input {
box-sizing: border-box; box-sizing: border-box;
color: #d5d5d5; color: #d5d5d5;
background: none; background: none;
border: none; border: none;
padding: 3px 21px 3px 0; padding: 3px 21px 3px 0;
width: 100%; } width: 100%; }
.wte-sm-sector .wte-sm-field select { .wte-sm-sector .wte-sm-field select, .wte-clm-tags .wte-sm-field select {
background: none; background: none;
border: none; border: none;
color: #d5d5d5; color: #d5d5d5;
@ -2982,40 +2986,40 @@ ol.example li.placeholder:before {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; } appearance: none; }
.wte-sm-sector .wte-sm-field select::-ms-expand { .wte-sm-sector .wte-sm-field select::-ms-expand, .wte-clm-tags .wte-sm-field select::-ms-expand {
display: none; } display: none; }
.wte-sm-sector .wte-sm-field .wte-sm-unit { .wte-sm-sector .wte-sm-field .wte-sm-unit, .wte-clm-tags .wte-sm-field .wte-sm-unit {
position: absolute; position: absolute;
right: 10px; right: 10px;
top: 3px; top: 3px;
font-size: 10px; font-size: 10px;
color: #b1b1b1; color: #b1b1b1;
cursor: pointer; } cursor: pointer; }
.wte-sm-sector .wte-sm-field .wte-sm-int-arrows, .wte-sm-sector .wte-sm-field .wte-sm-sel-arrow { .wte-sm-sector .wte-sm-field .wte-sm-int-arrows, .wte-clm-tags .wte-sm-field .wte-sm-int-arrows, .wte-sm-sector .wte-sm-field .wte-sm-sel-arrow, .wte-clm-tags .wte-sm-field .wte-sm-sel-arrow {
height: 100%; height: 100%;
width: 9px; width: 9px;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
cursor: ns-resize; } cursor: ns-resize; }
.wte-sm-sector .wte-sm-field .wte-sm-sel-arrow { .wte-sm-sector .wte-sm-field .wte-sm-sel-arrow, .wte-clm-tags .wte-sm-field .wte-sm-sel-arrow {
cursor: pointer; } cursor: pointer; }
.wte-sm-sector .wte-sm-field .wte-sm-u-arrow, .wte-sm-sector .wte-sm-field .wte-sm-d-arrow, .wte-sm-sector .wte-sm-field .wte-sm-d-s-arrow { .wte-sm-sector .wte-sm-field .wte-sm-u-arrow, .wte-clm-tags .wte-sm-field .wte-sm-u-arrow, .wte-sm-sector .wte-sm-field .wte-sm-d-arrow, .wte-clm-tags .wte-sm-field .wte-sm-d-arrow, .wte-sm-sector .wte-sm-field .wte-sm-d-s-arrow, .wte-clm-tags .wte-sm-field .wte-sm-d-s-arrow {
position: absolute; position: absolute;
height: 0; height: 0;
width: 0; width: 0;
border-left: 3px solid transparent; border-left: 3px solid transparent;
border-right: 4px solid transparent; border-right: 4px solid transparent;
cursor: pointer; } cursor: pointer; }
.wte-sm-sector .wte-sm-field .wte-sm-u-arrow { .wte-sm-sector .wte-sm-field .wte-sm-u-arrow, .wte-clm-tags .wte-sm-field .wte-sm-u-arrow {
border-bottom: 4px solid #b1b1b1; border-bottom: 4px solid #b1b1b1;
top: 4px; } top: 4px; }
.wte-sm-sector .wte-sm-field .wte-sm-d-arrow, .wte-sm-sector .wte-sm-field .wte-sm-d-s-arrow { .wte-sm-sector .wte-sm-field .wte-sm-d-arrow, .wte-clm-tags .wte-sm-field .wte-sm-d-arrow, .wte-sm-sector .wte-sm-field .wte-sm-d-s-arrow, .wte-clm-tags .wte-sm-field .wte-sm-d-s-arrow {
border-top: 4px solid #b1b1b1; border-top: 4px solid #b1b1b1;
bottom: 4px; } bottom: 4px; }
.wte-sm-sector .wte-sm-field .wte-sm-d-s-arrow { .wte-sm-sector .wte-sm-field .wte-sm-d-s-arrow, .wte-clm-tags .wte-sm-field .wte-sm-d-s-arrow {
bottom: 7px; } bottom: 7px; }
.wte-sm-sector .wte-sm-field.wte-sm-integer, .wte-sm-sector .wte-sm-field.wte-sm-select, .wte-sm-sector .wte-sm-field.wte-sm-list, .wte-sm-sector .wte-sm-field.wte-sm-color, .wte-sm-sector .wte-sm-field.wte-sm-composite { .wte-sm-sector .wte-sm-field.wte-sm-integer, .wte-clm-tags .wte-sm-field.wte-sm-integer, .wte-clm-tags #wte-clm-tags-field, .wte-sm-sector .wte-sm-field.wte-sm-select, .wte-clm-tags .wte-sm-field.wte-sm-select, .wte-sm-sector .wte-sm-field.wte-sm-list, .wte-clm-tags .wte-sm-field.wte-sm-list, .wte-sm-sector .wte-sm-field.wte-sm-color, .wte-clm-tags .wte-sm-field.wte-sm-color, .wte-sm-sector .wte-sm-field.wte-sm-composite, .wte-clm-tags .wte-sm-field.wte-sm-composite {
background-color: #333333; background-color: #333333;
/*353535*/ /*353535*/
border: 1px solid #292929; border: 1px solid #292929;
@ -3026,59 +3030,59 @@ ol.example li.placeholder:before {
border-radius: 2px; border-radius: 2px;
box-sizing: border-box; box-sizing: border-box;
padding: 0 5px; } padding: 0 5px; }
.wte-sm-sector .wte-sm-field.wte-sm-select { .wte-sm-sector .wte-sm-field.wte-sm-select, .wte-clm-tags .wte-sm-field.wte-sm-select {
padding: 0; } padding: 0; }
.wte-sm-sector .wte-sm-field.wte-sm-select select { .wte-sm-sector .wte-sm-field.wte-sm-select select, .wte-clm-tags .wte-sm-field.wte-sm-select select {
height: 20px; } height: 20px; }
.wte-sm-sector .wte-sm-field.wte-sm-select option { .wte-sm-sector .wte-sm-field.wte-sm-select option, .wte-clm-tags .wte-sm-field.wte-sm-select option {
margin: 5px 0; } margin: 5px 0; }
.wte-sm-sector .wte-sm-field.wte-sm-composite { .wte-sm-sector .wte-sm-field.wte-sm-composite, .wte-clm-tags .wte-sm-field.wte-sm-composite {
background-color: transparent; background-color: transparent;
border: 1px solid #333333; } border: 1px solid #333333; }
.wte-sm-sector .wte-sm-field.wte-sm-list { .wte-sm-sector .wte-sm-field.wte-sm-list, .wte-clm-tags .wte-sm-field.wte-sm-list {
width: auto; width: auto;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
float: left; } float: left; }
.wte-sm-sector .wte-sm-field.wte-sm-list input { .wte-sm-sector .wte-sm-field.wte-sm-list input, .wte-clm-tags .wte-sm-field.wte-sm-list input {
display: none; } display: none; }
.wte-sm-sector .wte-sm-field.wte-sm-list label { .wte-sm-sector .wte-sm-field.wte-sm-list label, .wte-clm-tags .wte-sm-field.wte-sm-list label {
cursor: pointer; cursor: pointer;
padding: 5px; padding: 5px;
display: block; } display: block; }
.wte-sm-sector .wte-sm-field.wte-sm-list .wte-sm-radio:checked + label { .wte-sm-sector .wte-sm-field.wte-sm-list .wte-sm-radio:checked + label, .wte-clm-tags .wte-sm-field.wte-sm-list .wte-sm-radio:checked + label {
background-color: #5b5b5b; background-color: #5b5b5b;
/*5b5b5b*/ } /*5b5b5b*/ }
.wte-sm-sector .wte-sm-field.wte-sm-list .wte-sm-icon { .wte-sm-sector .wte-sm-field.wte-sm-list .wte-sm-icon, .wte-clm-tags .wte-sm-field.wte-sm-list .wte-sm-icon {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
text-shadow: none; text-shadow: none;
line-height: normal; } line-height: normal; }
.wte-sm-sector .wte-sm-field.wte-sm-integer select { .wte-sm-sector .wte-sm-field.wte-sm-integer select, .wte-clm-tags .wte-sm-field.wte-sm-integer select, .wte-clm-tags #wte-clm-tags-field select {
width: auto; width: auto;
padding: 0; padding: 0;
color: transparent; } color: transparent; }
.wte-sm-sector .wte-sm-list .wte-sm-el { .wte-sm-sector .wte-sm-list .wte-sm-el, .wte-clm-tags .wte-sm-list .wte-sm-el {
float: left; float: left;
border-left: 1px solid #252525; border-left: 1px solid #252525;
text-shadow: 0 1px 0 #232323; text-shadow: 0 1px 0 #232323;
/*232323*/ } /*232323*/ }
.wte-sm-sector .wte-sm-list .wte-sm-el:first-child { .wte-sm-sector .wte-sm-list .wte-sm-el:first-child, .wte-clm-tags .wte-sm-list .wte-sm-el:first-child {
border: none; } border: none; }
.wte-sm-sector .wte-sm-list .wte-sm-el:hover { .wte-sm-sector .wte-sm-list .wte-sm-el:hover, .wte-clm-tags .wte-sm-list .wte-sm-el:hover {
background: #3a3a3a; } background: #3a3a3a; }
.wte-sm-sector .wte-sm-properties { .wte-sm-sector .wte-sm-properties, .wte-clm-tags .wte-sm-properties {
font-size: 11px; font-size: 11px;
padding: 10px 5px; } padding: 10px 5px; }
.wte-sm-sector .wte-sm-property { .wte-sm-sector .wte-sm-property, .wte-clm-tags .wte-sm-property {
box-sizing: border-box; box-sizing: border-box;
float: left; float: left;
width: 50%; width: 50%;
margin-bottom: 5px; margin-bottom: 5px;
padding: 0 5px; } padding: 0 5px; }
.wte-sm-sector .wte-sm-property.wte-sm-file, .wte-sm-sector .wte-sm-property.wte-sm-composite, .wte-sm-sector .wte-sm-property.wte-sm-stack, .wte-sm-sector .wte-sm-property.wte-sm-list { .wte-sm-sector .wte-sm-property.wte-sm-file, .wte-clm-tags .wte-sm-property.wte-sm-file, .wte-sm-sector .wte-sm-property.wte-sm-composite, .wte-clm-tags .wte-sm-property.wte-sm-composite, .wte-sm-sector .wte-sm-property.wte-sm-stack, .wte-clm-tags .wte-sm-property.wte-sm-stack, .wte-sm-sector .wte-sm-property.wte-sm-list, .wte-clm-tags .wte-sm-property.wte-sm-list {
width: 100%; } width: 100%; }
.wte-sm-sector .wte-sm-property .wte-sm-btn { .wte-sm-sector .wte-sm-property .wte-sm-btn, .wte-clm-tags .wte-sm-property .wte-sm-btn {
background-color: #5b5b5b; background-color: #5b5b5b;
/*#5d5d5d*/ /*#5d5d5d*/
border-radius: 2px; border-radius: 2px;
@ -3095,36 +3099,36 @@ ol.example li.placeholder:before {
border: none; border: none;
opacity: 0.85; opacity: 0.85;
filter: alpha(opacity=85); } filter: alpha(opacity=85); }
.wte-sm-sector .wte-sm-property .wte-sm-btn-c { .wte-sm-sector .wte-sm-property .wte-sm-btn-c, .wte-clm-tags .wte-sm-property .wte-sm-btn-c {
box-sizing: border-box; box-sizing: border-box;
float: left; float: left;
width: 100%; width: 100%;
padding: 0 5px; } padding: 0 5px; }
.wte-sm-sector .wte-sm-property.wte-sm-file #wte-sm-preview-box { .wte-sm-sector .wte-sm-property.wte-sm-file #wte-sm-preview-box, .wte-clm-tags .wte-sm-property.wte-sm-file #wte-sm-preview-box {
background-color: #414141; background-color: #414141;
border-radius: 2px; border-radius: 2px;
margin-top: 5px; margin-top: 5px;
position: relative; position: relative;
overflow: hidden; } overflow: hidden; }
.wte-sm-sector .wte-sm-property.wte-sm-file #wte-sm-preview-box.wte-sm-show { .wte-sm-sector .wte-sm-property.wte-sm-file #wte-sm-preview-box.wte-sm-show, .wte-clm-tags .wte-sm-property.wte-sm-file #wte-sm-preview-box.wte-sm-show {
border: 1px solid #3f3f3f; border: 1px solid #3f3f3f;
padding: 3px 5px; } padding: 3px 5px; }
.wte-sm-sector .wte-sm-property.wte-sm-file #wte-sm-preview-box #wte-sm-close { .wte-sm-sector .wte-sm-property.wte-sm-file #wte-sm-preview-box #wte-sm-close, .wte-clm-tags .wte-sm-property.wte-sm-file #wte-sm-preview-box #wte-sm-close {
display: block; } display: block; }
.wte-sm-sector .wte-sm-property.wte-sm-file .wte-sm-show #wte-sm-preview-file { .wte-sm-sector .wte-sm-property.wte-sm-file .wte-sm-show #wte-sm-preview-file, .wte-clm-tags .wte-sm-property.wte-sm-file .wte-sm-show #wte-sm-preview-file {
height: 50px; } height: 50px; }
.wte-sm-sector .wte-sm-property.wte-sm-file #wte-sm-preview-file { .wte-sm-sector .wte-sm-property.wte-sm-file #wte-sm-preview-file, .wte-clm-tags .wte-sm-property.wte-sm-file #wte-sm-preview-file {
background-size: auto 100%; background-size: auto 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; } background-position: center center; }
.wte-sm-sector .wte-sm-property .wte-sm-layers { .wte-sm-sector .wte-sm-property .wte-sm-layers, .wte-clm-tags .wte-sm-property .wte-sm-layers {
background-color: #3a3a3a; background-color: #3a3a3a;
border: 1px solid #333333; border: 1px solid #333333;
box-shadow: 1px 1px 0 #575757; box-shadow: 1px 1px 0 #575757;
border-radius: 2px; border-radius: 2px;
margin-top: 5px; margin-top: 5px;
min-height: 30px; } min-height: 30px; }
.wte-sm-sector .wte-sm-property .wte-sm-layer { .wte-sm-sector .wte-sm-property .wte-sm-layer, .wte-clm-tags .wte-sm-property .wte-sm-layer {
background-color: #454545; background-color: #454545;
border-radius: 2px; border-radius: 2px;
box-shadow: 1px 1px 0 #333333, 1px 1px 0 #515151 inset; box-shadow: 1px 1px 0 #333333, 1px 1px 0 #515151 inset;
@ -3132,15 +3136,15 @@ ol.example li.placeholder:before {
padding: 7px; padding: 7px;
position: relative; position: relative;
cursor: pointer; } cursor: pointer; }
.wte-sm-sector .wte-sm-property .wte-sm-layer > #wte-sm-preview-box { .wte-sm-sector .wte-sm-property .wte-sm-layer > #wte-sm-preview-box, .wte-clm-tags .wte-sm-property .wte-sm-layer > #wte-sm-preview-box {
height: 15px; height: 15px;
position: absolute; position: absolute;
right: 27px; right: 27px;
top: 6px; top: 6px;
width: 15px; } width: 15px; }
.wte-sm-sector .wte-sm-property .wte-sm-layer #wte-sm-preview-box, .wte-sm-sector .wte-sm-property .wte-sm-layer #wte-sm-preview { .wte-sm-sector .wte-sm-property .wte-sm-layer #wte-sm-preview-box, .wte-clm-tags .wte-sm-property .wte-sm-layer #wte-sm-preview-box, .wte-sm-sector .wte-sm-property .wte-sm-layer #wte-sm-preview, .wte-clm-tags .wte-sm-property .wte-sm-layer #wte-sm-preview {
border-radius: 2px; } border-radius: 2px; }
.wte-sm-sector .wte-sm-property .wte-sm-layer #wte-sm-close-layer { .wte-sm-sector .wte-sm-property .wte-sm-layer #wte-sm-close-layer, .wte-clm-tags .wte-sm-property .wte-sm-layer #wte-sm-close-layer {
display: block; display: block;
font-size: 23px; font-size: 23px;
position: absolute; position: absolute;
@ -3149,18 +3153,18 @@ ol.example li.placeholder:before {
top: 0; top: 0;
opacity: 0.2; opacity: 0.2;
filter: alpha(opacity=20); } filter: alpha(opacity=20); }
.wte-sm-sector .wte-sm-property .wte-sm-layer > #wte-sm-preview-box #wte-sm-preview { .wte-sm-sector .wte-sm-property .wte-sm-layer > #wte-sm-preview-box #wte-sm-preview, .wte-clm-tags .wte-sm-property .wte-sm-layer > #wte-sm-preview-box #wte-sm-preview {
background-color: white; background-color: white;
height: 100%; height: 100%;
width: 100%; width: 100%;
background-size: cover !important; } background-size: cover !important; }
.wte-sm-sector .wte-sm-property .wte-sm-layer.wte-sm-active { .wte-sm-sector .wte-sm-property .wte-sm-layer.wte-sm-active, .wte-clm-tags .wte-sm-property .wte-sm-layer.wte-sm-active {
background-color: #4c4c4c; } background-color: #4c4c4c; }
.wte-sm-sector .wte-sm-property .wte-sm-layer.wte-sm-no-preview #wte-sm-preview-box { .wte-sm-sector .wte-sm-property .wte-sm-layer.wte-sm-no-preview #wte-sm-preview-box, .wte-clm-tags .wte-sm-property .wte-sm-layer.wte-sm-no-preview #wte-sm-preview-box {
display: none; } display: none; }
.wte-sm-sector .wte-sm-stack .wte-sm-properties { .wte-sm-sector .wte-sm-stack .wte-sm-properties, .wte-clm-tags .wte-sm-stack .wte-sm-properties {
padding-top: 5px; } padding-top: 5px; }
.wte-sm-sector .wte-sm-stack #wte-sm-add { .wte-sm-sector .wte-sm-stack #wte-sm-add, .wte-clm-tags .wte-sm-stack #wte-sm-add {
background: none; background: none;
border: none; border: none;
color: white; color: white;
@ -3171,10 +3175,10 @@ ol.example li.placeholder:before {
right: 0; right: 0;
top: -20px; top: -20px;
opacity: 0.75; } opacity: 0.75; }
.wte-sm-sector .wte-sm-stack #wte-sm-add:hover { .wte-sm-sector .wte-sm-stack #wte-sm-add:hover, .wte-clm-tags .wte-sm-stack #wte-sm-add:hover {
opacity: 1; opacity: 1;
filter: alpha(opacity=100); } filter: alpha(opacity=100); }
.wte-sm-sector .wte-sm-color-picker { .wte-sm-sector .wte-sm-color-picker, .wte-clm-tags .wte-sm-color-picker {
background-color: #eee; background-color: #eee;
border: 2px solid #575757; border: 2px solid #575757;
box-sizing: border-box; box-sizing: border-box;
@ -3184,17 +3188,49 @@ ol.example li.placeholder:before {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; } top: 0; }
.wte-sm-sector .wte-sm-btn-upload #wte-sm-upload { .wte-sm-sector .wte-sm-btn-upload #wte-sm-upload, .wte-clm-tags .wte-sm-btn-upload #wte-sm-upload {
left: 0; left: 0;
top: 0; top: 0;
position: absolute; position: absolute;
width: 100%; width: 100%;
opacity: 0; opacity: 0;
cursor: pointer; } cursor: pointer; }
.wte-sm-sector .wte-sm-btn-upload #wte-sm-label { .wte-sm-sector .wte-sm-btn-upload #wte-sm-label, .wte-clm-tags .wte-sm-btn-upload #wte-sm-label {
padding: 2px 0; } padding: 2px 0; }
/********* END Style Manager **********/ /********* END Style Manager **********/
/********* Class manager **********/
.wte-clm-tags {
font-size: 11px;
padding: 10px 5px; }
.wte-clm-tags #wte-clm-label {
padding-bottom: 5px;
float: left; }
.wte-clm-tags #wte-clm-status-c {
float: right; }
.wte-clm-tags #wte-clm-tags-field {
clear: both;
padding: 5px;
margin-bottom: 5px; }
.wte-clm-tags #wte-clm-add-tag {
background-color: #535353;
border-radius: 2px;
padding: 5px 6px;
box-shadow: 1px 1px 0 #6d6d6d inset;
border: 1px solid #323232;
cursor: pointer; }
.wte-clm-tags #wte-clm-new {
color: #eee;
padding: 5px 6px;
display: none; }
.wte-clm-tags .wte-clm-tag {
background-color: #804f7b;
display: inline-block;
border-radius: 2px;
margin: 0 3px 3px 0;
padding: 4px; }
/********* END Class manager **********/
/********* Modal dialog **********/ /********* Modal dialog **********/
.wte-mdl-backlayer { .wte-mdl-backlayer {
background-color: #000; background-color: #000;

2
styles/css/main.css.map
View File

File diff suppressed because one or more lines are too long

56
styles/scss/main.scss
View File

@ -12,6 +12,7 @@ $pn-prefix: $app-prefix + 'pn-';
$com-prefix: $app-prefix + 'com-'; $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-';
$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%)*/
$mainDkColor: darken($mainColor, 4%);/*#383838*/ $mainDkColor: darken($mainColor, 4%);/*#383838*/
$mainLhColor: lighten($mainColor, 5%);/*#515151*/ $mainLhColor: lighten($mainColor, 5%);/*#515151*/
@ -46,6 +47,11 @@ $imageCompDim: 50px;
appearance: $v; appearance: $v;
} }
.#{$app-prefix}invis-invis{
background-color: transparent;
border: none;
}
.#{$app-prefix}test { .#{$app-prefix}test {
&::btn { color: '#fff';} &::btn { color: '#fff';}
@ -717,6 +723,56 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
} }
/********* END Style Manager **********/ /********* END Style Manager **********/
/********* Class manager **********/
$addBtnBg: lighten($mainDkColor, 10%);
$paddElClm: 5px 6px;
$tagBg: #804f7b;
.#{$clm-prefix}tags{
@extend .#{$sm-prefix}sector;
font-size: 11px;
padding: 10px 5px;
##{$clm-prefix}label{
padding-bottom: 5px;
float:left;
}
##{$clm-prefix}status-c{
float:right;
}
##{$clm-prefix}tags-field{
@extend .#{$sm-prefix}field.#{$sm-prefix}integer;
clear:both;
padding: 5px;
margin-bottom: 5px;
}
##{$clm-prefix}add-tag{
background-color: $addBtnBg;
border-radius: 2px;
padding: $paddElClm;
box-shadow: 1px 1px 0 lighten($addBtnBg, 10%) inset;
border: 1px solid darken($addBtnBg, 13%);
cursor: pointer;
}
##{$clm-prefix}new {
@extend .#{$app-prefix}invis-invis;
color: $fontColor;
padding: $paddElClm;
display:none;
}
.#{$clm-prefix}tag {
background-color: $tagBg;
display: inline-block;
border-radius:2px;
margin: 0 3px 3px 0;
padding: 4px;
}
}
/********* END Class manager **********/
/********* Modal dialog **********/ /********* Modal dialog **********/

Write Preview
Loading…
Cancel
Save