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

Refactor ItemView to be more independent

pull/856/head
Artur Arseniev 9 years ago
parent
1f7918fb14
commit
c8c3781b96
4 changed files with 151 additions and 152 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. 74
      src/navigator/view/ItemView.js
  3. 225
      src/styles/scss/_gjs_layers.scss
  4. 2
      src/styles/scss/_gjs_variables.scss

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

File diff suppressed because one or more lines are too long

74
src/navigator/view/ItemView.js
View File

@ -17,36 +17,36 @@ module.exports = require('backbone').View.extend({
const ppfx = this.ppfx;
const hidable = this.config.hidable;
const count = this.countChildren(model);
const addClass = !count ? `${pfx}no-chld` : '';
const addClass = !count ? this.clsNoChild : '';
const clsTitle = `${this.clsTitle} ${addClass}`;
const clsTitleC = `${this.clsTitleC} ${ppfx}one-bg`;
const clsCaret = `${this.clsCaret} fa fa-chevron-right`;
const clsInput = `${this.inputNameCls} ${ppfx}no-app`;
const level = this.level + 1;
const gut = `${30 + level * 10}px`;
return `
${
hidable
? `<i id="${pfx}btn-eye" class="${pfx}btn fa fa-eye ${
? `<i class="${pfx}layer-vis fa fa-eye ${
this.isVisible() ? '' : 'fa-eye-slash'
}" data-toggle-visible></i>`
: ''
}
<div class="${pfx}title-c ${ppfx}one-bg">
<div class="${pfx}title ${addClass}" style="padding-left: ${30 +
level * 10}px" data-toggle-select>
<div class="${pfx}title-inn">
<i id="${pfx}caret" class="fa fa-chevron-right ${
this.caretCls
}" data-toggle-open></i>
<div class="${clsTitleC}">
<div class="${clsTitle}" style="padding-left: ${gut}" data-toggle-select>
<div class="${pfx}layer-title-inn">
<i class="${clsCaret}" data-toggle-open></i>
${model.getIcon()}
<input class="${ppfx}no-app ${
this.inputNameCls
}" value="${model.getName()}" readonly>
<input class="${clsInput}" value="${model.getName()}" readonly>
</div>
</div>
</div>
<div id="${pfx}counter">${count ? count : ''}</div>
<div id="${pfx}move" data-toggle-move>
<div class="${this.clsCount}">${count || ''}</div>
<div class="${this.clsMove}" data-toggle-move>
<i class="fa fa-arrows"></i>
</div>
<div class="${pfx}children"></div>
<div class="${this.clsChildren}"></div>
`;
},
@ -68,18 +68,22 @@ module.exports = require('backbone').View.extend({
this.listenTo(model, 'change:status', this.updateStatus);
this.listenTo(model, 'change:open', this.updateOpening);
this.listenTo(model, 'change:style:display', this.updateVisibility);
this.className = `${pfx}item no-select`;
this.editBtnCls = `${pfx}nav-item-edit`;
this.inputNameCls = `${ppfx}nav-comp-name`;
this.caretCls = `${ppfx}nav-item-caret`;
this.titleCls = `${pfx}title`;
this.className = `${pfx}layer no-select ${ppfx}two-color`;
this.inputNameCls = `${ppfx}layer-name`;
this.clsTitleC = `${pfx}layer-title-c`;
this.clsTitle = `${pfx}layer-title`;
this.clsCaret = `${pfx}layer-caret`;
this.clsCount = `${pfx}layer-count`;
this.clsMove = `${pfx}layer-move`;
this.clsChildren = `${pfx}layer-children`;
this.clsNoChild = `${pfx}layer-no-chld`;
this.$el.data('model', model);
this.$el.data('collection', components);
},
getVisibilityEl() {
if (!this.eyeEl) {
this.eyeEl = this.$el.children(`#${this.pfx}btn-eye`);
this.eyeEl = this.$el.children(`.${this.pfx}layer-vis`);
}
return this.eyeEl;
@ -88,7 +92,7 @@ module.exports = require('backbone').View.extend({
updateVisibility() {
const pfx = this.pfx;
const model = this.model;
const hClass = `${pfx}hide`;
const hClass = `${pfx}layer-hidden`;
const hideIcon = 'fa-eye-slash';
const hidden = model.getStyle().display == 'none';
const method = hidden ? 'addClass' : 'removeClass';
@ -143,7 +147,7 @@ module.exports = require('backbone').View.extend({
*/
getInputName() {
if (!this.inputName) {
this.inputName = this.el.querySelector('.' + this.inputNameCls);
this.inputName = this.el.querySelector(`.${this.inputNameCls}`);
}
return this.inputName;
},
@ -252,19 +256,21 @@ module.exports = require('backbone').View.extend({
const model = this.model;
const c = this.countChildren(model);
const pfx = this.pfx;
const noChildCls = `${pfx}no-chld`;
const title = this.$el.children(`.${pfx}title-c`).children(`.${pfx}title`);
//tC = `> .${pfx}title-c > .${pfx}title`;
if (!this.$counter) {
this.$counter = this.$el.children(`#${pfx}counter`);
const noChildCls = this.clsNoChild;
const title = this.$el
.children(`.${this.clsTitleC}`)
.children(`.${this.clsTitle}`);
if (!this.cnt) {
this.cnt = this.$el.children(`.${this.clsCount}`);
}
if (c) {
title.removeClass(noChildCls);
this.$counter.html(c);
this.cnt.html(c);
} else {
title.addClass(noChildCls);
this.$counter.empty();
this.cnt.empty();
model.set('open', 0);
}
},
@ -289,7 +295,9 @@ module.exports = require('backbone').View.extend({
getCaret() {
if (!this.caret) {
const pfx = this.pfx;
this.caret = this.$el.children(`.${pfx}title-c`).find(`#${pfx}caret`);
this.caret = this.$el
.children(`.${this.clsTitleC}`)
.find(`.${this.clsCaret}`);
}
return this.caret;
@ -315,10 +323,10 @@ module.exports = require('backbone').View.extend({
parent: model,
level
}).render().$el;
el.find(`.${pfx}children`).append(children);
el.find(`.${this.clsChildren}`).append(children);
if (!model.get('draggable') || !this.config.sortable) {
el.children(`#${pfx}move`).remove();
el.children(`.${this.clsMove}`).remove();
}
!vis && (this.className += ` ${pfx}hide`);

225
src/styles/scss/_gjs_layers.scss
View File

@ -1,140 +1,131 @@
.#{$nv-prefix} {
&selected-parent {
border: 1px solid $colorYell;
}
.#{$nv-prefix}selected-parent {
border: 1px solid $colorYell;
}
.#{$nv-prefix}opac50{
@include opacity(0.50);
}
.#{$app-prefix}layers {
position:relative;
height: 100%;
##{$nv-prefix}placeholder{
width: 100%;
position: absolute;
##{$nv-prefix}plh-int{
height: 100%;
padding: 1px;
&.#{$nv-prefix}insert{
background-color: $colorGreen;
}
}
&opac50 {
@include opacity(0.5);
}
.#{$nv-prefix}item {
&layer {
font-weight: lighter;
text-align: left;
position: relative;
background-color: rgba(0, 0, 0, 0.1);
}
.#{$nv-prefix}item.#{$nv-prefix}hide {
@include opacity(0.55);
}
.#{$nv-prefix}item ##{$nv-prefix}counter {
font-size: 10px;
position: absolute;
right: 27px;
top: 9px;
}
.#{$nv-prefix}item ##{$nv-prefix}btn-eye{
@extend .btn;
height: auto !important; width: auto !important;
font-size: 13px;
left: 0; top: 0;
padding: 7px 5px 7px 10px;
position: absolute;
cursor:pointer;
z-index: 1;
}
}
.#{$nv-prefix}item ##{$nv-prefix}caret {
font-size: 7px;
width: 8px;
padding: 2px;
cursor: pointer;
position: absolute;
left: -9px;
top: 6px;
@include opacity(0.7);
&:hover {
@include opacity(1);
}
}
&-hidden {
@include opacity(0.55);
}
.#{$nv-prefix}title {
@extend .#{$app-prefix}category-title;
&-count {
position: absolute;
font-size: 10px;
right: 27px;
top: 9px;
}
padding: 3px 10px 5px 30px;
display: flex;
align-items: center;
}
&-vis {
@extend .btn;
height: auto !important;
width: auto !important;
font-size: 13px;
left: 0;
top: 0;
padding: 7px 5px 7px 10px;
position: absolute;
cursor: pointer;
z-index: 1;
}
.#{$nv-prefix}title-inn {
position: relative;
}
&-caret {
font-size: 7px;
width: 8px;
padding: 2px;
cursor: pointer;
position: absolute;
left: -9px;
top: 6px;
@include opacity(0.7);
&:hover {
@include opacity(1);
}
}
.#{$nv-prefix}item .#{$nv-prefix}children .#{$nv-prefix}title{
border-left: 1px solid lighten($mainDkColor,2%);
}
.#{$nv-prefix}item > .#{$nv-prefix}children {
display: none;
}
.#{$nv-prefix}item.open > .#{$nv-prefix}children {
display: block;
}
&-title {
@extend .#{$app-prefix}category-title;
.#{$nv-prefix}item > .#{$nv-prefix}no-chld > ##{$nv-prefix}caret::before{
content:'';
}
padding: 3px 10px 5px 30px;
display: flex;
align-items: center;
.#{$nv-prefix}no-chld > .#{$nv-prefix}title-inn > ##{$nv-prefix}caret {
display:none;
}
&-inn {
position: relative;
}
}
.#{$nv-prefix}item > ##{$nv-prefix}move {
position: absolute;
cursor: move;
font-size: 12px;
right: 0; top: 0;
padding: 7px 10px 7px 5px;
}
/*
.#{$nv-prefix}item{
&.#{$nv-prefix}selected{
border: 2px solid $colorBlue;
}
}
*/
.#{$nv-prefix}selected .#{$nv-prefix}title {
background-color: rgba(255,255,255,0.1);
}
&-name {
padding: 5px;
box-sizing: content-box;
@extend .#{$app-prefix}no-user-select;
}
.#{$nv-prefix}nav-item-edit {
visibility: hidden;
padding: 5px;
font-size: 9px;
position: absolute;
left: -27px;
top: 1px;
> .#{$nv-prefix}layer-children {
display: none;
}
@include opacity(0.7);
&.open > .#{$nv-prefix}layer-children {
display: block;
}
&:hover {
@include opacity(1);
}
}
/*
.#{$nv-prefix}item .#{$nv-prefix}children .#{$nv-prefix}title {
border-left: 1px solid lighten($mainDkColor, 2%);
}
*/
.#{$nv-prefix}title-c:hover {
/*
.#{$nv-prefix}item > .#{$nv-prefix}no-chld > ##{$nv-prefix}caret::before {
content: '';
}
*/
&-no-chld > .#{$nv-prefix}layer-title-inn > .#{$nv-prefix}layer-caret {
display: none;
}
.#{$nv-prefix}nav-item-edit {
visibility: visible;
cursor: pointer;
&-move {
padding: 7px 10px 7px 5px;
position: absolute;
font-size: 12px;
cursor: move;
right: 0;
top: 0;
}
&.#{$nv-prefix}selected .#{$nv-prefix}layer-title {
background-color: rgba(255, 255, 255, 0.1);
}
}
}
.#{$app-prefix}nav-comp-name {
padding: 5px;
box-sizing: content-box;
@extend .#{$app-prefix}no-user-select;
.#{$app-prefix}layers {
position: relative;
height: 100%;
##{$nv-prefix}placeholder {
width: 100%;
position: absolute;
##{$nv-prefix}plh-int {
height: 100%;
padding: 1px;
&.#{$nv-prefix}insert {
background-color: $colorGreen;
}
}
}
}

2
src/styles/scss/_gjs_variables.scss
View File

@ -1,7 +1,7 @@
/* Class names prefixes */
$app-prefix: 'gjs-' !default;
$nv-prefix: $app-prefix + 'nv-' !default;
$nv-prefix: $app-prefix !default;
$rte-prefix: $app-prefix + 'rte-' !default;
$comp-prefix: $app-prefix + 'comp-' !default;
$mdl-prefix: $app-prefix + 'mdl-' !default;

Write Preview
Loading…
Cancel
Save