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>

3 files changed, 45 insertions, 15 deletions

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;
+        }
     }
 
 });