diff options
Diffstat (limited to 'js/components/layout')
-rwxr-xr-x | js/components/layout/document-bar.reel/document-bar.css | 88 | ||||
-rwxr-xr-x | js/components/layout/document-bar.reel/document-bar.html | 124 |
2 files changed, 139 insertions, 73 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) | |||
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> | 90 | <div class="zoomicon"></div> |