Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Editor: Added theme switcher, restored default theme colors plus misc cleanup

jlewin 12 years ago
parent
9a06dab148
commit
1a0e399afe
6 changed files with 91 additions and 45 deletions
Split View Show Diff Stats
  1. 1 1
      editor/index.html
  2. 1 1
      editor/js/Sidebar.Material.js
  3. 55 0
      editor/js/Sidebar.Renderer.js
  4. 2 31
      editor/js/libs/ui.js
  5. 5 2
      editor/themes/darkgray/style.css
  6. 27 10
      editor/themes/default/style.css

+ 1 - 1
editor/index.html
View File 

@@ -6,7 +6,7 @@
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 	</head>
 
 	<body>
 
-		<link href="themes/darkgray/style.css" rel="stylesheet" />
 
+		<link id="theme" href="themes/default/style.css" rel="stylesheet" />
 
 
 		<script src="../build/three.min.js"></script>
 
 		<script src="../examples/js/libs/system.min.js"></script>

+ 1 - 1
editor/js/Sidebar.Material.js
View File 

@@ -21,7 +21,7 @@ Sidebar.Material = function ( editor ) {
 
 
 	var container = new UI.Panel();
 
 	container.setDisplay( 'none' );
 
-	container.addClass( 'Material' );
 
+	container.dom.classList.add( 'Material' );
 
 
 	container.add( new UI.Text().setValue( 'MATERIAL' ) );
 
 	container.add( new UI.Break(), new UI.Break() );

+ 55 - 0
editor/js/Sidebar.Renderer.js
View File 

@@ -37,6 +37,61 @@ Sidebar.Renderer = function ( editor ) {
 
 
 	container.add( rendererClassRow );
 
 
+	// Quick hack to expose a user control to switch themes - for easy review purposes only
 
+
 
+	var themeLink = document.getElementById('theme');
 
+	var themeRow = new UI.Panel();
 
+	var originalColor;
 
+
 
+	var themeClass = new UI.Select().setOptions( ['Original', 'Dark', 'Dark+'] ).setWidth( '150px ').setColor( '#444' ).setFontSize( '12px ').onChange( function () {
 
+
 
+		var colorVal = clearColor.getValue();
 
+		switch ( this.value ) {
 
+
 
+			case '1':
 
+				themeLink.href = 'themes/darkgray/style.css';
 
+
 
+				if ( originalColor && originalColor != colorVal ) {
 
+
 
+					clearColor.setValue( originalColor );
 
+
 
+				}
 
+
 
+				break;
 
+
 
+			case '2':
 
+				themeLink.href =  'themes/darkgray/style.css'
 
+
 
+				if ( colorVal != '#333333' ) {
 
+
 
+					originalColor = colorVal;
 
+					clearColor.setValue( '#333333' );
 
+
 
+				}
 
+
 
+				break;
 
+
 
+			default:
 
+				themeLink.href = 'themes/default/style.css';
 
+
 
+				if ( originalColor && originalColor != colorVal ) {
 
+
 
+					clearColor.setValue( originalColor );
 
+
 
+				}
 
+
 
+				break;
 
+		}
 
+
 
+		updateClearColor();
 
+
 
+	});
 
+
 
+	themeRow.add( new UI.Text('Theme').setWidth('90px') );
 
+	themeRow.add( themeClass );
 
+
 
+	container.add( themeRow );
 
+
 
 	// clear color
 
 
 	var clearColorRow = new UI.Panel();

+ 2 - 31
editor/js/libs/ui.js
View File 

@@ -12,35 +12,6 @@ UI.Element.prototype = {
 
 
 	},
 
 
-	trim: function ( value ) {
 
-
 
-		if ( value.trim ) 
-			return value.trim();
 
-		else 
-			return value.replace(/^\s+|\s+$/g,'');  ;
 
-
 
-	},
 
-
 
-	addClass: function ( value ) {
 
-
 
-		var classes = this.dom.className.split(/\s+/g);
 
-
 
-		// Exit early and avoid dom update if already set
 
-		var index = classes.indexOf(value);
 
-		if ( index >= 0 ) {
 
-
 
-			return;
 
-
 
-		}
 
-
 
-		classes.push( value );
 
-
 
-		this.dom.className = classes.join(' ');
 
-
 
-		return this;
 
-		
-	},
 
-
 
 	setClass: function ( name ) {
 
 
 		this.dom.className = name;
 
@@ -460,7 +431,7 @@ UI.FancySelect.prototype.setValue = function ( value ) {
 
 
 		if ( element.value === value ) {
 
 
-			element.style.backgroundColor = '#f0f0f0';
 
+			element.classList.add( 'active' );
 
 
 			// scroll into view
 
 
@@ -482,7 +453,7 @@ UI.FancySelect.prototype.setValue = function ( value ) {
 
 
 		} else {
 
 
-			element.style.backgroundColor = '';
 
+			element.classList.remove( 'active' );
 
 
 		}

+ 5 - 2
editor/themes/darkgray/style.css
View File 

@@ -69,8 +69,12 @@ button {
 
 		white-space: nowrap;
 
 	}
 
 
+	.FancySelect .option.active {
 
+		background-color: #153C5E;
 
+	}
 
+
 
 input.Number {
 
-	color: #0080f0;
 
+	color: #2A75B7;
 
 	font-size: 12px;							/** TODO: Use of !imporant is not ideal **/
 
 	background-color: transparent!important;	/* For now this is a quick fix a rendering issue due to inherited background */
 
 	border: 1px solid transparent;
 
@@ -83,7 +87,6 @@ input.Number {
 
 	background: url(trans.png);
 
 	padding: 0px;
 
 	margin: 0px;
 
-	border-bottom: solid 1px #BEBEBE;
 
 }
 
 
 	#menubar .menu {

+ 27 - 10
editor/themes/default/style.css
View File 

@@ -35,6 +35,7 @@ button {
 
 	padding: 0;
 
 	cursor: default;
 
 	overflow: auto;
 
+	outline: none;
 
 }
 
 
 	.FancySelect .option {
 
@@ -42,11 +43,14 @@ button {
 
 		white-space: nowrap;
 
 	}
 
 
+	.FancySelect .option.active {
 
+		background-color: #F0F0F0;
 
+	}
 
+
 
 input.Number {
 
-	/* '#0080f0' */
 
-	color: red;
 
-	font-size: 12px;
 
-	background-color: transparent;
 
+	color: #0080f0;
 
+	font-size: 12px;							/** TODO: Use of !imporant is not ideal **/
 
+	background-color: transparent!important;	/* For now this is a quick fix a rendering issue due to inherited background */
 
 	border: 1px solid transparent;
 
 	padding: 2px;
 
 	cursor: col-resize;
 
@@ -54,7 +58,7 @@ input.Number {
 
 
 #menubar {
 
 	position: absolute;
 
-	background: url(trans.png);
 
+	background: #eee;
 
 	padding: 0px;
 
 	margin: 0px;
 
 }
 
@@ -71,12 +75,12 @@ input.Number {
 
 
 		#menubar .menu .options {
 
 			padding: 5px 0px;
 
-			background: url(trans.png);
 
+			background: #eee;
 
 			width: 140px;
 
 		}
 
 
 			#menubar .menu .options hr {
 
-				border-color: #444;
 
+				border-color: #ddd;
 
 			}
 
 
 			#menubar .menu .options .option {
 
@@ -95,10 +99,16 @@ input.Number {
 
 #sidebar {
 
 	position: absolute;
 
 	width: 300px;
 
-	background: url(trans.png);
 
+	background: #eee;
 
 	overflow: auto;
 
 }
 
 
+	#sidebar input,
 
+	#sidebar textarea,
 
+	#sidebar select {
 
+		/* background: #ccc; */
 
+	}
 
+
 
 	#sidebar .Panel {
 
 		margin-bottom: 10px;
 
 	}
 
@@ -106,7 +116,7 @@ input.Number {
 
 	#sidebar > .Panel {
 
 		color: #888;
 
 		padding: 10px;
 
-		border-top: 1px solid #333;
 
+		border-top: 1px solid #ccc;
 
 	}
 
 
 	#sidebar #outliner {
 
@@ -116,6 +126,13 @@ input.Number {
 
 		font-size: 12px;
 
 	}
 
 
+	#sidebar .Panel.Material canvas {
 
+
 
+		/* background: url(../common/grid.png);
 
+		border: solid 1px #5A5A5A; */
 
+
 
+	}
 
+
 
 	#sidebar #outliner .type {
 
 		padding: 2px 4px;
 
 		font-size: 10px;
 
@@ -125,7 +142,7 @@ input.Number {
 
 
 #toolbar {
 
 	position: absolute;
 
-	background: url(trans.png);
 
+	background: #eee;
 
 	color: #333;
 
 }