tag-tool: Minor styles update and some cleanup

Styled the position drop down and moved some styles to the reel.

Signed-off-by: Valerio Virgillito <valerio@motorola.com>

5 files changed, 45 insertions, 29 deletions

diff --git a/css/ninja.css b/css/ninja.css
index bc82f50d..8e1666c2 100755
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -789,10 +789,6 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1
 
 .tagRadioButtons .nj-divider { height: 100%; float: left; position: relative; }
 
-.tagRadioButtons select.nj-skinned { visibility: visible; position: relative; margin-top: 1px; }
-
-.tagRadioButtons select[disabled="true"].nj-skinned, .tagRadioButtons select[disabled].nj-skinned { visibility: hidden; }
-
 #zoomToolOptionHolder .zoomOutToolIcon { background-image: url("../images/optionsbar/zoom/zoom_minus.png"); }
 
 #zoomToolOptionHolder .zoomInToolIcon { background-image: url("../images/optionsbar/zoom/zoom_plus.png"); }
diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.css b/js/components/tools-properties/tag-properties.reel/tag-properties.css
index 9d6c37a7..99ddf8e6 100755
--- a/js/components/tools-properties/tag-properties.reel/tag-properties.css
+++ b/js/components/tools-properties/tag-properties.reel/tag-properties.css
@@ -28,3 +28,21 @@ CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
 ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
 POSSIBILITY OF SUCH DAMAGE.
 </copyright> */
+
+.tagRadioButtons select.nj-skinned {
+    visibility: visible;
+    position: relative;
+    margin-top: 1px;
+}
+
+.tag-position select.nj-skinned {
+    border-radius: 0px;
+    padding-left: 5px;
+    height: 18px;
+    width: 100px;
+    border-color: #181818;
+}
+
+input.tag-class {
+    border-color: #181818 !important;
+}
\ No newline at end of file
diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.html b/js/components/tools-properties/tag-properties.reel/tag-properties.html
index 7db1b7cf..46568d8b 100755
--- a/js/components/tools-properties/tag-properties.reel/tag-properties.html
+++ b/js/components/tools-properties/tag-properties.reel/tag-properties.html
@@ -53,7 +53,9 @@ POSSIBILITY OF SUCH DAMAGE.
                     "classField": {"#": "className"},
 
                     "customName": {"#": "customTagCB"},
-                    "customLabel": {"#": "customContainer"}
+                    "customLabel": {"#": "customLabel"},
+
+                    "elementPosition": {"#": "positionCB"}
                 }
             }
         }
@@ -76,12 +78,12 @@ POSSIBILITY OF SUCH DAMAGE.
                 <div class="toolColorChipContainer"><div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div></div>
                 <div class="nj-divider divider-vertical toolOptionsSpacer">&nbsp;</div>
 
-                <div id="classNameContainer">
+                <div>
                     <label class="label"> Class:</label>
-                    <input data-montage-id="className" type="text" name="ClassNameTextBox" class="textBox nj-skinned"/>
+                    <input data-montage-id="className" type="text" name="ClassNameTextBox" class="textBox nj-skinned tag-class"/>
                 </div>
 
-                <div id="customContainer">
+                <div data-montage-id="customLabel">
                     <label class="label"> Tag Name:</label>
                     <select data-montage-id="customTagCB" class="nj-skinned">
                         <option>article</option>
@@ -90,14 +92,15 @@ POSSIBILITY OF SUCH DAMAGE.
                     </select>
                 </div>
 
-                <div id="positionContainer">
-                    <label class="label"> Position:</label>
+                <div class="tag-position">
+                    <label class="label">Position:</label>
                     <select data-montage-id="positionCB" class="nj-skinned">
-                        <option>Static</option>
-                        <option>Absolute</option>
-                        <option>Relative</option>
+                        <option></option>
+                        <option selected>Absolute</option>
                         <option>Fixed</option>
                         <option>Inherit</option>
+                        <option>Relative</option>
+                        <option>Static</option>
                     </select>
                 </div>
             </div>
diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.js b/js/components/tools-properties/tag-properties.reel/tag-properties.js
index 9ff23a41..603d8dbe 100755
--- a/js/components/tools-properties/tag-properties.reel/tag-properties.js
+++ b/js/components/tools-properties/tag-properties.reel/tag-properties.js
@@ -29,9 +29,8 @@ ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
 POSSIBILITY OF SUCH DAMAGE.
 </copyright> */
 
-var Montage = require("montage/core/core").Montage;
-var Component = require("montage/ui/component").Component;
-var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
+var Montage = require("montage/core/core").Montage,
+    ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
 
 var TagProperties = exports.TagProperties = Montage.create(ToolProperties, {
     divElement: {
@@ -71,6 +70,11 @@ var TagProperties = exports.TagProperties = Montage.create(ToolProperties, {
         }
     },
 
+    elementPosition: {
+        value: null,
+        serializable: true
+    },
+
     _subPrepare: {
         value: function() {
             this.customName.style["display"] = "none";
@@ -81,6 +85,8 @@ var TagProperties = exports.TagProperties = Montage.create(ToolProperties, {
             this.videoElement.addEventListener("click", this, false);
             this.canvasElement.addEventListener("click", this, false);
             this.customElement.addEventListener("click", this, false);
+
+            this.elementPosition.disabled = true;
         }
     },
 
@@ -107,7 +113,6 @@ var TagProperties = exports.TagProperties = Montage.create(ToolProperties, {
     handleFillColorChange: {
         value: function (e) {
             this.fill = e._event;
-//            this.fill.webGlColor = this.application.ninja.colorController.colorModel.colorToWebGl(e._event.color);
         }
     },
 
@@ -130,8 +135,12 @@ var TagProperties = exports.TagProperties = Montage.create(ToolProperties, {
     },
 
     selectedElement: {
-        get: function() { return this._selectedElement;},
-        set: function(value) { this._selectedElement = value; }
+        get: function() {
+            return this._selectedElement;
+        },
+        set: function(value) {
+            this._selectedElement = value;
+        }
     }
 
 });
diff --git a/scss/imports/scss/_Tools.scss b/scss/imports/scss/_Tools.scss
index 52d8ab46..5d935d69 100755
--- a/scss/imports/scss/_Tools.scss
+++ b/scss/imports/scss/_Tools.scss
@@ -351,16 +351,6 @@ input[type="radio"]:disabled {
     position: relative;
 }
 
-.tagRadioButtons select.nj-skinned {
-    visibility: visible;
-    position: relative;
-    margin-top: 1px;
-}
-
-.tagRadioButtons select[disabled="true"].nj-skinned,
-.tagRadioButtons select[disabled].nj-skinned  {
-    visibility: hidden;
-}
 //  End: styles for tag toolbar
 
 #zoomToolOptionHolder .zoomOutToolIcon {