Skip to content

Commit 45a909f

Browse files
mrdoobmrdoob
authored
Merge pull request #17465 from sdinesh86/editor-ui-additions
Editor: Initial implementation of TabbedPanel element
2 parents fe0d640 + 7f74b5d commit 45a909f

File tree

6 files changed

+204
-119
lines changed

6 files changed

+204
-119
lines changed

‎editor/css/dark.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -251,6 +251,20 @@ select {
251251
background-color: rgba(21,60,94,1);
252252
}
253253

254+
.TabbedPanel .Tabs {
255+
background-color: #1b1b1b;
256+
border-top: 1px solid #222;
257+
}
258+
259+
.TabbedPanel .Tab {
260+
color: #555;
261+
border-right: 1px solid #222;
262+
}
263+
264+
.TabbedPanel .Tab.selected {
265+
color: #888;
266+
background-color: #111;
267+
}
254268
/* */
255269

256270
@media all and ( max-width: 600px ) {

‎editor/css/light.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,21 @@ select {
244244
background-color: rgba(0,0,0,0.04);
245245
}
246246

247+
248+
.TabbedPanel .Tabs {
249+
background-color: #ddd;
250+
border-top: 1px solid #ccc;
251+
}
252+
253+
.TabbedPanel .Tab {
254+
color: #aaa;
255+
border-right: 1px solid #ccc;
256+
}
257+
258+
.TabbedPanel .Tab.selected {
259+
color: #888;
260+
background-color: #eee;
261+
}
247262
/* */
248263

249264
@media all and ( max-width: 600px ) {

‎editor/css/main.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,37 @@ textarea, input { outline: none; } /* osx */
4141
user-select: none;
4242
}
4343

44+
.TabbedPanel {
45+
-moz-user-select: none;
46+
-webkit-user-select: none;
47+
-ms-user-select: none;
48+
49+
/* No support for these yet */
50+
-o-user-select: none;
51+
user-select: none;
52+
position: relative;
53+
display: block;
54+
width: 100%;
55+
}
56+
57+
.TabbedPanel .Tabs {
58+
position: relative;
59+
display: block;
60+
width: 100%;
61+
}
62+
63+
.TabbedPanel .Tabs .Tab {
64+
padding: 10px;
65+
vertical-align: middle;
66+
}
67+
68+
.TabbedPanel .Tabs .Panels {
69+
position: relative;
70+
display: block;
71+
width: 100%;
72+
height: 100%;
73+
}
74+
4475
/* CodeMirror */
4576

4677
.CodeMirror {

‎editor/js/Sidebar.Properties.js‎

Lines changed: 5 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -4,72 +4,14 @@
44

55
Sidebar.Properties = function ( editor ) {
66

7-
var signals = editor.signals;
87
var strings = editor.strings;
98

10-
var container = new UI.Span();
9+
var container = new UI.TabbedPanel();
10+
container.setId( 'properties' );
1111

12-
var objectTab = new UI.Text( strings.getKey( 'sidebar/properties/object' ) ).setTextTransform( 'uppercase' );
13-
objectTab.onClick( function () { select( 'OBJECT' ) } );
14-
15-
var geometryTab = new UI.Text( strings.getKey( 'sidebar/properties/geometry' ) ).setTextTransform( 'uppercase' );
16-
geometryTab.onClick( function () { select( 'GEOMETRY' ) } );
17-
18-
var materialTab = new UI.Text( strings.getKey( 'sidebar/properties/material' ) ).setTextTransform( 'uppercase' );
19-
materialTab.onClick( function () { select( 'MATERIAL' ) } );
20-
21-
var tabs = new UI.Div();
22-
tabs.setId( 'tabs' );
23-
tabs.add( objectTab, geometryTab, materialTab );
24-
container.add( tabs );
25-
26-
//
27-
28-
var object = new UI.Span().add(
29-
new Sidebar.Object( editor )
30-
);
31-
container.add( object );
32-
33-
var geometry = new UI.Span().add(
34-
new Sidebar.Geometry( editor )
35-
);
36-
container.add( geometry );
37-
38-
var material = new UI.Span().add(
39-
new Sidebar.Material( editor )
40-
);
41-
container.add( material );
42-
43-
//
44-
45-
function select( section ) {
46-
47-
objectTab.setClass( '' );
48-
geometryTab.setClass( '' );
49-
materialTab.setClass( '' );
50-
51-
object.setDisplay( 'none' );
52-
geometry.setDisplay( 'none' );
53-
material.setDisplay( 'none' );
54-
55-
switch ( section ) {
56-
case 'OBJECT':
57-
objectTab.setClass( 'selected' );
58-
object.setDisplay( '' );
59-
break;
60-
case 'GEOMETRY':
61-
geometryTab.setClass( 'selected' );
62-
geometry.setDisplay( '' );
63-
break;
64-
case 'MATERIAL':
65-
materialTab.setClass( 'selected' );
66-
material.setDisplay( '' );
67-
break;
68-
}
69-
70-
}
71-
72-
select( 'OBJECT' );
12+
container.addTab( 'object', strings.getKey( 'sidebar/properties/object' ), new Sidebar.Object( editor ) );
13+
container.addTab( 'geometry', strings.getKey( 'sidebar/properties/geometry' ), new Sidebar.Geometry( editor ) );
14+
container.addTab( 'material', strings.getKey( 'sidebar/properties/material' ), new Sidebar.Material( editor ) );
7315

7416
return container;
7517

‎editor/js/Sidebar.js‎

Lines changed: 4 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -6,76 +6,24 @@ var Sidebar = function ( editor ) {
66

77
var strings = editor.strings;
88

9-
var container = new UI.Panel();
9+
var container = new UI.TabbedPanel();
1010
container.setId( 'sidebar' );
1111

12-
//
13-
14-
var sceneTab = new UI.Text( strings.getKey( 'sidebar/scene' ) ).setTextTransform( 'uppercase' );
15-
sceneTab.onClick( function () { select( 'SCENE' ) } );
16-
17-
var projectTab = new UI.Text( strings.getKey( 'sidebar/project' ) ).setTextTransform( 'uppercase' );
18-
projectTab.onClick( function () { select( 'PROJECT' ) } );
19-
20-
var settingsTab = new UI.Text( strings.getKey( 'sidebar/settings' ) ).setTextTransform( 'uppercase' );
21-
settingsTab.onClick( function () { select( 'SETTINGS' ) } );
22-
23-
var tabs = new UI.Div();
24-
tabs.setId( 'tabs' );
25-
tabs.add( sceneTab, projectTab, settingsTab );
26-
container.add( tabs );
27-
28-
//
29-
3012
var scene = new UI.Span().add(
3113
new Sidebar.Scene( editor ),
3214
new Sidebar.Properties( editor ),
3315
new Sidebar.Animation( editor ),
3416
new Sidebar.Script( editor )
3517
);
36-
container.add( scene );
37-
38-
var project = new UI.Span().add(
39-
new Sidebar.Project( editor )
40-
);
41-
container.add( project );
4218

4319
var settings = new UI.Span().add(
4420
new Sidebar.Settings( editor ),
4521
new Sidebar.History( editor )
4622
);
47-
container.add( settings );
48-
49-
//
50-
51-
function select( section ) {
52-
53-
sceneTab.setClass( '' );
54-
projectTab.setClass( '' );
55-
settingsTab.setClass( '' );
56-
57-
scene.setDisplay( 'none' );
58-
project.setDisplay( 'none' );
59-
settings.setDisplay( 'none' );
60-
61-
switch ( section ) {
62-
case 'SCENE':
63-
sceneTab.setClass( 'selected' );
64-
scene.setDisplay( '' );
65-
break;
66-
case 'PROJECT':
67-
projectTab.setClass( 'selected' );
68-
project.setDisplay( '' );
69-
break;
70-
case 'SETTINGS':
71-
settingsTab.setClass( 'selected' );
72-
settings.setDisplay( '' );
73-
break;
74-
}
75-
76-
}
7723

78-
select( 'SCENE' );
24+
container.addTab( 'scene', strings.getKey( 'sidebar/scene' ), scene );
25+
container.addTab( 'project', strings.getKey( 'sidebar/project' ), new Sidebar.Project( editor ) );
26+
container.addTab( 'settings', strings.getKey( 'sidebar/settings' ), settings );
7927

8028
return container;
8129

‎editor/js/libs/ui.js‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,22 @@ UI.Element.prototype = {
8282

8383
},
8484

85+
addClass: function ( name ) {
86+
87+
this.dom.classList.add( name );
88+
89+
return this;
90+
91+
},
92+
93+
removeClass: function ( name ) {
94+
95+
this.dom.classList.remove( name );
96+
97+
return this;
98+
99+
},
100+
85101
setStyle: function ( style, array ) {
86102

87103
for ( var i = 0; i < array.length; i ++ ) {
@@ -995,3 +1011,122 @@ UI.Button.prototype.setLabel = function ( value ) {
9951011
return this;
9961012

9971013
};
1014+
1015+
1016+
// TabbedPanel
1017+
1018+
UI.TabbedPanel = function ( ) {
1019+
1020+
UI.Element.call( this );
1021+
1022+
var dom = document.createElement('div');
1023+
1024+
this.dom = dom;
1025+
1026+
this.setClass( 'TabbedPanel' );
1027+
1028+
this.tabs = [];
1029+
this.panels = [];
1030+
1031+
this.tabsDiv = new UI.Div();
1032+
this.tabsDiv.setClass( 'Tabs' );
1033+
1034+
this.panelsDiv = new UI.Div();
1035+
this.panelsDiv.setClass( 'Panels' );
1036+
1037+
this.add( this.tabsDiv );
1038+
this.add( this.panelsDiv );
1039+
1040+
this.selected = '';
1041+
1042+
return this;
1043+
1044+
}
1045+
1046+
UI.TabbedPanel.prototype = Object.create( UI.Element.prototype );
1047+
UI.TabbedPanel.prototype.constructor = UI.TabbedPanel;
1048+
1049+
UI.TabbedPanel.prototype.select = function ( id ) {
1050+
1051+
var tab;
1052+
var panel;
1053+
var scope = this;
1054+
1055+
// Deselect current selection
1056+
if ( this.selected && this.selected.length ) {
1057+
tab = this.tabs.find( function ( item ) { return item.dom.id === scope.selected } );
1058+
panel = this.panels.find( function ( item ) { return item.dom.id === scope.selected } );
1059+
1060+
if ( tab ) {
1061+
1062+
tab.removeClass( 'selected' );
1063+
1064+
}
1065+
1066+
if( panel ) {
1067+
1068+
panel.setDisplay( 'none' );
1069+
1070+
}
1071+
1072+
}
1073+
1074+
tab = this.tabs.find( function ( item ) { return item.dom.id === id } );
1075+
panel = this.panels.find( function ( item ) { return item.dom.id === id } );
1076+
1077+
if ( tab ) {
1078+
1079+
tab.addClass( 'selected' );
1080+
1081+
}
1082+
1083+
if( panel ) {
1084+
1085+
panel.setDisplay( '' );
1086+
1087+
}
1088+
1089+
this.selected = id;
1090+
1091+
return this;
1092+
1093+
}
1094+
1095+
UI.TabbedPanel.prototype.addTab = function ( id, label, items ) {
1096+
1097+
var tab = new UI.TabbedPanel.Tab( label, this );
1098+
tab.setId( id );
1099+
this.tabs.push( tab );
1100+
this.tabsDiv.add( tab );
1101+
1102+
var panel = new UI.Div();
1103+
panel.setId( id );
1104+
panel.add( items );
1105+
panel.setDisplay( 'none' );
1106+
this.panels.push( panel );
1107+
this.panelsDiv.add( panel );
1108+
1109+
this.select( id );
1110+
1111+
}
1112+
1113+
UI.TabbedPanel.Tab = function ( text, parent ) {
1114+
1115+
UI.Text.call( this, text );
1116+
this.parent = parent;
1117+
1118+
this.setClass( 'Tab' );
1119+
1120+
var scope = this;
1121+
this.dom.addEventListener( 'click', function ( event ) {
1122+
1123+
scope.parent.select( scope.dom.id );
1124+
1125+
} )
1126+
1127+
return this;
1128+
1129+
}
1130+
1131+
UI.TabbedPanel.Tab.prototype = Object.create( UI.Text.prototype );
1132+
UI.TabbedPanel.Tab.prototype.constructor = UI.TabbedPanel.Tab;

0 commit comments

Comments
 (0)