diff --git a/src/demo.js b/src/demo.js index 6265bf7d3..d2d9e66bb 100644 --- a/src/demo.js +++ b/src/demo.js @@ -9,16 +9,23 @@ require(['config/require-config'], function() { noticeOnUnload: 0, container : '#gjs', height: '100%', - //fromElement: true, + fromElement: true, + /* components: [{ style:{ width:'100px', height:'100px' }, traits: ['title'] + },{ + type: 'image' + },{ + tagName: 'a', + type: 'link', + content: 'mylink', }], + */ storageManager:{ autoload: 0}, - commands: { defaults : [{ id: 'open-github', diff --git a/src/dom_components/main.js b/src/dom_components/main.js index 96551e147..53f0235d6 100644 --- a/src/dom_components/main.js +++ b/src/dom_components/main.js @@ -40,6 +40,7 @@ define(function(require) { Component = require('./model/Component'), ComponentText = require('./model/ComponentText'), ComponentImage = require('./model/ComponentImage'), + ComponentLink = require('./model/ComponentLink'), ComponentView = require('./view/ComponentView'), ComponentImageView = require('./view/ComponentImageView'), ComponentTextView = require('./view/ComponentTextView'); @@ -283,4 +284,4 @@ define(function(require) { }; }; -}); \ No newline at end of file +}); diff --git a/src/dom_components/model/ComponentLink.js b/src/dom_components/model/ComponentLink.js index 035777b4c..62e881703 100644 --- a/src/dom_components/model/ComponentLink.js +++ b/src/dom_components/model/ComponentLink.js @@ -5,7 +5,7 @@ define(['./Component'], defaults: _.extend({}, Component.prototype.defaults, { droppable: false, - traits: ['href'], + traits: ['title', 'href', 'blank'], }), }); diff --git a/src/dom_components/model/Components.js b/src/dom_components/model/Components.js index ff44f5071..7e21ed205 100644 --- a/src/dom_components/model/Components.js +++ b/src/dom_components/model/Components.js @@ -29,6 +29,12 @@ define([ 'backbone', 'require'], this.mComponentText = require("./ComponentText"); model = new this.mComponentText(attrs, options); break; + + case 'link': + if(!this.mComponentLink) + this.mComponentLink = require("./ComponentLink"); + model = new this.mComponentLink(attrs, options); + break; case 'image': if(!this.mComponentImage) diff --git a/styles/css/main.css b/styles/css/main.css index 547e69839..75ce24db6 100644 --- a/styles/css/main.css +++ b/styles/css/main.css @@ -2721,9 +2721,14 @@ div.gjs-select { .gjs-trt-trait { display: flex; justify-content: space-between; - padding: 10px; + padding: 5px 10px; font-size: 0.75em; font-weight: lighter; } + .gjs-trt-trait .gjs-label { + width: 30%; + text-align: left; } + .gjs-trt-trait .gjs-field { + width: 70%; } /************* CANVAS ****************/ .gjs-cv-canvas { @@ -3095,6 +3100,9 @@ ol.example li.placeholder:before { /*414141*/ /*#252525*/ /*b1b1b1*/ +.gjs-label { + line-height: 18px; } + .gjs-field { background-color: rgba(0, 0, 0, 0.3); /*353535*/ diff --git a/styles/scss/main.scss b/styles/scss/main.scss index 3f33e4c58..51a1543dd 100644 --- a/styles/scss/main.scss +++ b/styles/scss/main.scss @@ -228,9 +228,18 @@ div.#{$app-prefix}select { .#{$trt-prefix}trait { display: flex; justify-content: space-between; - padding: 10px; + padding: 5px 10px; font-size: 0.75em; font-weight: lighter; + + .#{$app-prefix}label { + width: 30%; + text-align: left; + } + + .#{$app-prefix}field { + width: 70%; + } } /************* CANVAS ****************/ @@ -637,6 +646,10 @@ $lightBorder: rgba(255, 255, 255, 0.05); /*414141*/ $darkTextShadow: $mainDkColor; /*#252525*/ $arrowColor: $mainLhlColor; /*b1b1b1*/ +.#{$app-prefix}label { + line-height: 18px; +} + .#{$app-prefix}field { background-color: $mainDkColor;/*353535*/ border: 1px solid rgba(0, 0, 0, 0.1);/*292929*/