Skip to content

Commit 0ae0d4c

Browse files
SamyPesseSamyPesse
committed
Add new element to tab ui: lateral bar
(to be improved)
1 parent 2cab6d3 commit 0ae0d4c

9 files changed

Lines changed: 172 additions & 129 deletions

File tree

‎addons/editor/templates/directory.html‎

Lines changed: 62 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,66 @@
1-
<div class="tab-panel-toolbar files-toolbar btn-toolbar">
2-
<div class="btn-group btn-group-sm">
3-
<a href="#" class="btn btn-default action-file-create">
4-
<i class="fa fa-file-o"></i> New file
5-
</a>
6-
<a href="#" class="btn btn-default action-file-mkdir">
7-
<i class="fa fa-folder-o"></i> New folder
8-
</a>
9-
</div>
10-
<div class="btn-group btn-group-sm">
11-
<a href="#" data-filesselection class="btn btn-default action-file-rename">
12-
<i class="fa fa-pencil"></i> Rename
13-
</a>
14-
<a href="#" data-filesselection class="btn btn-default action-file-delete">
15-
<i class="fa fa-trash-o"></i> Delete
16-
</a>
17-
</div>
18-
<div class="btn-group btn-group-sm">
1+
<div class="tab-panel-body">
2+
<div class="tab-panel-toolbar files-toolbar btn-toolbar">
193
<div class="btn-group btn-group-sm">
20-
<a href="#" class="btn btn-default action-file-upload-select" data-toggle="dropdown"><i class="fa fa-upload"></i> <span class="percent"></span></a>
21-
<ul class="dropdown-menu">
22-
<li><a href="#" class="action-file-upload">Upload files</a></li>
23-
<li><a href="#" class="action-file-upload-directory">Upload directory</a></li>
24-
</ul>
4+
<a href="#" class="btn btn-default action-file-create">
5+
<i class="fa fa-file-o"></i> New file
6+
</a>
7+
<a href="#" class="btn btn-default action-file-mkdir">
8+
<i class="fa fa-folder-o"></i> New folder
9+
</a>
10+
</div>
11+
<div class="btn-group btn-group-sm">
12+
<a href="#" data-filesselection class="btn btn-default action-file-rename">
13+
<i class="fa fa-pencil"></i> Rename
14+
</a>
15+
<a href="#" data-filesselection class="btn btn-default action-file-delete">
16+
<i class="fa fa-trash-o"></i> Delete
17+
</a>
18+
</div>
19+
<div class="btn-group btn-group-sm">
20+
<div class="btn-group btn-group-sm">
21+
<a href="#" class="btn btn-default action-file-upload-select" data-toggle="dropdown"><i class="fa fa-upload"></i> <span class="percent"></span></a>
22+
<ul class="dropdown-menu">
23+
<li><a href="#" class="action-file-upload">Upload files</a></li>
24+
<li><a href="#" class="action-file-upload-directory">Upload directory</a></li>
25+
</ul>
26+
</div>
27+
<a href="#" data-filesselection class="btn btn-default action-file-download"><i class="fa fa-download"></i></a>
28+
</div>
29+
<div class="btn-group btn-group-sm pull-right">
30+
<a href="#" class="btn btn-default action-file-refresh"><i class="fa fa-refresh"></i></a>
31+
<a href="#" class="btn btn-default action-file-togglehidden"><i class="fa fa-eye"></i></a>
2532
</div>
26-
<a href="#" data-filesselection class="btn btn-default action-file-download"><i class="fa fa-download"></i></a>
27-
</div>
28-
<div class="btn-group btn-group-sm pull-right">
29-
<a href="#" class="btn btn-default action-file-refresh"><i class="fa fa-refresh"></i></a>
30-
<a href="#" class="btn btn-default action-file-togglehidden"><i class="fa fa-eye"></i></a>
3133
</div>
32-
</div>
33-
<div class="tab-panel-inner with-panel files-outer">
34-
<ul class="files">
35-
<% if (!file.isRoot()) { %>
36-
<li class="file level-up">
37-
<span class="name">
38-
<a href="#" class="action-open-parent">..</a>
39-
</span>
40-
</li>
41-
<% } %>
42-
<% _.each(files, function(cfile) { %>
43-
<li class="file <% if (cfile.isHidden()) { %>file-hidden<% } %>" data-filepath="<%- cfile.path() %>">
44-
<span class="select">
45-
<input type="checkbox" />
46-
</span>
47-
<span class="icon">
48-
<i class="fa fa-<%- cfile.icon() %>" style="color:<%- cfile.color("#666") %>"></i>
49-
</span>
50-
<span class="name">
51-
<a href="#" class="action-open-file"><%- cfile.get("name") %></a>
52-
</span>
53-
<span class="mtime"><%= view.component("components.date", {
54-
time: cfile.get("mtime")/1000
55-
}, "date") %></span>
56-
<% if (cfile.isHidden()) { %>
57-
<span class="label label-warning">hidden</span>
34+
<div class="tab-panel-inner with-toolbar files-outer">
35+
<ul class="files">
36+
<% if (!file.isRoot()) { %>
37+
<li class="file level-up">
38+
<span class="name">
39+
<a href="#" class="action-open-parent">..</a>
40+
</span>
41+
</li>
5842
<% } %>
59-
</li>
60-
<% }); %>
61-
</ul>
62-
</div>
63-
<input type="file" class="uploader hidden" multiple />
64-
<input type="file" class="uploader-directory hidden" multiple webkitdirectory directory />
43+
<% _.each(files, function(cfile) { %>
44+
<li class="file <% if (cfile.isHidden()) { %>file-hidden<% } %>" data-filepath="<%- cfile.path() %>">
45+
<span class="select">
46+
<input type="checkbox" />
47+
</span>
48+
<span class="icon">
49+
<i class="fa fa-<%- cfile.icon() %>" style="color:<%- cfile.color("#666") %>"></i>
50+
</span>
51+
<span class="name">
52+
<a href="#" class="action-open-file"><%- cfile.get("name") %></a>
53+
</span>
54+
<span class="mtime"><%= view.component("components.date", {
55+
time: cfile.get("mtime")/1000
56+
}, "date") %></span>
57+
<% if (cfile.isHidden()) { %>
58+
<span class="label label-warning">hidden</span>
59+
<% } %>
60+
</li>
61+
<% }); %>
62+
</ul>
63+
</div>
64+
<input type="file" class="uploader hidden" multiple />
65+
<input type="file" class="uploader-directory hidden" multiple webkitdirectory directory />
66+
</div>

‎addons/editor/templates/file.html‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
<div class="editor">
2-
<a href="#" class="btn action-file action-file-fullscreen" title="Zen mode"><i class="icon-resize-full"></i></a>
3-
<div class="btn-group file-settings">
4-
<a href="#" class="btn btn-link action-file-mode" data-toggle="dropdown">text</a>
5-
<ul class="dropdown-menu">
6-
<% _.each(app.config.editor.modes, function(mode, modeid) { %>
7-
<li><a href="#" data-editormode="<%- modeid %>"><%- mode %></a></li>
8-
<% }); %>
9-
</ul>
1+
<div class="tab-panel-lateralopener"></div>
2+
<div class="tab-panel-body editor">
3+
<div class="tab-panel-lateralbar">
4+
<div class="list-group">
5+
<% _.each(app.config.editor.modes, function(mode, modeid) { %>
6+
<a href="#" class="list-group-item" data-editormode="<%- modeid %>"><%- mode %></a>
7+
<% }); %>
8+
</div>
109
</div>
1110
<div class="tab-panel-inner editor-inner"></div>
1211
</div>

‎addons/editor/views/file.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,7 @@ define([
2525
this.editor = new EditorView();
2626

2727
// Bind editor mode changements
28-
this.editor.on("change:mode", function() {
29-
this.$(".action-file-mode").text(this.editor.getMode());
30-
}, this);
28+
this.editor.on("change:mode", this.modeChanged, this);
3129

3230
// Bind editor sync state changements
3331
this.editor.on("sync:state", function(state) {
@@ -54,6 +52,7 @@ define([
5452
finish: function() {
5553
// Add editor to content
5654
this.editor.$el.appendTo(this.$(".editor-inner"));
55+
this.modeChanged();
5756

5857
return FileEditorView.__super__.finish.apply(this, arguments);
5958
},
@@ -68,7 +67,14 @@ define([
6867
changeEditorMode: function(e) {
6968
e.preventDefault();
7069
var mode = $(e.currentTarget).data("editormode");
71-
this.components.editor.setMode(mode);
70+
this.editor.setMode(mode);
71+
},
72+
73+
// (event) Mode changed
74+
modeChanged: function() {
75+
var mode = this.editor.getMode();
76+
this.$("a[data-editormode!='"+mode+"']").removeClass("active");
77+
this.$("a[data-editormode='"+mode+"']").addClass("active");
7278
},
7379

7480
// Update participants list

‎addons/monitor/templates/tab.html‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
<div class="tab-panel-toolbar monitor-toolbar btn-toolbar">
2-
<div class="btn-group btn-group-sm">
3-
<a href="#" class="btn btn-default action-monitor-clear">
4-
<i class="fa fa-eraser"></i> Clear Logs
5-
</a>
1+
<div class="tab-panel-body">
2+
<div class="tab-panel-toolbar monitor-toolbar btn-toolbar">
3+
<div class="btn-group btn-group-sm">
4+
<a href="#" class="btn btn-default action-monitor-clear">
5+
<i class="fa fa-eraser"></i> Clear Logs
6+
</a>
7+
</div>
68
</div>
7-
</div>
8-
<div class="tab-panel-inner with-panel monitor-logs"></div>
9+
<div class="tab-panel-inner with-toolbar monitor-logs"></div>
10+
</div>

‎addons/terminal/stylesheets/tab.less‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
height: 100%;
55
background: transparent;
66

7-
.terminal-body {
7+
.tab-panel-body .tab-panel-inner.terminal-body {
88
background: #000;
99
border-color: #000;
1010
overflow: auto;
@@ -21,5 +21,5 @@
2121
background: #fff;
2222
color: #000;
2323
}
24-
}
24+
};
2525
}

‎addons/terminal/views/tab.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ define([
2525
this.term_h = 24;
2626
this.term_el = $("<div>", {
2727
'class': "tab-panel-inner terminal-body"
28-
}).appendTo(this.$el).get(0);
28+
}).appendTo($("<div>", {"class": "tab-panel-body"}).appendTo(this.$el)).get(0);
2929
this.term = new Terminal({
3030
cols: this.term_w,
3131
rows: this.term_h,

‎client/resources/stylesheets/components/tabs.less‎

Lines changed: 63 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -134,30 +134,6 @@
134134
left: 0px;
135135
right: 0px;
136136
bottom: 0px;
137-
138-
.tab-panel-inner {
139-
margin: 10px;
140-
background: #fff;
141-
border-radius: 3px;
142-
143-
&.full-tab {
144-
position: absolute;
145-
top: 0px;
146-
bottom: 0px;
147-
right: 0px;
148-
left: 0px;
149-
overflow: hidden;
150-
}
151-
}
152-
153-
.tabs-loading {
154-
position: absolute;
155-
top: 0px;
156-
left: 0px;
157-
right: 0px;
158-
bottom: 0px;
159-
background: #f1f1f1;
160-
}
161137

162138
&.active {
163139
display: block;
@@ -207,35 +183,76 @@
207183
position: absolute;
208184
width: 100%;
209185
height: 100%;
210-
211-
.tab-panel-toolbar {
186+
187+
.tab-panel-lateralopener {
212188
position: absolute;
213-
top: 10px;
214-
left: 10px;
215-
right: 10px;
216-
height: 20px;
217-
margin: 0px;
218-
padding: 0px;
189+
top: 0px;
190+
bottom: 0px;
191+
right: 0px;
192+
width: @tabPanelPadding;
193+
z-index: 0;
219194
}
220-
221-
.tab-panel-inner {
195+
196+
.tab-panel-body {
222197
position: absolute;
223198
top: 0px;
224199
bottom: 0px;
225200
left: 0px;
226201
right: 0px;
227-
border-radius: 3px;
228-
overflow: hidden;
229-
width: auto;
230-
height: auto;
231-
margin: 6px;
232-
padding: 0px;
233-
background: #fff;
234-
border: 1px solid #ccc;
235-
overflow-y: auto;
236-
237-
&.with-panel {
238-
top: 40px;
202+
z-index: 1;
203+
margin: @tabPanelPadding;
204+
205+
&.with-lateralpanel {
206+
.tab-panel-inner, .tab-panel-toolbar {
207+
right: @tabPanelLateralWidth+@tabPanelPadding;
208+
}
209+
.tab-panel-lateralbar {
210+
right: 0px;
211+
}
212+
}
213+
214+
.tab-panel-toolbar {
215+
position: absolute;
216+
top: 0px;
217+
left: 0px;
218+
right: 0px;
219+
height: 20px;
220+
margin: 0px;
221+
padding: 0px;
222+
z-index: 2;
223+
}
224+
225+
.tab-panel-inner {
226+
position: absolute;
227+
top: 0px;
228+
bottom: 0px;
229+
left: 0px;
230+
right: 0px;
231+
z-index: 2;
232+
border-radius: 3px;
233+
overflow: hidden;
234+
width: auto;
235+
height: auto;
236+
background: #fff;
237+
border: 1px solid #ccc;
238+
overflow-y: auto;
239+
.transition(.3s ease-in-out right);
240+
241+
&.with-toolbar {
242+
top: 36px;
243+
}
244+
}
245+
246+
/* Lateral panel */
247+
.tab-panel-lateralbar {
248+
position: absolute;
249+
top: 0px;
250+
bottom: 0px;
251+
right: - (@tabPanelLateralWidth+@tabPanelPadding);
252+
z-index: 1;
253+
width: @tabPanelLateralWidth;
254+
overflow-y: auto;
255+
.transition(.3s ease-in-out right);
239256
}
240257
}
241258
}

‎client/resources/stylesheets/variables.less‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,9 @@
3333
@tabActiveColor: #eaeaea;
3434
@tabActiveBorder: #b8b8b8;
3535

36+
@tabPanelPadding: 8px;
37+
@tabPanelLateralWidth: 210px;
38+
3639
/* Fonts */
3740
@font-family-base: 'codeboxNormal';
3841

0 commit comments

Comments
 (0)