aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorJose Antonio Marquez2012-07-12 16:06:11 -0700
committerJose Antonio Marquez2012-07-12 16:06:11 -0700
commit2dd8fabacf115cf32e38115a472f3f2c59926135 (patch)
treeecb1c5b7158f9da162a3204dae03a06a02f63ff3 /js
parent688e22dc367f37d4b8734a37daa3b823ea450295 (diff)
downloadninja-2dd8fabacf115cf32e38115a472f3f2c59926135.tar.gz
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.
Diffstat (limited to 'js')
-rwxr-xr-xjs/components/layout/document-bar.reel/document-bar.css88
-rwxr-xr-xjs/components/layout/document-bar.reel/document-bar.html124
-rwxr-xr-xjs/ninja.reel/ninja.html8
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)
28ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE 28ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
29POSSIBILITY OF SUCH DAMAGE. 29POSSIBILITY 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)
29ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE 29ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
30POSSIBILITY OF SUCH DAMAGE. 30POSSIBILITY 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>