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
parent: 688e22dc367f37d4b8734a37daa3b823ea450295 (diff)
download: ninja-2dd8fabacf115cf32e38115a472f3f2c59926135.tar.gz
3 files changed, 145 insertions, 75 deletions
diff --git a/js/components/layout/document-bar.reel/document-bar.css b/js/components/layout/document-bar.reel/document-bar.css
index a356dd1a..cb9accdd 100755
--- a/js/components/layout/document-bar.reel/document-bar.css
+++ b/js/components/layout/document-bar.reel/document-bar.css
@@ -28,46 +28,84 @@ 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> */
-.documentBar {
-    position: relative;
+.timelineResizer {
-    overflow: hidden;
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(19,19,19,1)), color-stop(50%,rgba(44,44,44,1)), color-stop(100%,rgba(19,19,19,1))) !important;
-    color: white;
 }
-.documentBar .active {
+.documentBar {
-    text-decoration: underline;
+    background: rgb(40, 40, 40);
-    cursor: pointer;
+    height: 20px !important;
-    color: #666666;
+    color: #FFF;
+    font-size: 11px;
 }
-.documentBar .active:hover {
+.documentBar section{
-    color: #ffffff;
+    background: rgb(60, 60, 60);
+    float: left;
+    height: 100%;
+    padding: 0px 4px;
+    border-right: 2px solid #000;
 }
-.documentBar .selected {
+.documentBar .zoomicon {
-    text-decoration: underline;
+    background-image: url('../../../../images/tools/Tool-Zoom.png');
-    cursor: default;
+    background-repeat: no-repeat;
-    color: #ffffff;
+    background-position: center center;
+    background-size: 75%;
+    width: 18px;
+    height: 18px;
+    float: left;
 }
-.documentBar .selected {
+.documentBar .zoomHotText {
-    color: #ffffff;
+    font-size: 11px;
+    width: 40px;
+    margin: 0 0 0 2px;
+    text-align: center;
 }
-.documentBar span{
+.documentBar .btn_view {
-    text-decoration: none;
+    display: block;
+    background: none;
+    margin: 3px 0 0 0;
+    padding: 0;
+    border: none;
+    color: #FFF;
+    width: 44px;
+    text-transform: uppercase;
+    text-align: left;
+    float: left;
    cursor: pointer;
-    color: #3a3a3a;
 }
-.documentBar .zoomHotText span {
+.documentBar .viewicon {
-    color: white;
+    background-repeat: no-repeat;
+    background-position: center center;
+    width: 16px;
+    height: 16px;
+    margin: 2px 4px 0 0;
+    float: left;
 }
-.documentBar .enable{
+.documentBar .viewcode {
-    color: #d7d7d7;
+    background-image: url('../../../../images/optionsbar/text/AlignLeft.png');
+    background-size: 80%;
 }
-.documentBar .disable{
+.documentBar .viewdesign {
-    color: #3a3a3a;
+    background-image: url('../../../../js/panels/Color/colorpanelpopup.reel/img/icon_bitmap.png');
+    background-size: 90%;
 }
+.documentBar section.inactive .viewicon{
+    opacity: .5;
+}
+.documentBar section.inactive button {
+    opacity: .5;
+}
+.documentBar section.inactive button:hover {
+    opacity: 1;
+}
+\ No newline at end of file
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>
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
parent	688e22dc367f37d4b8734a37daa3b823ea450295 (diff)
download	ninja-2dd8fabacf115cf32e38115a472f3f2c59926135.tar.gz

diff --git a/js/components/layout/document-bar.reel/document-bar.css b/js/components/layout/document-bar.reel/document-bar.css index a356dd1a..cb9accdd 100755 --- a/js/components/layout/document-bar.reel/document-bar.css +++ b/js/components/layout/document-bar.reel/document-bar.css
@@ -28,46 +28,84 @@ CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
28	ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE	28	ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
29	POSSIBILITY OF SUCH DAMAGE.	29	POSSIBILITY OF SUCH DAMAGE.
30	</copyright> */	30	</copyright> */
31	.documentBar {	31
32	position: relative;	32	.timelineResizer {
33	overflow: hidden;	33	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(19,19,19,1)), color-stop(50%,rgba(44,44,44,1)), color-stop(100%,rgba(19,19,19,1))) !important;
34	color: white;
35	}	34	}
36		35
37	.documentBar .active {	36	.documentBar {
38	text-decoration: underline;	37	background: rgb(40, 40, 40);
39	cursor: pointer;	38	height: 20px !important;
40	color: #666666;	39	color: #FFF;
		40	font-size: 11px;
41	}	41	}
42		42
43	.documentBar .active:hover {	43	.documentBar section{
44	color: #ffffff;	44	background: rgb(60, 60, 60);
		45	float: left;
		46	height: 100%;
		47	padding: 0px 4px;
		48	border-right: 2px solid #000;
45	}	49	}
46		50
47	.documentBar .selected {	51	.documentBar .zoomicon {
48	text-decoration: underline;	52	background-image: url('../../../../images/tools/Tool-Zoom.png');
49	cursor: default;	53	background-repeat: no-repeat;
50	color: #ffffff;	54	background-position: center center;
		55	background-size: 75%;
		56	width: 18px;
		57	height: 18px;
		58	float: left;
51	}	59	}
52		60
53	.documentBar .selected {	61	.documentBar .zoomHotText {
54	color: #ffffff;	62	font-size: 11px;
		63	width: 40px;
		64	margin: 0 0 0 2px;
		65	text-align: center;
55	}	66	}
56		67
57	.documentBar span{	68	.documentBar .btn_view {
58	text-decoration: none;	69	display: block;
		70	background: none;
		71	margin: 3px 0 0 0;
		72	padding: 0;
		73	border: none;
		74	color: #FFF;
		75	width: 44px;
		76	text-transform: uppercase;
		77	text-align: left;
		78	float: left;
59	cursor: pointer;	79	cursor: pointer;
60	color: #3a3a3a;
61	}	80	}
62		81
63	.documentBar .zoomHotText span {	82	.documentBar .viewicon {
64	color: white;	83	background-repeat: no-repeat;
		84	background-position: center center;
		85	width: 16px;
		86	height: 16px;
		87	margin: 2px 4px 0 0;
		88	float: left;
65	}	89	}
66		90
67	.documentBar .enable{	91	.documentBar .viewcode {
68	color: #d7d7d7;	92	background-image: url('../../../../images/optionsbar/text/AlignLeft.png');
		93	background-size: 80%;
69	}	94	}
70		95
71	.documentBar .disable{	96	.documentBar .viewdesign {
72	color: #3a3a3a;	97	background-image: url('../../../../js/panels/Color/colorpanelpopup.reel/img/icon_bitmap.png');
		98	background-size: 90%;
73	}	99	}
		100
		101	.documentBar section.inactive .viewicon{
		102	opacity: .5;
		103	}
		104
		105	.documentBar section.inactive button {
		106	opacity: .5;
		107	}
		108
		109	.documentBar section.inactive button:hover {
		110	opacity: 1;
		111	} \ No newline at end of file


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>