diff options
Diffstat (limited to 'js/components/layout/document-bar.reel')
-rwxr-xr-x | js/components/layout/document-bar.reel/document-bar.css | 92 | ||||
-rwxr-xr-x | js/components/layout/document-bar.reel/document-bar.html | 124 |
2 files changed, 143 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..b86855b7 100755 --- a/js/components/layout/document-bar.reel/document-bar.css +++ b/js/components/layout/document-bar.reel/document-bar.css | |||
@@ -28,46 +28,88 @@ 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-radial-gradient(center, ellipse cover, rgba(100, 100, 100, .9) 40%, rgba(100, 100, 100, .4) 50%, rgba(100, 100, 100, 0) 51%), -webkit-radial-gradient(center, ellipse cover, rgba(100, 100, 100, .9) 40%, rgba(100, 100, 100, .4) 50%, rgba(100, 100, 100, 0) 51%), -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(60, 60, 60)), color-stop(70%, rgb(30, 30, 30)), color-stop(100%, rgb(25, 25, 25))), -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(10, 10, 10)), color-stop(50%, rgb(20, 20, 20)), color-stop(100%, rgb(10, 10, 10))) !important; |
34 | color: white; | 34 | background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important; |
35 | background-position: 49.5% center, 50.5% center, center center, left top !important; | ||
36 | background-size: 5px 5px, 5px 5px, 3% 100%, 100% 100%; | ||
35 | } | 37 | } |
36 | 38 | ||
37 | .documentBar .active { | 39 | .documentBar { |
38 | text-decoration: underline; | 40 | background: rgb(40, 40, 40); |
39 | cursor: pointer; | 41 | height: 20px !important; |
40 | color: #666666; | 42 | color: #FFF; |
43 | font-size: 11px; | ||
41 | } | 44 | } |
42 | 45 | ||
43 | .documentBar .active:hover { | 46 | .documentBar section{ |
44 | color: #ffffff; | 47 | background: rgb(60, 60, 60); |
48 | float: left; | ||
49 | height: 100%; | ||
50 | padding: 0px 4px; | ||
51 | border-right: 2px solid #000; | ||
45 | } | 52 | } |
46 | 53 | ||
47 | .documentBar .selected { | 54 | .documentBar .zoomicon { |
48 | text-decoration: underline; | 55 | background-image: url('../../../../images/tools/Tool-Zoom.png'); |
49 | cursor: default; | 56 | background-repeat: no-repeat; |
50 | color: #ffffff; | 57 | background-position: center center; |
58 | background-size: 75%; | ||
59 | width: 18px; | ||
60 | height: 18px; | ||
61 | float: left; | ||
51 | } | 62 | } |
52 | 63 | ||
53 | .documentBar .selected { | 64 | .documentBar .zoomHotText { |
54 | color: #ffffff; | 65 | font-size: 11px; |
66 | width: 40px; | ||
67 | margin: 0 0 0 2px; | ||
68 | text-align: center; | ||
55 | } | 69 | } |
56 | 70 | ||
57 | .documentBar span{ | 71 | .documentBar .btn_view { |
58 | text-decoration: none; | 72 | display: block; |
73 | background: none; | ||
74 | margin: 3px 0 0 0; | ||
75 | padding: 0; | ||
76 | border: none; | ||
77 | color: #FFF; | ||
78 | width: 44px; | ||
79 | text-transform: uppercase; | ||
80 | text-align: left; | ||
81 | float: left; | ||
59 | cursor: pointer; | 82 | cursor: pointer; |
60 | color: #3a3a3a; | 83 | font-size: 11px; |
61 | } | 84 | } |
62 | 85 | ||
63 | .documentBar .zoomHotText span { | 86 | .documentBar .viewicon { |
64 | color: white; | 87 | background-repeat: no-repeat; |
88 | background-position: center center; | ||
89 | width: 16px; | ||
90 | height: 16px; | ||
91 | margin: 2px 4px 0 0; | ||
92 | float: left; | ||
65 | } | 93 | } |
66 | 94 | ||
67 | .documentBar .enable{ | 95 | .documentBar .viewcode { |
68 | color: #d7d7d7; | 96 | background-image: url('../../../../images/optionsbar/text/AlignLeft.png'); |
97 | background-size: 80%; | ||
69 | } | 98 | } |
70 | 99 | ||
71 | .documentBar .disable{ | 100 | .documentBar .viewdesign { |
72 | color: #3a3a3a; | 101 | background-image: url('../../../../js/panels/Color/colorpanelpopup.reel/img/icon_bitmap.png'); |
102 | background-size: 90%; | ||
73 | } | 103 | } |
104 | |||
105 | .documentBar section.inactive .viewicon{ | ||
106 | opacity: .5; | ||
107 | } | ||
108 | |||
109 | .documentBar section.inactive button { | ||
110 | opacity: .5; | ||
111 | } | ||
112 | |||
113 | .documentBar section.inactive button:hover { | ||
114 | opacity: 1; | ||
115 | } \ 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> | < |