Improving Document Bar UI

Setting up new document bar UI to then set up switching document view modes. Improving layout of component and cleaning up. Added icons and button UI.
author: Jose Antonio Marquez 2012-07-12 16:06:11 -0700
committer: Jose Antonio Marquez 2012-07-12 16:06:11 -0700
commit: 2dd8fabacf115cf32e38115a472f3f2c59926135 (patch)
tree: ecb1c5b7158f9da162a3204dae03a06a02f63ff3 /js/components/layout/document-bar.reel/document-bar.html
parent: 688e22dc367f37d4b8734a37daa3b823ea450295 (diff)
download: ninja-2dd8fabacf115cf32e38115a472f3f2c59926135.tar.gz
1 files changed, 76 insertions, 48 deletions
diff --git a/js/components/layout/document-bar.reel/document-bar.html b/js/components/layout/document-bar.reel/document-bar.html
index 101f716d..69f8107f 100755
--- a/js/components/layout/document-bar.reel/document-bar.html
+++ b/js/components/layout/document-bar.reel/document-bar.html
@@ -29,62 +29,90 @@ 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> -->
 <html>
-<head>
+    <head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        
-    <link rel="stylesheet" type="text/css" href="document-bar.css">
+        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        
+        <link rel="stylesheet" type="text/css" href="document-bar.css">
-    <script type="text/montage-serialization">
+        <script type="text/montage-serialization">
-        {
+            {
-            "hottext1": {
+                "hottext1": {
-                "prototype": "js/components/hottextunit.reel[HotTextUnit]",
+                    "prototype": "js/components/hottextunit.reel[HotTextUnit]",
-                "properties": {
+                    "properties": {
-                    "element": {"#": "zoomControlHT"},
+                        "element": {"#": "zoomControlHT"},
-                    "minValue":25,
+                        "minValue":25,
-                    "maxValue" :2000,
+                        "maxValue" :2000,
-                    "stepSize" :5,
+                        "stepSize" :5,
-                    "acceptableUnits" : ["%"],
+                        "acceptableUnits" : ["%"],
-                    "units" : "%"
+                        "units" : "%"
+                    },
+                    "bindings": {
+                        "value": {
+                            "boundObject": {"@": "owner"},
+                            "boundObjectPropertyPath": "zoomFactor",
+                            "oneway": false
+                        }
+                    }
                },
-                "bindings": {
+    
-                    "value": {
+                "disable": {
-                        "boundObject": {"@": "owner"},
+                    "prototype": "montage/ui/condition.reel",
-                        "boundObjectPropertyPath": "zoomFactor",
+                    "properties": {
-                        "oneway": false
+                        "element": {"#": "disabledCondition"}
+                    },
+                    "bindings": {
+                        "condition": {"<-": "@owner.disabled"}
                    }
-                }
-            },
-            "disable": {
-                "prototype": "montage/ui/condition.reel",
-                "properties": {
-                    "element": {"#": "disabledCondition"}
                },
-                "bindings": {
+    
-                    "condition": {"<-": "@owner.disabled"}
+                "owner": {
-                }
+                    "prototype": "js/components/layout/document-bar.reel",
-            },
+                    "properties": {
+                        "element": {"#": "documentBar"},
-            "owner": {
+                        "zoomControl": {"@": "hottext1"}
-                "prototype": "js/components/layout/document-bar.reel",
+                    }
-                "properties": {
-                    "element": {"#": "documentBar"},
-                    "zoomControl": {"@": "hottext1"}
                }
            }
-        }
+        </script>
-    </script>
-</head>
+    </head>
-<body>
+    <body>
-    <div data-montage-id="documentBar">
+        
-        <input class="zoomHotText label" data-montage-id="zoomControlHT"/>
+        <div data-montage-id="documentBar">
-        <span class="design-view disable" data-montage-id="design">Design View</span>
+            
-        <span class="code-view disable" data-montage-id="code">Code View</span>
+            <section>
-        <div data-montage-id="disabledCondition" class="panelDisabled"></div>
+            
-    </div>
+                <div class="zoomicon"></div>
-</body>
+            
+                <input data-montage-id="zoomControlHT" class="zoomHotText label" />
+                
+            </section>
+            
+            <section>
+                
+                <div class="viewicon viewdesign"></div>
+                
+                <button class="btn_view">Design</button>
+                
+            </section>
+            
+            <section class="inactive">
+                
+                <div class="viewicon viewcode"></div>
+                
+                <button class="btn_view">Code</button>
+                
+            </section>
+        
+            <div data-montage-id="disabledCondition" class="panelDisabled"></div>
+        
+        </div>
+        
+    </body>
+    
 </html>
author	Jose Antonio Marquez	2012-07-12 16:06:11 -0700
committer	Jose Antonio Marquez	2012-07-12 16:06:11 -0700
commit	2dd8fabacf115cf32e38115a472f3f2c59926135 (patch)
tree	ecb1c5b7158f9da162a3204dae03a06a02f63ff3 /js/components/layout/document-bar.reel/document-bar.html
parent	688e22dc367f37d4b8734a37daa3b823ea450295 (diff)
download	ninja-2dd8fabacf115cf32e38115a472f3f2c59926135.tar.gz

diff --git a/js/components/layout/document-bar.reel/document-bar.html b/js/components/layout/document-bar.reel/document-bar.html index 101f716d..69f8107f 100755 --- a/js/components/layout/document-bar.reel/document-bar.html +++ b/js/components/layout/document-bar.reel/document-bar.html
@@ -29,62 +29,90 @@ CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
29	ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE	29	ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
30	POSSIBILITY OF SUCH DAMAGE.	30	POSSIBILITY OF SUCH DAMAGE.
31	</copyright> -->	31	</copyright> -->
		32
32	<html>	33	<html>
33		34
34	<head>	35	<head>
35	<meta http-equiv="content-type" content="text/html; charset=utf-8" />	36
36	<link rel="stylesheet" type="text/css" href="document-bar.css">	37	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		38
		39	<link rel="stylesheet" type="text/css" href="document-bar.css">
37		40
38	<script type="text/montage-serialization">	41	<script type="text/montage-serialization">
39	{	42	{
40	"hottext1": {	43	"hottext1": {
41	"prototype": "js/components/hottextunit.reel[HotTextUnit]",	44	"prototype": "js/components/hottextunit.reel[HotTextUnit]",
42	"properties": {	45	"properties": {
43	"element": {"#": "zoomControlHT"},	46	"element": {"#": "zoomControlHT"},
44	"minValue":25,	47	"minValue":25,
45	"maxValue" :2000,	48	"maxValue" :2000,
46	"stepSize" :5,	49	"stepSize" :5,
47	"acceptableUnits" : ["%"],	50	"acceptableUnits" : ["%"],
48	"units" : "%"	51	"units" : "%"
		52	},
		53	"bindings": {
		54	"value": {
		55	"boundObject": {"@": "owner"},
		56	"boundObjectPropertyPath": "zoomFactor",
		57	"oneway": false
		58	}
		59	}
49	},	60	},
50	"bindings": {	61
51	"value": {	62	"disable": {
52	"boundObject": {"@": "owner"},	63	"prototype": "montage/ui/condition.reel",
53	"boundObjectPropertyPath": "zoomFactor",	64	"properties": {
54	"oneway": false	65	"element": {"#": "disabledCondition"}
		66	},
		67	"bindings": {
		68	"condition": {"<-": "@owner.disabled"}
55	}	69	}
56	}
57	},
58
59	"disable": {
60	"prototype": "montage/ui/condition.reel",
61	"properties": {
62	"element": {"#": "disabledCondition"}
63	},	70	},
64	"bindings": {	71
65	"condition": {"<-": "@owner.disabled"}	72	"owner": {
66	}	73	"prototype": "js/components/layout/document-bar.reel",
67	},	74	"properties": {
68		75	"element": {"#": "documentBar"},
69	"owner": {	76	"zoomControl": {"@": "hottext1"}
70	"prototype": "js/components/layout/document-bar.reel",	77	}
71	"properties": {
72	"element": {"#": "documentBar"},
73	"zoomControl": {"@": "hottext1"}
74	}	78	}
75	}	79	}
76	}	80	</script>
77	</script>
78
79		81
80	</head>	82	</head>
81		83
82	<body>	84	<body>
83	<div data-montage-id="documentBar">	85
84	<input class="zoomHotText label" data-montage-id="zoomControlHT"/>	86	<div data-montage-id="documentBar">
85	<span class="design-view disable" data-montage-id="design">Design View</span>	87
86	<span class="code-view disable" data-montage-id="code">Code View</span>	88	<section>
87	<div data-montage-id="disabledCondition" class="panelDisabled"></div>	89
88	</div>	90	<div class="zoomicon"></div>
89	</body>	91
		92	<input data-montage-id="zoomControlHT" class="zoomHotText label" />
		93
		94	</section>
		95
		96	<section>
		97
		98	<div class="viewicon viewdesign"></div>
		99
		100	<button class="btn_view">Design</button>
		101
		102	</section>
		103
		104	<section class="inactive">
		105
		106	<div class="viewicon viewcode"></div>
		107
		108	<button class="btn_view">Code</button>
		109
		110	</section>
		111
		112	<div data-montage-id="disabledCondition" class="panelDisabled"></div>
		113
		114	</div>
		115
		116	</body>
		117
90	</html>	118	</html>