From c80e7df1702dff09b5cc8447ab0619747fed2024 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Fri, 11 May 2012 15:03:10 -0700 Subject: created the initial environment requirements for workspace to be manipulated. Signed-off-by: Armen Kesablyan --- js/panels/Panel.reel/Panel.js | 10 +++++++++ js/panels/PanelContainer.reel/PanelContainer.html | 20 ++++++++++++++++- js/panels/PanelContainer.reel/PanelContainer.js | 16 ++++++++++++++ js/panels/binding.reel/binding.css | 0 js/panels/binding.reel/binding.html | 27 +++++++++++++++++++++++ js/panels/binding.reel/binding.js | 11 +++++++++ js/panels/objects.reel/objects.css | 0 js/panels/objects.reel/objects.html | 27 +++++++++++++++++++++++ js/panels/objects.reel/objects.js | 7 ++++++ 9 files changed, 117 insertions(+), 1 deletion(-) create mode 100644 js/panels/binding.reel/binding.css create mode 100644 js/panels/binding.reel/binding.html create mode 100644 js/panels/binding.reel/binding.js create mode 100644 js/panels/objects.reel/objects.css create mode 100644 js/panels/objects.reel/objects.html create mode 100644 js/panels/objects.reel/objects.js (limited to 'js/panels') diff --git a/js/panels/Panel.reel/Panel.js b/js/panels/Panel.reel/Panel.js index 613bef4b..bd9b4e2f 100755 --- a/js/panels/Panel.reel/Panel.js +++ b/js/panels/Panel.reel/Panel.js @@ -13,6 +13,10 @@ exports.Panel = Montage.create(Component, { value: "Panel" }, + groups: { + value: [] + }, + _collapsed: { value: false }, @@ -119,6 +123,12 @@ exports.Panel = Montage.create(Component, { this.application.ninja.colorController.colorView = this.application.ninja.colorController.colorPanelBase.create(); } + if(this.groups) { + this.groups.forEach(function(className) { + this.element.classList.add(className); + }.bind(this)); + } + if(this.modulePath && this.moduleName) { // Load the slot content var that = this; diff --git a/js/panels/PanelContainer.reel/PanelContainer.html b/js/panels/PanelContainer.reel/PanelContainer.html index ccefd3ae..f1d1a855 100755 --- a/js/panels/PanelContainer.reel/PanelContainer.html +++ b/js/panels/PanelContainer.reel/PanelContainer.html @@ -62,6 +62,20 @@ } }, + "panel_7": { + "prototype": "js/panels/Panel.reel", + "properties": { + "element": {"#": "panel_7"} + } + }, + + "panel_8": { + "prototype": "js/panels/Panel.reel", + "properties": { + "element": {"#": "panel_8"} + } + }, + "owner": { "prototype": "js/panels/PanelContainer.reel", "properties": { @@ -73,7 +87,9 @@ "panel_3": {"@": "panel_3"}, "panel_4": {"@": "panel_4"}, "panel_5": {"@": "panel_5"}, - "panel_6": {"@": "panel_6"} + "panel_6": {"@": "panel_6"}, + "panel_7": {"@": "panel_7"}, + "panel_8": {"@": "panel_8"} }, "listeners": [ { @@ -104,6 +120,8 @@
+
+
diff --git a/js/panels/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer.reel/PanelContainer.js index 8d1d6a5e..044fd598 100755 --- a/js/panels/PanelContainer.reel/PanelContainer.js +++ b/js/panels/PanelContainer.reel/PanelContainer.js @@ -21,6 +21,18 @@ exports.PanelContainer = Montage.create(Component, { value: [] }, + panelsAvailable: { + value: function() { + var pAvail = []; + this.panels.forEach(function(obj) { + if (window.getComputedStyle(obj.element).display !== "none") { + pAvail.push(obj); + } + }); + return pAvail; + } + }, + currentPanelState: { value: {} }, @@ -49,6 +61,8 @@ exports.PanelContainer = Montage.create(Component, { this['panel_'+i].modulePath = p.modulePath; this['panel_'+i].moduleName = p.moduleName; this['panel_'+i].disabled = true; + this['panel_'+i].groups = p.groups; + this.currentPanelState[p.name] = {}; this.currentPanelState.version = "1.0"; @@ -144,6 +158,7 @@ exports.PanelContainer = Montage.create(Component, { _setPanelsSizes: { value: function(panelActivated) { + this.panelsAvailable(); var len = this.panels.length, setLocked = true; for(var i = 0; i < len; i++) { @@ -160,6 +175,7 @@ exports.PanelContainer = Montage.create(Component, { _redrawPanels: { value: function(panelActivated, unlockPanels) { var maxHeight = this.element.offsetHeight, setLocked = true; + var availablePanels = this.panelsAvailable(); var len = this.panels.length; if(unlockPanels === true) { diff --git a/js/panels/binding.reel/binding.css b/js/panels/binding.reel/binding.css new file mode 100644 index 00000000..e69de29b diff --git a/js/panels/binding.reel/binding.html b/js/panels/binding.reel/binding.html new file mode 100644 index 00000000..50e839ab --- /dev/null +++ b/js/panels/binding.reel/binding.html @@ -0,0 +1,27 @@ + + + + + + + + + +
+
+ + \ No newline at end of file diff --git a/js/panels/binding.reel/binding.js b/js/panels/binding.reel/binding.js new file mode 100644 index 00000000..e9676c4d --- /dev/null +++ b/js/panels/binding.reel/binding.js @@ -0,0 +1,11 @@ +var Montage = require("montage/core/core").Montage, + PanelBase = require("js/panels/panelbase").PanelBase; +//////////////////////////////////////////////////////////////////////// +//Exporting as ColorPanel +exports.BindingPanel = Montage.create(PanelBase, { + //////////////////////////////////////////////////////////////////// + //Panel Configuration + panelName: { + value: "Color" + } +}); \ No newline at end of file diff --git a/js/panels/objects.reel/objects.css b/js/panels/objects.reel/objects.css new file mode 100644 index 00000000..e69de29b diff --git a/js/panels/objects.reel/objects.html b/js/panels/objects.reel/objects.html new file mode 100644 index 00000000..b21097e7 --- /dev/null +++ b/js/panels/objects.reel/objects.html @@ -0,0 +1,27 @@ + + + + + + + + + +
+
+ + \ No newline at end of file diff --git a/js/panels/objects.reel/objects.js b/js/panels/objects.reel/objects.js new file mode 100644 index 00000000..c1451cc0 --- /dev/null +++ b/js/panels/objects.reel/objects.js @@ -0,0 +1,7 @@ +var Montage = require("montage/core/core").Montage, + PanelBase = require("js/panels/panelbase").PanelBase; +//////////////////////////////////////////////////////////////////////// +//Exporting as ColorPanel +exports.ObjectsPanel = Montage.create(PanelBase, { + +}); \ No newline at end of file -- cgit v1.2.3 From 336e0e0ef242f5c472757fe3bbcdd54c04a00f1f Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Mon, 14 May 2012 10:32:59 -0700 Subject: Workspace: has customized Signed-off-by: Armen Kesablyan --- js/panels/PanelContainer.reel/PanelContainer.js | 15 ++++++------- js/panels/binding-panel.reel/binding-panel.css | 0 js/panels/binding-panel.reel/binding-panel.html | 28 +++++++++++++++++++++++++ js/panels/binding-panel.reel/binding-panel.js | 12 +++++++++++ js/panels/binding.reel/binding.css | 0 js/panels/binding.reel/binding.html | 27 ------------------------ js/panels/binding.reel/binding.js | 11 ---------- js/panels/objects.reel/objects.html | 1 + 8 files changed, 49 insertions(+), 45 deletions(-) create mode 100644 js/panels/binding-panel.reel/binding-panel.css create mode 100644 js/panels/binding-panel.reel/binding-panel.html create mode 100644 js/panels/binding-panel.reel/binding-panel.js delete mode 100644 js/panels/binding.reel/binding.css delete mode 100644 js/panels/binding.reel/binding.html delete mode 100644 js/panels/binding.reel/binding.js (limited to 'js/panels') diff --git a/js/panels/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer.reel/PanelContainer.js index 044fd598..b4f77317 100755 --- a/js/panels/PanelContainer.reel/PanelContainer.js +++ b/js/panels/PanelContainer.reel/PanelContainer.js @@ -158,16 +158,17 @@ exports.PanelContainer = Montage.create(Component, { _setPanelsSizes: { value: function(panelActivated) { - this.panelsAvailable(); - var len = this.panels.length, setLocked = true; + var availablePanels = this.panelsAvailable(); + var len = availablePanels.length; + var setLocked = true; for(var i = 0; i < len; i++) { - if(this.panels[i] === panelActivated || panelActivated === null) { + if(availablePanels[i] === panelActivated || panelActivated === null) { setLocked = false; } - this.panels[i].locked = setLocked; - this.panels[i].needsDraw = true; + availablePanels[i].locked = setLocked; + availablePanels[i].needsDraw = true; } } }, @@ -176,7 +177,7 @@ exports.PanelContainer = Montage.create(Component, { value: function(panelActivated, unlockPanels) { var maxHeight = this.element.offsetHeight, setLocked = true; var availablePanels = this.panelsAvailable(); - var len = this.panels.length; + var len = availablePanels.length; if(unlockPanels === true) { setLocked = false; @@ -190,7 +191,7 @@ exports.PanelContainer = Montage.create(Component, { } for(var i = 0; i < len; i++) { - var obj = this['panel_'+i]; + var obj = availablePanels[i]; if(obj === panelActivated) { setLocked = false; diff --git a/js/panels/binding-panel.reel/binding-panel.css b/js/panels/binding-panel.reel/binding-panel.css new file mode 100644 index 00000000..e69de29b diff --git a/js/panels/binding-panel.reel/binding-panel.html b/js/panels/binding-panel.reel/binding-panel.html new file mode 100644 index 00000000..0db7b95f --- /dev/null +++ b/js/panels/binding-panel.reel/binding-panel.html @@ -0,0 +1,28 @@ + + + + + + + + + +
+ this is a test +
+ + \ No newline at end of file diff --git a/js/panels/binding-panel.reel/binding-panel.js b/js/panels/binding-panel.reel/binding-panel.js new file mode 100644 index 00000000..03fe5723 --- /dev/null +++ b/js/panels/binding-panel.reel/binding-panel.js @@ -0,0 +1,12 @@ +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; + + +exports.BindingPanel = Montage.create(Component, { + + prepareForDraw: { + value: function() { + console.log("test- objects"); + } + } +}); \ No newline at end of file diff --git a/js/panels/binding.reel/binding.css b/js/panels/binding.reel/binding.css deleted file mode 100644 index e69de29b..00000000 diff --git a/js/panels/binding.reel/binding.html b/js/panels/binding.reel/binding.html deleted file mode 100644 index 50e839ab..00000000 --- a/js/panels/binding.reel/binding.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - - - -
-
- - \ No newline at end of file diff --git a/js/panels/binding.reel/binding.js b/js/panels/binding.reel/binding.js deleted file mode 100644 index e9676c4d..00000000 --- a/js/panels/binding.reel/binding.js +++ /dev/null @@ -1,11 +0,0 @@ -var Montage = require("montage/core/core").Montage, - PanelBase = require("js/panels/panelbase").PanelBase; -//////////////////////////////////////////////////////////////////////// -//Exporting as ColorPanel -exports.BindingPanel = Montage.create(PanelBase, { - //////////////////////////////////////////////////////////////////// - //Panel Configuration - panelName: { - value: "Color" - } -}); \ No newline at end of file diff --git a/js/panels/objects.reel/objects.html b/js/panels/objects.reel/objects.html index b21097e7..a21e611c 100644 --- a/js/panels/objects.reel/objects.html +++ b/js/panels/objects.reel/objects.html @@ -22,6 +22,7 @@
+ objects:test
\ No newline at end of file -- cgit v1.2.3 From a40184e08a7ee2f189f133fd7bd83480e4bfc7f2 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 16 May 2012 22:19:34 -0700 Subject: Objects Panel - Add object component --- js/panels/objects/object.reel/object.css | 28 ++++++ js/panels/objects/object.reel/object.html | 47 ++++++++++ js/panels/objects/object.reel/object.js | 101 +++++++++++++++++++++ .../objects/objects-panel.reel/objects-panel.css | 37 ++++++++ .../objects/objects-panel.reel/objects-panel.html | 70 ++++++++++++++ .../objects/objects-panel.reel/objects-panel.js | 53 +++++++++++ 6 files changed, 336 insertions(+) create mode 100644 js/panels/objects/object.reel/object.css create mode 100644 js/panels/objects/object.reel/object.html create mode 100644 js/panels/objects/object.reel/object.js create mode 100644 js/panels/objects/objects-panel.reel/objects-panel.css create mode 100644 js/panels/objects/objects-panel.reel/objects-panel.html create mode 100644 js/panels/objects/objects-panel.reel/objects-panel.js (limited to 'js/panels') diff --git a/js/panels/objects/object.reel/object.css b/js/panels/objects/object.reel/object.css new file mode 100644 index 00000000..6ca759ba --- /dev/null +++ b/js/panels/objects/object.reel/object.css @@ -0,0 +1,28 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. +
*/ + +/* + +
+
    +
  • +
+
+ +*/ + +.objects-list { + margin: 0; + padding: 0; +} +.objects-list list-item { + width: 200px; + height: 200px; + float: left; + margin: 0 18px 18px; + border-radius: 20px; + box-shadow: inset 0 0 4px rgba(0,0,0,0.5); +} \ No newline at end of file diff --git a/js/panels/objects/object.reel/object.html b/js/panels/objects/object.reel/object.html new file mode 100644 index 00000000..efc66d79 --- /dev/null +++ b/js/panels/objects/object.reel/object.html @@ -0,0 +1,47 @@ + + + + + + + + + + + + + +
  • +
    + +
  • + + + diff --git a/js/panels/objects/object.reel/object.js b/js/panels/objects/object.reel/object.js new file mode 100644 index 00000000..953c1baf --- /dev/null +++ b/js/panels/objects/object.reel/object.js @@ -0,0 +1,101 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
    + No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
    + (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. +
    */ + +/** + @requires montage/core/core + @requires montage/ui/component + */ +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; + +exports.Object = Montage.create(Component, { + _needsPropertyInspection : { value: null }, + + _sourceObject : { value: null }, + sourceObject : { + get: function() { + return this._sourceObject; + }, + set: function(object) { + if(this._sourceObject === object) { return false; } + + if(object._montage_metadata) { + this.montageMetaData = object._montage_metadata; + } + + this._needsPropertyInspection = this.needsDraw = true; + } + + }, + + _identifier : { + value: null + }, + identifier : { + get: function() { + return this._identifier; + }, + set: function(value) { + if(this._identifier === value || !value) { return false; } + + this._identifier = value; + + this.label = value; + + this.needsDraw = true; + } + + }, + + _montageMetaData : { + value: null + }, + montageMetaData : { + get: function() { + return this._montageLabel; + }, + set: function(value) { + if(this._montageMetaData === value) { return false; } + + this._montageMetaData = value; + + if(!this.identifier && value.label) { + this.label = value.label; + this.needsDraw = true; + } + } + + }, + + templateDidLoad: { + value: function() { + console.log('object loaded'); + } + }, + + prepareForDraw : { + value: function() { + + } + }, + + willDraw : { + value: function() { + if(this._needsPropertyInspection) { + + } + + console.log("This label ", this.label); + } + }, + + draw : { + value: function() { + + } + } + +}); \ No newline at end of file diff --git a/js/panels/objects/objects-panel.reel/objects-panel.css b/js/panels/objects/objects-panel.reel/objects-panel.css new file mode 100644 index 00000000..3fa3c479 --- /dev/null +++ b/js/panels/objects/objects-panel.reel/objects-panel.css @@ -0,0 +1,37 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
    + No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
    + (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. +
    */ + +/* + +
    +
      +
    • +
    +
    + +*/ + +.objects-list { + margin: 10px 0 0 0; + padding: 0; +} +.objects-list .list-item { + list-style-type: none; + float: left; +} +.object-icon { + background-color: #fff; + border: 1px solid #353535; + border-radius: 5px; + height: 50px; + margin: 0 15px 5px; + width: 50px; +} +.object-label { + color: #fff; + display: block; + text-align: center; +} \ No newline at end of file diff --git a/js/panels/objects/objects-panel.reel/objects-panel.html b/js/panels/objects/objects-panel.reel/objects-panel.html new file mode 100644 index 00000000..d68a59c0 --- /dev/null +++ b/js/panels/objects/objects-panel.reel/objects-panel.html @@ -0,0 +1,70 @@ + + + + + + + + + + + + + +
    +
      +
    • +
    +
    + + + diff --git a/js/panels/objects/objects-panel.reel/objects-panel.js b/js/panels/objects/objects-panel.reel/objects-panel.js new file mode 100644 index 00000000..a1c381a2 --- /dev/null +++ b/js/panels/objects/objects-panel.reel/objects-panel.js @@ -0,0 +1,53 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
    + No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
    + (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. +
    */ + +/** + @requires montage/core/core + @requires montage/ui/component + */ +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; + +exports.ObjectsPanel = Montage.create(Component, { + _objects: { value: null }, + objects: { + get: function() { + return this._objects; + }, + set: function(value) { + this._objects = value; + this.needsDraw = true; + } + }, + + + templateDidLoad: { + value: function() { + console.log('objects panel loaded'); + } + }, + + prepareForDraw : { + value: function() { + + Object.defineBinding(this, 'objects', { + "boundObject": this.application.ninja.objectsController, + "boundObjectPropertyPath": "objects", + "oneway": true + }); + + } + }, + draw : { + value: function() { + console.log("objects panel draw"); + if(this.objects) { + + } + } + } + +}); \ No newline at end of file -- cgit v1.2.3 From e8ae5db7ce7023b638375cbc27a3f7b7a2f77b23 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 17 May 2012 13:59:23 -0700 Subject: Removed Old Objects Panel Structure Signed-off-by: Armen Kesablyan --- js/panels/objects.reel/objects.css | 0 js/panels/objects.reel/objects.html | 28 ---------------------------- js/panels/objects.reel/objects.js | 7 ------- 3 files changed, 35 deletions(-) delete mode 100644 js/panels/objects.reel/objects.css delete mode 100644 js/panels/objects.reel/objects.html delete mode 100644 js/panels/objects.reel/objects.js (limited to 'js/panels') diff --git a/js/panels/objects.reel/objects.css b/js/panels/objects.reel/objects.css deleted file mode 100644 index e69de29b..00000000 diff --git a/js/panels/objects.reel/objects.html b/js/panels/objects.reel/objects.html deleted file mode 100644 index a21e611c..00000000 --- a/js/panels/objects.reel/objects.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - - - -
    - objects:test -
    - - \ No newline at end of file diff --git a/js/panels/objects.reel/objects.js b/js/panels/objects.reel/objects.js deleted file mode 100644 index c1451cc0..00000000 --- a/js/panels/objects.reel/objects.js +++ /dev/null @@ -1,7 +0,0 @@ -var Montage = require("montage/core/core").Montage, - PanelBase = require("js/panels/panelbase").PanelBase; -//////////////////////////////////////////////////////////////////////// -//Exporting as ColorPanel -exports.ObjectsPanel = Montage.create(PanelBase, { - -}); \ No newline at end of file -- cgit v1.2.3 From dad4e3aa51b9f2b370f20f13bdb00ccc33f8d891 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 25 May 2012 16:34:52 -0700 Subject: Object component - Minor cleanup --- js/panels/objects/object.reel/object.js | 32 +++++--------------------------- 1 file changed, 5 insertions(+), 27 deletions(-) (limited to 'js/panels') diff --git a/js/panels/objects/object.reel/object.js b/js/panels/objects/object.reel/object.js index 953c1baf..43abafad 100644 --- a/js/panels/objects/object.reel/object.js +++ b/js/panels/objects/object.reel/object.js @@ -57,41 +57,19 @@ exports.Object = Montage.create(Component, { get: function() { return this._montageLabel; }, - set: function(value) { - if(this._montageMetaData === value) { return false; } + set: function(data) { + if(this._montageMetaData === data) { return false; } - this._montageMetaData = value; + this._montageMetaData = data; - if(!this.identifier && value.label) { - this.label = value.label; + if(!this.identifier && data.label) { + this.label = data.label; this.needsDraw = true; } } }, - templateDidLoad: { - value: function() { - console.log('object loaded'); - } - }, - - prepareForDraw : { - value: function() { - - } - }, - - willDraw : { - value: function() { - if(this._needsPropertyInspection) { - - } - - console.log("This label ", this.label); - } - }, - draw : { value: function() { -- cgit v1.2.3 From 1be5495b77c1dd426be3a6be05555254856de6ba Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 25 May 2012 16:35:17 -0700 Subject: Object Component - Enable native dragging --- js/panels/objects/object.reel/object.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels') diff --git a/js/panels/objects/object.reel/object.html b/js/panels/objects/object.reel/object.html index efc66d79..a072ab5e 100644 --- a/js/panels/objects/object.reel/object.html +++ b/js/panels/objects/object.reel/object.html @@ -38,7 +38,7 @@ -
  • +
  • -- cgit v1.2.3 From 04ef4ffcfde762a0aead4a7b702f3c019fdbeb69 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 31 May 2012 21:57:22 -0700 Subject: Binding Panel - Developed panel components. --- js/panels/binding-panel.reel/binding-panel.css | 11 +++++++ js/panels/binding-panel.reel/binding-panel.html | 26 ++++++++++++++- js/panels/binding-panel.reel/binding-panel.js | 14 ++++++++ .../binding/binding-item.reel/binding-item.css | 13 ++++++++ .../binding/binding-item.reel/binding-item.html | 37 ++++++++++++++++++++++ .../binding/binding-item.reel/binding-item.js | 26 +++++++++++++++ 6 files changed, 126 insertions(+), 1 deletion(-) create mode 100644 js/panels/binding/binding-item.reel/binding-item.css create mode 100644 js/panels/binding/binding-item.reel/binding-item.html create mode 100644 js/panels/binding/binding-item.reel/binding-item.js (limited to 'js/panels') diff --git a/js/panels/binding-panel.reel/binding-panel.css b/js/panels/binding-panel.reel/binding-panel.css index e69de29b..8597a926 100644 --- a/js/panels/binding-panel.reel/binding-panel.css +++ b/js/panels/binding-panel.reel/binding-panel.css @@ -0,0 +1,11 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
    + No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
    + (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. +
    */ + + +.bindings-list { + padding: 0; + margin: 0; +} \ No newline at end of file diff --git a/js/panels/binding-panel.reel/binding-panel.html b/js/panels/binding-panel.reel/binding-panel.html index 0db7b95f..d2e18e99 100644 --- a/js/panels/binding-panel.reel/binding-panel.html +++ b/js/panels/binding-panel.reel/binding-panel.html @@ -15,6 +15,28 @@ "properties": { "element": {"#": "binding"} } + }, + "arrayController": { + "prototype": "montage/ui/controller/array-controller", + "bindings": { + "content" : {"<-": "@owner.bindings" } + } + }, + "repetition": { + "prototype": "montage/ui/repetition.reel", + "properties": { + "element": {"#": "bindings-list"}, + "contentController": {"@": "arrayController"} + } + }, + "bindingItem": { + "prototype": "js/panels/binding/binding-item.reel", + "properties": { + "element": {"#": "binding-item"} + }, + "bindings": { + "sourceObjectPropertyPath": {"<-": "@repetition.objectAtCurrentIteration.sourceObjectPropertyPath"} + } } } @@ -22,7 +44,9 @@
    - this is a test +
      +
    • +
    \ No newline at end of file diff --git a/js/panels/binding-panel.reel/binding-panel.js b/js/panels/binding-panel.reel/binding-panel.js index 03fe5723..9fdec416 100644 --- a/js/panels/binding-panel.reel/binding-panel.js +++ b/js/panels/binding-panel.reel/binding-panel.js @@ -4,6 +4,20 @@ var Montage = require("montage/core/core").Montage, exports.BindingPanel = Montage.create(Component, { + bindings : { + value: null + }, + + templateDidLoad : { + value: function() { + Object.defineBinding(this, 'bindings', { + boundObject: this.application.ninja.objectsController, + boundObjectPropertyPath: "currentObjectBindings", + oneway: true + }); + } + }, + prepareForDraw: { value: function() { console.log("test- objects"); diff --git a/js/panels/binding/binding-item.reel/binding-item.css b/js/panels/binding/binding-item.reel/binding-item.css new file mode 100644 index 00000000..dc90f162 --- /dev/null +++ b/js/panels/binding/binding-item.reel/binding-item.css @@ -0,0 +1,13 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
    + No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
    + (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. +
    */ + +.binding-item { + color: #FFF; + margin: 0 8px; + padding: 3px; + border-bottom: 1px solid #FFF; + list-style-type: none; +} \ No newline at end of file diff --git a/js/panels/binding/binding-item.reel/binding-item.html b/js/panels/binding/binding-item.reel/binding-item.html new file mode 100644 index 00000000..23182345 --- /dev/null +++ b/js/panels/binding/binding-item.reel/binding-item.html @@ -0,0 +1,37 @@ + + + + + + + + + +
  • + +
  • + + \ No newline at end of file diff --git a/js/panels/binding/binding-item.reel/binding-item.js b/js/panels/binding/binding-item.reel/binding-item.js new file mode 100644 index 00000000..9365da65 --- /dev/null +++ b/js/panels/binding/binding-item.reel/binding-item.js @@ -0,0 +1,26 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
    + No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
    + (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. +
    */ + +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; + + +exports.BindingItem = Montage.create(Component, { + + sourceObjectPropertyPath : { value: null }, + + templateDidLoad : { + value: function() { + console.log("loaded binding item"); + } + }, + + prepareForDraw: { + value: function() { + console.log("preparing to draw binding item"); + } + } +}); \ No newline at end of file -- cgit v1.2.3 From 0f59ef2a4b78fbcee402255857e8355a67fa7e66 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 1 Jun 2012 12:53:24 -0700 Subject: Bindings Panel - Update binding panel components --- js/panels/binding-panel.reel/binding-panel.css | 2 +- js/panels/binding-panel.reel/binding-panel.html | 6 +- .../binding/binding-item.reel/binding-item.css | 34 +++++++++++- .../binding/binding-item.reel/binding-item.html | 54 +++++++++++++++++- .../binding/binding-item.reel/binding-item.js | 64 +++++++++++++++++++++- 5 files changed, 153 insertions(+), 7 deletions(-) (limited to 'js/panels') diff --git a/js/panels/binding-panel.reel/binding-panel.css b/js/panels/binding-panel.reel/binding-panel.css index 8597a926..f29b66c1 100644 --- a/js/panels/binding-panel.reel/binding-panel.css +++ b/js/panels/binding-panel.reel/binding-panel.css @@ -8,4 +8,4 @@ .bindings-list { padding: 0; margin: 0; -} \ No newline at end of file +} diff --git a/js/panels/binding-panel.reel/binding-panel.html b/js/panels/binding-panel.reel/binding-panel.html index d2e18e99..2850b67c 100644 --- a/js/panels/binding-panel.reel/binding-panel.html +++ b/js/panels/binding-panel.reel/binding-panel.html @@ -35,7 +35,11 @@ "element": {"#": "binding-item"} }, "bindings": { - "sourceObjectPropertyPath": {"<-": "@repetition.objectAtCurrentIteration.sourceObjectPropertyPath"} + "sourceObjectPropertyPath": {"<-": "@repetition.objectAtCurrentIteration.sourceObjectPropertyPath"}, + "sourceObject": {"<-": "@repetition.objectAtCurrentIteration.sourceObject"}, + "boundObjectPropertyPath": {"<-": "@repetition.objectAtCurrentIteration.boundObjectPropertyPath"}, + "boundObject": {"<-": "@repetition.objectAtCurrentIteration.boundObject"}, + "oneway": {"<-": "@repetition.objectAtCurrentIteration.oneway"} } } diff --git a/js/panels/binding/binding-item.reel/binding-item.css b/js/panels/binding/binding-item.reel/binding-item.css index dc90f162..0f4416b9 100644 --- a/js/panels/binding/binding-item.reel/binding-item.css +++ b/js/panels/binding/binding-item.reel/binding-item.css @@ -8,6 +8,38 @@ color: #FFF; margin: 0 8px; padding: 3px; - border-bottom: 1px solid #FFF; + border-bottom: 1px solid #505050; list-style-type: none; + display: -webkit-box; + -webkit-box-orient: horizontal; +} +.binding-item > * { + -webkit-box-flex: 1; +} +.source-object, .bound-object { + padding: 5px 0 3px; +} +.source-object { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowREQ2NEVFRkE0M0IxMUUxQTkwQ0M2Qzc0NjQ4NTRBNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowREQ2NEVGMEE0M0IxMUUxQTkwQ0M2Qzc0NjQ4NTRBNiI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjBERDY0RUVEQTQzQjExRTFBOTBDQzZDNzQ2NDg1NEE2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBERDY0RUVFQTQzQjExRTFBOTBDQzZDNzQ2NDg1NEE2Ii8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2B50zlPwAAAttJREFUeNqMls9rE0EUx2fz24RKsoluUAkIHhWFXtVCJRAhFBRB8D8I1GMF%2FwJFjwr9DzwVipKDUBvQg4KgeJOe1OSS2PxYMUnzO77vsm%2BcSbJpB76dLvve5719M%2FMmxnQ6FV4jn89fo%2BkBaY2UJmVIZVKV9J70ivTNy99YBCdolqZCv9%2B%2F0%2Bl0BM0CdqPRSAQCAWEYhgiHwyIWi2HeJdtt0t6xcAI%2FGw6HW61Wy4H6fD4pHpPJRApBEomECAaDz%2BnVI084gV90u93NRqPhwJCl3%2B%2BXYGTM9gCPx2Pna%2FB%2FMpkU0Wj0Jb16yLyAAn4CcL1eRxYSrMLVASB%2FEQLAL5VKbVKANr1%2BLDMn8AaV4nWtVnNggGNGADgjY4gHfCAEABhfQP7ObFkW%2FO%2BS2S5nXmg2mw6AM1ZLYlDi5u1fInLJlgHaX86K1gdLKxcEDgUoOHBsN1q43GAwEKFQSANDACdyPzVw56sl%2Fn48R%2B%2Bnc4sMDvGytNCrKOZ9qrWToVpjzngenBbtTxdkqdhW9QWPxj2UZX12yzmOnuDzshQ8q0GgXq%2BHV1lknsFCqDvCF5ivsQrW9vLMYoMDHo2LIJqolWo4HZOG%2BvbzhcYLwaofP7s8E4QmZ80rjmHvZ8TR96QEnbp8KE6vlTU427IfP7u8Jv6WsRCcvTSmxz%2BljOgd6AFWblbmAqinHBzwaPwAvIT%2BoPYLmQkFsN%2FpAaJXfouV6xUtWz5QrEgkAtM9wHfoyMpeAWlB3ABHB%2Bb%2FAFcpwI2KBlV9wQOXj%2F9%2BtVpdxwscfT7%2B8oQuOf4MxfGHYJ9Op0tkdou3xDa6GvcK7hezUmGq2Ie7o9vfhQMvFos7lO1T0zRlBiwOxAD1edYW%2FuCgJEv7OZfluH7OWtTPF95E1Hy2bNs%2B8U0Uj8fR9JbfREqAnHuHbvAdyjXnJqXcoW%2FcGr890QWtBFlF10Rzc2%2F%2BM6RD9xdAya3tZy%2F%2FfwIMAMwfSVrTb5e6AAAAAElFTkSuQmCC); + background-position: right center; + background-repeat: no-repeat; + padding-right: 30px; +} +.bound-object { + padding-left: 12px; +} +.so-object-identifier, .bo-object-identifier { + float: right; + color: #999; +} +.binding-item .binding-edit-button { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDQkI4QzVEMTc3ODcxMUUxQTlCOUNDQUJBMEUyMTIwMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDQkI4QzVEMjc3ODcxMUUxQTlCOUNDQUJBMEUyMTIwMSI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkNCQjhDNUNGNzc4NzExRTFBOUI5Q0NBQkEwRTIxMjAxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkNCQjhDNUQwNzc4NzExRTFBOUI5Q0NBQkEwRTIxMjAxIi8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2Bs3B0RQAAAd9JREFUeNockbGL2nAUx%2FNLorHaJXKjJ6YcDkVcHByUQwQDbl26FqEu3dykLjoIXXTwDygKFcrRP%2BC8Q0HwQDlwOaRCKFiuCmo0d0Jr1ZjY923ghZfv9%2FN%2B7%2F1eOJ%2FPx%2BEpl8uKZVk3p9PpRlXV81QqdY4cGjww%2F9l2u81Fo1EuFotdbrdbzbbtX%2FP5%2FAqBHBo8MGB5RVF8yWTSv9%2FvXYIgsNVq9XcwGLxCIBdFkcEDA5YZhnFNJwXcbjc3Go32mUzmlsaYYAQ6QGk0GmooFJKoE8fz%2FE9%2BsVjIHo%2FHpes6y2azX8PhsNbtdtMI5NDggQHL0wW%2FdDodfTqdPm02m4dqtfqmXq9LCOTQ4IEBy3u93gdq9YfCplHM2Wz2gsZ7ptggJ%2B0ADwxYRuI1zfqaLvY7l8t9mkwmcqVSeWeapl0oFJqBQOCpVqt9lCTpJWnfWb%2Ffv6fKM2xot9s9FovFz71ez6ST7UQiIZVKpffUzU%2Ffp%2FV6vWLBYPDD8Xi8oJ%2FkarVaKhVatLlHxhgny7KfPCGdTt%2FS945W%2FEPUNO2KNihGIpH44XBI0Tak8Xh8hoJ4PC7RGCZN0BkOh3fEHUV6Gdi50%2BnUqaWxXC6FfD7%2FDQXNZvMtXdZyOBw6IUtw%2FwQYACT6GJDDh744AAAAAElFTkSuQmCC); + background-repeat: no-repeat; + background-position: right center; + border: 0 none; + cursor: pointer; + padding-top: 6px; + width: 12px; + height: 100%; + margin-left: 10px; } \ No newline at end of file diff --git a/js/panels/binding/binding-item.reel/binding-item.html b/js/panels/binding/binding-item.reel/binding-item.html index 23182345..a569b8b4 100644 --- a/js/panels/binding/binding-item.reel/binding-item.html +++ b/js/panels/binding/binding-item.reel/binding-item.html @@ -16,14 +16,54 @@ "element": {"#": "binding-item"} } }, - "label": { + "soProperty": { "prototype": "montage/ui/dynamic-text.reel", "properties": { - "element": {"#": "label"} + "element": {"#": "so-property"} }, "bindings": { "value": {"<-": "@owner.sourceObjectPropertyPath"} } + }, + "soObject": { + "prototype": "montage/ui/dynamic-text.reel", + "properties": { + "element": {"#": "so-object"} + }, + "bindings": { + "value": {"<-": "@owner.sourceObjectLabel"} + } + }, + "boProperty" : { + "prototype": "montage/ui/dynamic-text.reel", + "properties": { + "element": {"#": "bo-property"} + }, + "bindings": { + "value": {"<-": "@owner.boundObjectPropertyPath"} + } + }, + "boObject": { + "prototype": "montage/ui/dynamic-text.reel", + "properties": { + "element": {"#": "bo-object"} + }, + "bindings": { + "value": {"<-": "@owner.boundObjectLabel"} + } + }, + "editButton": { + "prototype": "montage/ui/button.reel", + "properties": { + "element": {"#": "edit-button"}, + "identifier": "editButton", + "label": " " + }, + "listeners": [{ + "type": "action", + "listener": {"@": "owner"} + }] + } } @@ -31,7 +71,15 @@
  • - +
    + + +
    +
    + + +
    +
  • \ No newline at end of file diff --git a/js/panels/binding/binding-item.reel/binding-item.js b/js/panels/binding/binding-item.reel/binding-item.js index 9365da65..bda62ef3 100644 --- a/js/panels/binding/binding-item.reel/binding-item.js +++ b/js/panels/binding/binding-item.reel/binding-item.js @@ -9,8 +9,70 @@ var Montage = require("montage/core/core").Montage, exports.BindingItem = Montage.create(Component, { + sourceObjectLabel : { value: null }, + boundObjectLabel : { value: null }, - sourceObjectPropertyPath : { value: null }, + _sourceObject : { value: null }, + sourceObject : { + get: function() { + return this._sourceObject; + }, + set: function(value) { + if(value === this._sourceObject) { return; } + + this.sourceObjectLabel = value.identifier; + + this._sourceObject = value; + } + }, + _boundObject : { value: null }, + boundObject : { + get: function() { + return this._boundObject; + }, + set: function(value) { + if(value === this._boundObject) { return; } + + this.boundObjectLabel = value.identifier; + + this._boundObject = value; + } + }, + + _sourceObjectPropertyPath : { value: null }, + sourceObjectPropertyPath : { + get: function() { + return this._sourceObjectPropertyPath; + }, + set: function(value) { + if(value === this._sourceObjectPropertyPath) { return; } + this._sourceObjectPropertyPath = value; + this.needsDraw = true; + } + }, + _boundObjectPropertyPath : { value: null }, + boundObjectPropertyPath : { + get: function() { + return this._boundObjectPropertyPath; + }, + set: function(value) { + if(value === this._boundObjectPropertyPath) { return; } + this._boundObjectPropertyPath = value; + this.needsDraw = true; + } + }, + + _oneway : { value: null }, + oneway : { + get: function() { + return this._oneway; + }, + set: function(value) { + if(value === this._oneway) { return; } + this._oneway = value; + this.needsDraw = true; + } + }, templateDidLoad : { value: function() { -- cgit v1.2.3 From 0f5bdc50d6167b23b694e52e735988f670e85b8b Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 1 Jun 2012 13:26:44 -0700 Subject: Binding Panel - Binding item component CSS change --- js/panels/binding/binding-item.reel/binding-item.css | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) (limited to 'js/panels') diff --git a/js/panels/binding/binding-item.reel/binding-item.css b/js/panels/binding/binding-item.reel/binding-item.css index 0f4416b9..eb4ecfe0 100644 --- a/js/panels/binding/binding-item.reel/binding-item.css +++ b/js/panels/binding/binding-item.reel/binding-item.css @@ -10,11 +10,12 @@ padding: 3px; border-bottom: 1px solid #505050; list-style-type: none; - display: -webkit-box; - -webkit-box-orient: horizontal; + /*display: -webkit-box;*/ + /*-webkit-box-orient: horizontal;*/ } .binding-item > * { - -webkit-box-flex: 1; + /*-webkit-box-flex: 1;*/ + display: inline-block; } .source-object, .bound-object { padding: 5px 0 3px; @@ -24,9 +25,11 @@ background-position: right center; background-repeat: no-repeat; padding-right: 30px; + width: 41%; } .bound-object { padding-left: 12px; + width: 41%; } .so-object-identifier, .bo-object-identifier { float: right; -- cgit v1.2.3 From 9b238646d7c9d8ed1fde010cde5597f8787a8806 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 1 Jun 2012 19:04:38 -0700 Subject: Binding Panel - Item css and toggle button action handler --- .../binding/binding-item.reel/binding-item.css | 56 +++++++++++++++------- .../binding/binding-item.reel/binding-item.html | 17 ++++++- .../binding/binding-item.reel/binding-item.js | 20 ++++++++ 3 files changed, 74 insertions(+), 19 deletions(-) (limited to 'js/panels') diff --git a/js/panels/binding/binding-item.reel/binding-item.css b/js/panels/binding/binding-item.reel/binding-item.css index eb4ecfe0..3dc1294c 100644 --- a/js/panels/binding/binding-item.reel/binding-item.css +++ b/js/panels/binding/binding-item.reel/binding-item.css @@ -10,39 +10,59 @@ padding: 3px; border-bottom: 1px solid #505050; list-style-type: none; - /*display: -webkit-box;*/ - /*-webkit-box-orient: horizontal;*/ -} -.binding-item > * { - /*-webkit-box-flex: 1;*/ - display: inline-block; + display: -webkit-box; + -webkit-box-orient: horizontal; } .source-object, .bound-object { padding: 5px 0 3px; + -webkit-box-flex: 1; + overflow: hidden; + position: relative; } -.source-object { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowREQ2NEVFRkE0M0IxMUUxQTkwQ0M2Qzc0NjQ4NTRBNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowREQ2NEVGMEE0M0IxMUUxQTkwQ0M2Qzc0NjQ4NTRBNiI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjBERDY0RUVEQTQzQjExRTFBOTBDQzZDNzQ2NDg1NEE2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBERDY0RUVFQTQzQjExRTFBOTBDQzZDNzQ2NDg1NEE2Ii8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2B50zlPwAAAttJREFUeNqMls9rE0EUx2fz24RKsoluUAkIHhWFXtVCJRAhFBRB8D8I1GMF%2FwJFjwr9DzwVipKDUBvQg4KgeJOe1OSS2PxYMUnzO77vsm%2BcSbJpB76dLvve5719M%2FMmxnQ6FV4jn89fo%2BkBaY2UJmVIZVKV9J70ivTNy99YBCdolqZCv9%2B%2F0%2Bl0BM0CdqPRSAQCAWEYhgiHwyIWi2HeJdtt0t6xcAI%2FGw6HW61Wy4H6fD4pHpPJRApBEomECAaDz%2BnVI084gV90u93NRqPhwJCl3%2B%2BXYGTM9gCPx2Pna%2FB%2FMpkU0Wj0Jb16yLyAAn4CcL1eRxYSrMLVASB%2FEQLAL5VKbVKANr1%2BLDMn8AaV4nWtVnNggGNGADgjY4gHfCAEABhfQP7ObFkW%2FO%2BS2S5nXmg2mw6AM1ZLYlDi5u1fInLJlgHaX86K1gdLKxcEDgUoOHBsN1q43GAwEKFQSANDACdyPzVw56sl%2Fn48R%2B%2Bnc4sMDvGytNCrKOZ9qrWToVpjzngenBbtTxdkqdhW9QWPxj2UZX12yzmOnuDzshQ8q0GgXq%2BHV1lknsFCqDvCF5ivsQrW9vLMYoMDHo2LIJqolWo4HZOG%2BvbzhcYLwaofP7s8E4QmZ80rjmHvZ8TR96QEnbp8KE6vlTU427IfP7u8Jv6WsRCcvTSmxz%2BljOgd6AFWblbmAqinHBzwaPwAvIT%2BoPYLmQkFsN%2FpAaJXfouV6xUtWz5QrEgkAtM9wHfoyMpeAWlB3ABHB%2Bb%2FAFcpwI2KBlV9wQOXj%2F9%2BtVpdxwscfT7%2B8oQuOf4MxfGHYJ9Op0tkdou3xDa6GvcK7hezUmGq2Ie7o9vfhQMvFos7lO1T0zRlBiwOxAD1edYW%2FuCgJEv7OZfluH7OWtTPF95E1Hy2bNs%2B8U0Uj8fR9JbfREqAnHuHbvAdyjXnJqXcoW%2FcGr890QWtBFlF10Rzc2%2F%2BM6RD9xdAya3tZy%2F%2FfwIMAMwfSVrTb5e6AAAAAElFTkSuQmCC); - background-position: right center; - background-repeat: no-repeat; - padding-right: 30px; - width: 41%; +.source-object > span, .bound-object > span { + position: absolute; } .bound-object { padding-left: 12px; - width: 41%; +} +.so-property { + left: 3px; +} +.bo-property { + left: 6px; } .so-object-identifier, .bo-object-identifier { - float: right; + right: 3px; color: #999; } -.binding-item .binding-edit-button { - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDQkI4QzVEMTc3ODcxMUUxQTlCOUNDQUJBMEUyMTIwMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDQkI4QzVEMjc3ODcxMUUxQTlCOUNDQUJBMEUyMTIwMSI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkNCQjhDNUNGNzc4NzExRTFBOUI5Q0NBQkEwRTIxMjAxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkNCQjhDNUQwNzc4NzExRTFBOUI5Q0NBQkEwRTIxMjAxIi8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2Bs3B0RQAAAd9JREFUeNockbGL2nAUx%2FNLorHaJXKjJ6YcDkVcHByUQwQDbl26FqEu3dykLjoIXXTwDygKFcrRP%2BC8Q0HwQDlwOaRCKFiuCmo0d0Jr1ZjY923ghZfv9%2FN%2B7%2F1eOJ%2FPx%2BEpl8uKZVk3p9PpRlXV81QqdY4cGjww%2F9l2u81Fo1EuFotdbrdbzbbtX%2FP5%2FAqBHBo8MGB5RVF8yWTSv9%2FvXYIgsNVq9XcwGLxCIBdFkcEDA5YZhnFNJwXcbjc3Go32mUzmlsaYYAQ6QGk0GmooFJKoE8fz%2FE9%2BsVjIHo%2FHpes6y2azX8PhsNbtdtMI5NDggQHL0wW%2FdDodfTqdPm02m4dqtfqmXq9LCOTQ4IEBy3u93gdq9YfCplHM2Wz2gsZ7ptggJ%2B0ADwxYRuI1zfqaLvY7l8t9mkwmcqVSeWeapl0oFJqBQOCpVqt9lCTpJWnfWb%2Ffv6fKM2xot9s9FovFz71ez6ST7UQiIZVKpffUzU%2Ffp%2FV6vWLBYPDD8Xi8oJ%2FkarVaKhVatLlHxhgny7KfPCGdTt%2FS945W%2FEPUNO2KNihGIpH44XBI0Tak8Xh8hoJ4PC7RGCZN0BkOh3fEHUV6Gdi50%2BnUqaWxXC6FfD7%2FDQXNZvMtXdZyOBw6IUtw%2FwQYACT6GJDDh744AAAAAElFTkSuQmCC); - background-repeat: no-repeat; + +/* ------------- + Buttons + ---------------- */ + +.direction-toggle-button, .binding-edit-button { + background-color: transparent; background-position: right center; + background-repeat: no-repeat; border: 0 none; cursor: pointer; + width: 23px; + height: 100%; + -webkit-box-flex: 0; +} +.direction-toggle-button { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowREQ2NEVFRkE0M0IxMUUxQTkwQ0M2Qzc0NjQ4NTRBNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowREQ2NEVGMEE0M0IxMUUxQTkwQ0M2Qzc0NjQ4NTRBNiI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjBERDY0RUVEQTQzQjExRTFBOTBDQzZDNzQ2NDg1NEE2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBERDY0RUVFQTQzQjExRTFBOTBDQzZDNzQ2NDg1NEE2Ii8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2B50zlPwAAAttJREFUeNqMls9rE0EUx2fz24RKsoluUAkIHhWFXtVCJRAhFBRB8D8I1GMF%2FwJFjwr9DzwVipKDUBvQg4KgeJOe1OSS2PxYMUnzO77vsm%2BcSbJpB76dLvve5719M%2FMmxnQ6FV4jn89fo%2BkBaY2UJmVIZVKV9J70ivTNy99YBCdolqZCv9%2B%2F0%2Bl0BM0CdqPRSAQCAWEYhgiHwyIWi2HeJdtt0t6xcAI%2FGw6HW61Wy4H6fD4pHpPJRApBEomECAaDz%2BnVI084gV90u93NRqPhwJCl3%2B%2BXYGTM9gCPx2Pna%2FB%2FMpkU0Wj0Jb16yLyAAn4CcL1eRxYSrMLVASB%2FEQLAL5VKbVKANr1%2BLDMn8AaV4nWtVnNggGNGADgjY4gHfCAEABhfQP7ObFkW%2FO%2BS2S5nXmg2mw6AM1ZLYlDi5u1fInLJlgHaX86K1gdLKxcEDgUoOHBsN1q43GAwEKFQSANDACdyPzVw56sl%2Fn48R%2B%2Bnc4sMDvGytNCrKOZ9qrWToVpjzngenBbtTxdkqdhW9QWPxj2UZX12yzmOnuDzshQ8q0GgXq%2BHV1lknsFCqDvCF5ivsQrW9vLMYoMDHo2LIJqolWo4HZOG%2BvbzhcYLwaofP7s8E4QmZ80rjmHvZ8TR96QEnbp8KE6vlTU427IfP7u8Jv6WsRCcvTSmxz%2BljOgd6AFWblbmAqinHBzwaPwAvIT%2BoPYLmQkFsN%2FpAaJXfouV6xUtWz5QrEgkAtM9wHfoyMpeAWlB3ABHB%2Bb%2FAFcpwI2KBlV9wQOXj%2F9%2BtVpdxwscfT7%2B8oQuOf4MxfGHYJ9Op0tkdou3xDa6GvcK7hezUmGq2Ie7o9vfhQMvFos7lO1T0zRlBiwOxAD1edYW%2FuCgJEv7OZfluH7OWtTPF95E1Hy2bNs%2B8U0Uj8fR9JbfREqAnHuHbvAdyjXnJqXcoW%2FcGr890QWtBFlF10Rzc2%2F%2BM6RD9xdAya3tZy%2F%2FfwIMAMwfSVrTb5e6AAAAAElFTkSuQmCC); + border-radius: 50%; + height: 23px; + width: 23px; +} +.direction-toggle-button.two-way { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowREQ2NEVGM0E0M0IxMUUxQTkwQ0M2Qzc0NjQ4NTRBNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowREQ2NEVGNEE0M0IxMUUxQTkwQ0M2Qzc0NjQ4NTRBNiI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjBERDY0RUYxQTQzQjExRTFBOTBDQzZDNzQ2NDg1NEE2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBERDY0RUYyQTQzQjExRTFBOTBDQzZDNzQ2NDg1NEE2Ii8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2BbFXFCAAAA8FJREFUeNqMlt9rHFUUx78zszO7mxWz6a62KUlsSBrwwboixRfR0ppWMAZKadX%2BAdKC4ouV%2BhdU1DeFPiSoT%2BJDQZA8CIUWX0sCbSEVTUGaNr%2Fo7uxmZ3azu7M%2FPN%2FbvZNZmrS58N27O%2Becz71z7r3nrtHpdLBbm5qaykl3XvSu6IBoRLQsWhf9JfpVdHu3eGMnuEAnpbtYr9dPVyoVSA%2F6NZtNxGIxGIaBeDyOVCrF%2FnfxvSq6%2Fly4gL8NguBSsVhUUNM0Q%2BnWbrdDcZCBgQHYtv2dmL7aFS7gH6rV6meFQkHBOEvLskIwZ6z9CW61Wupt%2BD2TyaCvr%2B9HMX2ueWYEfIXgfD6voI7jcDbbcuKovpzrf