diff options
Diffstat (limited to 'js/components/layout/document-entry.reel')
-rwxr-xr-x | js/components/layout/document-entry.reel/close_button.gif | bin | 139 -> 0 bytes | |||
-rwxr-xr-x | js/components/layout/document-entry.reel/document-entry.css | 20 | ||||
-rwxr-xr-x | js/components/layout/document-entry.reel/document-entry.html | 21 | ||||
-rwxr-xr-x | js/components/layout/document-entry.reel/document-entry.js | 58 |
4 files changed, 36 insertions, 63 deletions
diff --git a/js/components/layout/document-entry.reel/close_button.gif b/js/components/layout/document-entry.reel/close_button.gif deleted file mode 100755 index 00b5904b..00000000 --- a/js/components/layout/document-entry.reel/close_button.gif +++ /dev/null | |||
Binary files differ | |||
diff --git a/js/components/layout/document-entry.reel/document-entry.css b/js/components/layout/document-entry.reel/document-entry.css index 4601974f..87880b8d 100755 --- a/js/components/layout/document-entry.reel/document-entry.css +++ b/js/components/layout/document-entry.reel/document-entry.css | |||
@@ -19,7 +19,16 @@ | |||
19 | min-width:0px; | 19 | min-width:0px; |
20 | } | 20 | } |
21 | 21 | ||
22 | .documentEntry img { | 22 | .documentCloseButton { |
23 | display: inline; | ||
24 | -webkit-appearance: none; | ||
25 | outline: none; | ||
26 | cursor: pointer; | ||
27 | border: 0px; | ||
28 | background: #474747 url(../../../../images/documentsTab/close_button.gif) center center no-repeat; | ||
29 | } | ||
30 | |||
31 | .documentEntry button { | ||
23 | opacity: 0.5; /* 50% */ | 32 | opacity: 0.5; /* 50% */ |
24 | width: 12px; | 33 | width: 12px; |
25 | max-width:12px; | 34 | max-width:12px; |
@@ -29,17 +38,14 @@ | |||
29 | transition: opacity 0.2s ease; | 38 | transition: opacity 0.2s ease; |
30 | } | 39 | } |
31 | 40 | ||
32 | .documentEntry:hover, | 41 | .documentEntry.selected { |
33 | .documentEntry:active, | 42 | background-color:#7F7F7F; |
34 | .documentEntry.activeTab { | ||
35 | /*background-color: #7f7f7f; *//* rgb(127, 127, 127); */ | ||
36 | } | 43 | } |
37 | 44 | ||
38 | .documentEntry img:hover { | 45 | .documentEntry button:hover { |
39 | opacity: 1.0; /* 100% */ | 46 | opacity: 1.0; /* 100% */ |
40 | } | 47 | } |
41 | 48 | ||
42 | |||
43 | .documentEntry span.dirty:before{ | 49 | .documentEntry span.dirty:before{ |
44 | content: "*"; | 50 | content: "*"; |
45 | display:inline; | 51 | display:inline; |
diff --git a/js/components/layout/document-entry.reel/document-entry.html b/js/components/layout/document-entry.reel/document-entry.html index 679ebb62..e68d17c5 100755 --- a/js/components/layout/document-entry.reel/document-entry.html +++ b/js/components/layout/document-entry.reel/document-entry.html | |||
@@ -15,18 +15,31 @@ | |||
15 | "prototype": "js/components/layout/document-entry.reel", | 15 | "prototype": "js/components/layout/document-entry.reel", |
16 | "properties": { | 16 | "properties": { |
17 | "element": {"#": "documentEntry"}, | 17 | "element": {"#": "documentEntry"}, |
18 | "label": {"#": "name"}, | 18 | "label": {"#": "name"} |
19 | "activeBack": {"#": "isActive"} | ||
20 | } | 19 | } |
20 | }, | ||
21 | |||
22 | "closeButton": { | ||
23 | "prototype": "montage/ui/button.reel", | ||
24 | "properties": { | ||
25 | "element": {"#": "close-btn"}, | ||
26 | "identifier": "closeButton" | ||
27 | }, | ||
28 | "listeners": [ | ||
29 | { | ||
30 | "type": "action", | ||
31 | "listener": {"@": "owner"}, | ||
32 | "capture": false | ||
33 | } | ||
34 | ] | ||
21 | } | 35 | } |
22 | } | 36 | } |
23 | </script> | 37 | </script> |
24 | </head> | 38 | </head> |
25 | <body> | 39 | <body> |
26 | <li data-montage-id="documentEntry" class="documentEntry"> | 40 | <li data-montage-id="documentEntry" class="documentEntry"> |
27 | <div data-montage-id="isActive"></div> | ||
28 | <span data-montage-id="name"></span> | 41 | <span data-montage-id="name"></span> |
29 | <img src="js/components/layout/document-entry.reel/close_button.gif"> | 42 | <button type="button" class="documentCloseButton" data-montage-id="close-btn"></button> |
30 | </li> | 43 | </li> |
31 | </body> | 44 | </body> |
32 | </html> \ No newline at end of file | 45 | </html> \ No newline at end of file |
diff --git a/js/components/layout/document-entry.reel/document-entry.js b/js/components/layout/document-entry.reel/document-entry.js index 50b3624c..94056007 100755 --- a/js/components/layout/document-entry.reel/document-entry.js +++ b/js/components/layout/document-entry.reel/document-entry.js | |||
@@ -9,15 +9,7 @@ var Component = require("montage/ui/component").Component; | |||
9 | 9 | ||
10 | exports.DocumentEntry = Montage.create(Component, { | 10 | exports.DocumentEntry = Montage.create(Component, { |
11 | 11 | ||
12 | dirty: { value: null }, | ||
13 | |||
14 | _uuid: { | ||
15 | value: null, | ||
16 | enumerable: false | ||
17 | }, | ||
18 | |||
19 | _document: { | 12 | _document: { |
20 | enumerable: false, | ||
21 | value: null | 13 | value: null |
22 | }, | 14 | }, |
23 | 15 | ||
@@ -27,20 +19,17 @@ exports.DocumentEntry = Montage.create(Component, { | |||
27 | return this._document; | 19 | return this._document; |
28 | }, | 20 | }, |
29 | set: function(value) { | 21 | set: function(value) { |
30 | |||
31 | if (this._document === value) { | 22 | if (this._document === value) { |
32 | return; | 23 | return; |
33 | } | 24 | } |
34 | 25 | ||
35 | this._document = value; | 26 | this._document = value; |
36 | |||
37 | if(value) { | ||
38 | this._uuid = value.uuid; | ||
39 | } | ||
40 | } | 27 | } |
41 | }, | 28 | }, |
42 | 29 | ||
43 | _name: { value: null }, | 30 | _name: { |
31 | value: null | ||
32 | }, | ||
44 | 33 | ||
45 | name: { | 34 | name: { |
46 | enumerable: false, | 35 | enumerable: false, |
@@ -58,25 +47,6 @@ exports.DocumentEntry = Montage.create(Component, { | |||
58 | } | 47 | } |
59 | }, | 48 | }, |
60 | 49 | ||
61 | _active: { | ||
62 | enumerable: false, | ||
63 | value: null | ||
64 | }, | ||
65 | |||
66 | active: { | ||
67 | get: function() { | ||
68 | return this._active; | ||
69 | }, | ||
70 | set: function(value) { | ||
71 | var previousValue = this._active; | ||
72 | this._active = value; | ||
73 | |||
74 | if (previousValue !== this._active) { | ||
75 | this.needsDraw = true; | ||
76 | } | ||
77 | } | ||
78 | }, | ||
79 | |||
80 | _saveFlag: { | 50 | _saveFlag: { |
81 | value: false | 51 | value: false |
82 | }, | 52 | }, |
@@ -93,21 +63,11 @@ exports.DocumentEntry = Montage.create(Component, { | |||
93 | } | 63 | } |
94 | }, | 64 | }, |
95 | 65 | ||
96 | prepareForDraw: { | ||
97 | enumerable: false, | ||
98 | value: function() { | ||
99 | this.element.addEventListener("click", this, false); | ||
100 | } | ||
101 | }, | ||
102 | |||
103 | |||
104 | draw: { | 66 | draw: { |
105 | enumerable: false, | 67 | enumerable: false, |
106 | value: function() { | 68 | value: function() { |
107 | this.label.innerText = this._name ? this._name : ""; | 69 | this.label.innerText = this._name ? this._name : ""; |
108 | 70 | ||
109 | this._active ? this.element.classList.add("activeTab") : this.element.classList.remove("activeTab"); | ||
110 | |||
111 | if(this.saveFlag) { | 71 | if(this.saveFlag) { |
112 | this.label.classList.add("dirty"); | 72 | this.label.classList.add("dirty"); |
113 | } else { | 73 | } else { |
@@ -116,15 +76,9 @@ exports.DocumentEntry = Montage.create(Component, { | |||
116 | } | 76 | } |
117 | }, | 77 | }, |
118 | 78 | ||
119 | handleClick: { | 79 | handleCloseButtonAction: { |
120 | value: function(event) { | 80 | value: function() { |
121 | if(event._event.target.nodeName === "IMG") { | 81 | this.application.ninja.documentController.closeFile(this.document); |
122 | this.application.ninja.documentController.closeFile(this.application.ninja.documentController._findDocumentByUUID(this._uuid)); | ||
123 | } else { | ||