diff options
Diffstat (limited to 'js/components/ui/FilePicker/pickerNavigator.reel')
3 files changed, 132 insertions, 59 deletions
diff --git a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css index 2d9f1189..9c85c6b5 100644 --- a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css +++ b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css | |||
@@ -12,7 +12,11 @@ | |||
12 | padding-left:15px; | 12 | padding-left:15px; |
13 | padding-bottom:15px; | 13 | padding-bottom:15px; |
14 | color:#ffffff; | 14 | color:#ffffff; |
15 | background-color:#313131; | 15 | background-color:#494949; |
16 | font-family: 'Droid Sans', sans-serif; | ||
17 | border-radius: 8px; | ||
18 | box-shadow: 0px 0px 8px rgba(0, 0, 0, .8); | ||
19 | text-shadow: 1px 1px 1px #000; | ||
16 | } | 20 | } |
17 | 21 | ||
18 | .picker .pickerHeader{ | 22 | .picker .pickerHeader{ |
@@ -20,7 +24,7 @@ | |||
20 | } | 24 | } |
21 | 25 | ||
22 | .picker .container{ | 26 | .picker .container{ |
23 | border: 1px groove #000000; | 27 | border: 1px solid #000000; |
24 | overflow: auto; | 28 | overflow: auto; |
25 | background-color:#5f5f5f; | 29 | background-color:#5f5f5f; |
26 | } | 30 | } |
@@ -39,21 +43,26 @@ | |||
39 | width:75%; | 43 | width:75%; |
40 | height:88%; | 44 | height:88%; |
41 | overflow: hidden; | 45 | overflow: hidden; |
46 | border-left: none; | ||
42 | } | 47 | } |
43 | 48 | ||
44 | .picker .right-top{ | 49 | .picker .right-top{ |
45 | border: 1px groove #000000; | 50 | border-right: 1px solid #000000; |
46 | overflow: auto; | 51 | overflow: auto; |
47 | min-height:150px; | 52 | min-height:150px; |
48 | height:75%; | 53 | height:75%; |
49 | width:auto; | 54 | width:auto; |
55 | border-right: none; | ||
50 | } | 56 | } |
51 | 57 | ||
52 | .picker .right-bottom{ | 58 | .picker .right-bottom{ |
53 | border: 1px groove #000000; | 59 | border: 1px solid #000000; |
60 | border-left: none; | ||
54 | overflow: auto; | 61 | overflow: auto; |
55 | height:20%; | 62 | height:20%; |
56 | padding: 10px; | 63 | padding: 10px; |
64 | border-bottom: none; | ||
65 | border-right: none; | ||
57 | } | 66 | } |
58 | 67 | ||
59 | .picker .driversList{ | 68 | .picker .driversList{ |
@@ -63,6 +72,7 @@ | |||
63 | 72 | ||
64 | .picker .driversList:hover{ | 73 | .picker .driversList:hover{ |
65 | cursor:pointer; | 74 | cursor:pointer; |
75 | background-color: #444444; | ||
66 | } | 76 | } |
67 | 77 | ||
68 | .picker .highlighted{ | 78 | .picker .highlighted{ |
@@ -193,8 +203,49 @@ | |||
193 | pointer:auto; | 203 | pointer:auto; |
194 | } | 204 | } |
195 | 205 | ||
206 | .picker .buttons button { | ||
207 | float: left; | ||
208 | width: 100px; | ||
209 | margin-top: 3px; | ||
210 | } | ||
211 | |||
196 | .picker .okButton{ | 212 | .picker .okButton{ |
197 | margin-right:25px; | 213 | margin: 0px 22px 0px 8px; |
214 | /* | ||
215 | margin-right:25px; | ||
216 | -webkit-box-align: center; | ||
217 | text-align: center; | ||
218 | cursor: default; | ||
219 | padding: 0px 6px 0px; | ||
220 | border:2px solid #d1d1d1; | ||
221 | background-color: #e1e1e1; | ||
222 | box-sizing: border-box; | ||
223 | border-radius:10px; | ||
224 | background-image: -webkit-linear-gradient(bottom, #e1e1e1 13%, #d1d1d1 58%, #e1e1e1 40%); | ||
225 | cursor:pointer; | ||
226 | */ | ||
227 | } | ||
228 | |||
229 | .picker .cancelButton{ | ||
230 | /* | ||
231 | -webkit-box-align: center; | ||
232 | text-align: center; | ||
233 | cursor: default; | ||
234 | padding: 0px 6px 0px; | ||
235 | border:2px solid #d1d1d1; | ||
236 | background-color: #e1e1e1; | ||
237 | box-sizing: border-box; | ||
238 | border-radius:10px; | ||
239 | background-image: -webkit-linear-gradient(bottom, #e1e1e1 13%, #d1d1d1 58%, #e1e1e1 40%); | ||
240 | cursor:pointer; | ||
241 | */ | ||
242 | } | ||
243 | |||
244 | .picker input[type="button"]:disabled{ | ||
245 | background-color: #a1a1a1; | ||
246 | border:2px solid #a1a1a1; | ||
247 | background-image:none; | ||
248 | cursor:auto; | ||
198 | } | 249 | } |
199 | 250 | ||
200 | 251 | ||
diff --git a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.html b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.html index bf421247..20cb0c68 100644..100755 --- a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.html +++ b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.html | |||
@@ -10,7 +10,6 @@ | |||
10 | <link rel="stylesheet" type="text/css" href="pickerNavigator.css"> | 10 | <link rel="stylesheet" type="text/css" href="pickerNavigator.css"> |
11 | <script type="text/montage-serialization"> | 11 | <script type="text/montage-serialization"> |
12 | { | 12 | { |
13 | |||
14 | "owner":{ | 13 | "owner":{ |
15 | "module": "js/components/ui/FilePicker/pickerNavigator.reel", | 14 | "module": "js/components/ui/FilePicker/pickerNavigator.reel", |
16 | "name":"PickerNavigator", | 15 | "name":"PickerNavigator", |
@@ -68,10 +67,10 @@ | |||
68 | <div id="right-bottom" class="right-bottom"></div> | 67 | <div id="right-bottom" class="right-bottom"></div> |
69 | </div> | 68 | </div> |
70 | <div class="buttons"> | 69 | <div class="buttons"> |
71 | <input id="cancelButton" type="button" value="CANCEL" class="cancelButton" /> | 70 | <button id="cancelButton" value="CANCEL" class="cancelButton nj-skinned">Cancel</button> |
72 | <input id="okButton" disabled="true" type="button" value="OK" class="okButton" /> | 71 | <button id="okButton" disabled="true" value="OK" class="okButton nj-skinned">Ok</button> |
73 | </div> | 72 | </div> |
74 | <div id="filters" class="filters"> | 73 | <div id="filters" class="filters" style="display:block;"> |
75 | <div class="dropdown hide"></div> | 74 | <div class="dropdown hide"></div> |
76 | <span class="dropdownArrow">▼</span> | 75 | <span class="dropdownArrow">▼</span> |
77 | <span id="filterVal" class="filterVal">*.*</span> | 76 | <span id="filterVal" class="filterVal">*.*</span> |
diff --git a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js index 299d44f5..6b0d92f7 100644 --- a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js +++ b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js | |||
@@ -7,7 +7,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
7 | var Montage = require("montage/core/core").Montage, | 7 | var Montage = require("montage/core/core").Montage, |
8 | Component = require("montage/ui/component").Component, | 8 | Component = require("montage/ui/component").Component, |
9 | iconsListModule = require("js/components/ui/icon-list-basic/iconsList.reel"), | 9 | iconsListModule = require("js/components/ui/icon-list-basic/iconsList.reel"), |
10 | filePickerControllerModule = require("js/components/ui/FilePicker/file-picker-controller"), | ||
11 | treeModule = require("js/components/ui/tree-basic/tree.reel"); | 10 | treeModule = require("js/components/ui/tree-basic/tree.reel"); |
12 | 11 | ||
13 | var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { | 12 | var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { |
@@ -150,6 +149,12 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { | |||
150 | leftNav.appendChild(newDiv); | 149 | leftNav.appendChild(newDiv); |
151 | if(dirObj.uri === this.pickerModel.currentRoot){ | 150 | if(dirObj.uri === this.pickerModel.currentRoot){ |
152 | newDiv.classList.add("highlighted"); | 151 | newDiv.classList.add("highlighted"); |
152 | //enable ok for logical drive selections, when in directory selection mode | ||
153 | if(this.pickerModel.inFileMode === false){ | ||
154 | this.okButton.removeAttribute("disabled"); | ||
155 | //put into selectedItems..currently single selection is supported | ||
156 | this.selectedItems = [dirObj.uri]; | ||
157 | } | ||
153 | } | 158 | } |
154 | 159 | ||
155 | newDiv.addEventListener("click", function(evt){that.handleTopLevelDirectoryClicks(evt, dirObj);}, false); | 160 | newDiv.addEventListener("click", function(evt){that.handleTopLevelDirectoryClicks(evt, dirObj);}, false); |
@@ -209,26 +214,27 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { | |||
209 | this.refreshButton.addEventListener("click", this, false);//refresh - gets from file system directly | 214 | this.refreshButton.addEventListener("click", this, false);//refresh - gets from file system directly |
210 | this.backArrow.addEventListener("click", this, false); | 215 | this.backArrow.addEventListener("click", this, false); |
211 | this.forwardArrow.addEventListener("click", this, false); | 216 | this.forwardArrow.addEventListener("click", this, false); |
212 | this.okButton.addEventListener("click", this, false); | ||
213 | this.cancelButton.addEventListener("click", this, false); | ||
214 | |||
215 | //populate filters | ||