10.3.3 release

ChangeLog

@@ -1,3 +1,12 @@
+05-MAR-2019: 10.3.3
+
+- Changes default extension to .drawio
+- Updated UI styles
+
+04-MAR-2019: 10.3.2
+
+- Fixes Confluence Cloud Direct Edit Saving
+
 02-MAR-2019: 10.3.1
 
 - Fixes loading spinner for Trello

VERSION

@@ -1 +1 @@
-10.3.1
+10.3.3

src/main/webapp/cache.manifest

@@ -1,7 +1,7 @@
 CACHE MANIFEST
 
 # THIS FILE WAS GENERATED. DO NOT MODIFY!
-# 03/02/2019 02:12 PM
+# 03/05/2019 11:40 AM
 
 app.html
 index.html?offline=1

src/main/webapp/index.html

@@ -53,7 +53,7 @@
 			
 			return result;
 		})();
-
+		
 		// Forces CDN caches by passing URL parameters via URL hash
 		if (window.location.hash != null && window.location.hash.substring(0, 2) == '#P')
 		{
@@ -141,6 +141,7 @@
 	<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
 	<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
 	<link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#d89000">
+	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700">
     <link rel="stylesheet" type="text/css" href="styles/grapheditor.css">
     <link rel="canonical" href="https://www.draw.io">
 	<link rel="manifest" href="images/manifest.json">
@@ -148,7 +149,6 @@
 	<style type="text/css">
 		body { overflow:hidden; }
 		div.picker { z-index: 10007; }
-		.geSidebarContainer .geTitle { color:#505050; }
 		.geSidebarContainer .geTitle input {
 			font-size:8pt;
 			color:#606060;
@@ -165,20 +165,25 @@
 			padding-top:0px;
 		}
 		.geEditor ::-webkit-scrollbar {
-		    width:12px;
-		    height:12px;
+		    width:14px;
+		    height:14px;
 		}
 		.geEditor ::-webkit-scrollbar-track {
-			background:whiteSmoke;
-			-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0.1);
+			background-clip:padding-box;
+			border:solid transparent;
+			border-width:1px;
+		}
+		.geEditor ::-webkit-scrollbar-corner {
+			background-color:transparent;
 		}
 		.geEditor ::-webkit-scrollbar-thumb {
-			background:#c5c5c5;
-		    border-radius:10px;
-			border:whiteSmoke solid 3px;
+			background-color:rgba(0,0,0,.1);
+			background-clip:padding-box;
+			border:solid transparent;
+			border-radius:10px;
 		}
-		.geEditor ::-webkit-scrollbar-thumb:hover {
-			background:#b5b5b5;
+		.geEditor ::-webkit-scrollbar-thumb:hover{
+			background-color:rgba(0,0,0,.4);
 		}
 		.geTemplate {
 			border:1px solid transparent;

src/main/webapp/js/diagramly/App.js

@@ -238,7 +238,7 @@ App.pluginRegistry = {'4xAKTrabTpTzahoLthkwPNUn': '/plugins/explore.js',
 	'tr': '/plugins/trello.js', 'f5': '/plugins/rackF5.js',
 	'tickets': '/plugins/tickets.js', 'flow': '/plugins/flow.js',
 	'webcola': '/plugins/webcola/webcola.js', 'rnd': '/plugins/random.js',
-	'page': '/plugins/page.js'};
+	'page': '/plugins/page.js', 'gd': '/plugins/googledrive.js'};
 
 /**
  * Function: authorize
@@ -488,58 +488,13 @@ App.main = function(callback, createUi)
 			// mxSettings is not yet initialized in configure mode, redirect parameter
 			// to p URL parameter in caller for plugins in embed mode
 			var plugins = (mxSettings.settings != null) ? mxSettings.getPlugins() : null;
-			var pluginsLoaded = {};
 			var temp = urlParams['p'];
 			App.initPluginCallback();
 
 			if (temp != null)
 			{
 				// Mapping from key to URL in App.plugins
-				var t = temp.split(';');
-				
-				for (var i = 0; i < t.length; i++)
-				{
-					if (t[i] != null && t[i].length > 0)
-					{
-						try
-						{
-							var url = App.pluginRegistry[t[i]];
-							
-							if (url != null)
-							{
-								if (pluginsLoaded[url] == null)
-								{
-									pluginsLoaded[url] = true;
-									
-									if (typeof window.drawDevUrl === 'undefined')
-									{
-										mxscript(url);
-									}
-									else
-									{
-										mxscript(drawDevUrl + url);
-									}
-								}
-							}
-							else if (window.console != null)
-							{
-								console.log('Unknown plugin:', t[i]);
-							}
-						}
-						catch (e)
-						{
-							if (window.console != null)
-							{
-								console.log('Error loading plugin:', t[i], e);
-							}
-						}
-					}
-					
-				}
-			}
-			else if (urlParams['chrome'] != '0' && !EditorUi.isElectronApp)
-			{
-				mxscript(App.FOOTER_PLUGIN_URL, null, null, null, mxClient.IS_SVG);
+				App.loadPlugins(temp.split(';'));
 			}
 			
 			if (plugins != null && plugins.length > 0 && urlParams['plugins'] != '0')
@@ -564,9 +519,9 @@ App.main = function(callback, createUi)
 					{
 						try
 						{
-							if (pluginsLoaded[plugins[i]] == null)
+							if (App.pluginsLoaded[plugins[i]] == null)
 							{
-								pluginsLoaded[url] = true;
+								App.pluginsLoaded[plugins[i]] = true;
 								mxscript(plugins[i]);
 							}
 						}
@@ -849,6 +804,70 @@ App.initPluginCallback = function()
 	}
 };
 
+/**
+ * 
+ */
+App.pluginsLoaded = {};
+
+/**
+ * Queue for loading plugins and wait for UI instance
+ */
+App.loadPlugins = function(plugins, useInclude)
+{
+	for (var i = 0; i < plugins.length; i++)
+	{
+		if (plugins[i] != null && plugins[i].length > 0)
+		{
+			try
+			{
+				var url = App.pluginRegistry[plugins[i]];
+				
+				if (url != null)
+				{
+					if (App.pluginsLoaded[url] == null)
+					{
+						App.pluginsLoaded[url] = true;
+						
+						if (typeof window.drawDevUrl === 'undefined')
+						{
+							if (useInclude)
+							{
+								mxinclude(url);
+							}
+							else
+							{
+								mxscript(url);
+							}
+						}
+						else
+						{
+							if (useInclude)
+							{
+								mxinclude(url);
+							}
+							else
+							{
+								mxscript(drawDevUrl + url);
+							}
+						}
+					}
+				}
+				else if (window.console != null)
+				{
+					console.log('Unknown plugin:', t[i]);
+				}
+			}
+			catch (e)
+			{
+				if (window.console != null)
+				{
+					console.log('Error loading plugin:', t[i], e);
+				}
+			}
+		}
+	}
+};
+
 /**
  * Translates this point by the given vector.
  * 
@@ -1235,32 +1254,27 @@ App.prototype.checkLicense = function()
 				'&ts=' + new Date().getTime(),
 			mxUtils.bind(this, function(req)
 			{
-// NOTE: RESPONSE IS IGNORED SINCE FOOTER IS HIDDEN
-//				var registered = false;
-//				var exp = null;
-//				
-//				try
-//				{
-//					if (req.getStatus() >= 200 && req.getStatus() <= 299)
-//					{
-//						var value = req.getText();
-//						registered = true;
-//						
-//						if (value.length > 0)
-//						{
-//							var lic = JSON.parse(value);
-//							
-//							if (lic != null)
-//							{
-//								exp = this.handleLicense(lic, domain);
-//							}
-//						}
-//					}
-//				}
-//				catch (e)
-//				{
-//					// ignore
-//				}
+				try
+				{
+					if (req.getStatus() >= 200 && req.getStatus() <= 299)
+					{
+						var value = req.getText();
+						
+						if (value.length > 0)
+						{
+							var lic = JSON.parse(value);
+							
+							if (lic != null)
+							{
+								this.handleLicense(lic, domain);
+							}
+						}
+					}
+				}
+				catch (e)
+				{
+					// ignore
+				}
 			}));
 	}
 };
@@ -1270,57 +1284,10 @@ App.prototype.checkLicense = function()
  */
 App.prototype.handleLicense = function(lic, domain)
 {
-	var footer = document.getElementById('geFooter');
-	var expiry = null;
-
-	if (footer != null && lic != null)
+	if (lic != null && lic.plugins != null)
 	{
-		expiry = lic.expiry;
-		
-		if (lic.footer != null)
-		{
-			footer.innerHTML = decodeURIComponent(lic.footer);
-		}
-		else
-		{
-			this.hideFooter();
-		
-			if (expiry != null && expiry != 'never')
-			{
-				var exp = new Date(Date.parse(expiry));
-				var diff = Math.round((exp - Date.now()) / (1000 * 60 * 60 * 24));
-		
-				if (diff < 90)
-				{
-		    		var link = 'https://support.draw.io/display/DKB/draw.io+footer+state+that+license+is+expiring+on+Google+For+Work+account?domain=' + encodeURIComponent(domain);
-		    		footer.style.height = '100%';
-		    		footer.style.margin = '0px';
-		    		footer.style.display = '';
-		    		
-		    		if (diff < 0)
-		    		{
-			    		this.footerHeight = 80;
-		    			footer.innerHTML = '<table height="100%"><tr><td valign="middle" align="center" class="geStatusAlert geBlink">' +
-		    				'<a href="' + link + '" style="padding-top:16px;" target="_blank">' + 
-		    				'<img border="0" src="' + mxGraph.prototype.warningImage.src + '" align="top" style="margin-right:6px">' +
-		    				mxResources.get('licenseHasExpired', [domain, exp.toLocaleDateString()]) + '</a></td></tr></table>';
-		    		}
-		    		else
-		    		{
-			    		this.footerHeight = 46;
-		    			footer.innerHTML = '<table height="100%"><tr><td valign="middle" align="center" class="geStatusAlert">' +
-		    				'<a href="' + link + '" target="_blank">' +
-		    				'<img border="0" src="' + mxGraph.prototype.warningImage.src + '" align="top" style="margin-right:6px">' +
-		    				mxResources.get('licenseWillExpire', [domain, exp.toLocaleDateString()]) + '</a></td></tr></table>';
-		    		}
-		    		
-		    		this.refresh();
-				}
-			}
-		}
+		App.loadPlugins(lic.plugins.split(';'), true);
 	}
-	
-	return expiry;
 };
 
 /**
@@ -2234,12 +2201,10 @@ App.prototype.start = function()
 			{
 				try
 				{
+					this.hideDialog();
 					var id = this.getDiagramId();
 					var file = this.getCurrentFile();
 
-					console.log('hashchange', id, file.getHash());
-
-					
 					if (file == null || file.getHash() != id)
 					{
 						this.loadFile(id, true);
@@ -4810,8 +4775,14 @@ App.prototype.updateHeader = function()
 		this.appIcon.style.display = 'block';
 		this.appIcon.style.position = 'absolute';
 		this.appIcon.style.width = '40px';
-		this.appIcon.style.backgroundColor = '#f18808';
-		this.appIcon.style.height = this.menubarHeight + 'px';
+		this.appIcon.style.height = (this.menubarHeight - 16) + 'px';
+		this.appIcon.style.margin = '8px 0px 8px 8px';
+		this.appIcon.style.borderRadius = '4px';
+		
+		if (uiTheme != 'dark')
+		{
+			this.appIcon.style.backgroundColor = '#f08705';
+		}
 		
 		mxEvent.disableContextMenu(this.appIcon);
 		
@@ -4924,8 +4895,6 @@ App.prototype.updateHeader = function()
 			this.menubar.container.style.paddingLeft = '52px';
 			this.menubar.container.style.boxSizing = 'border-box';
 			this.menubar.container.style.top = '29px';
-			
-			this.toolbar.container.style.paddingLeft = '56px';
 		}
 		
 		/**
@@ -4935,8 +4904,8 @@ App.prototype.updateHeader = function()
 		this.toggleFormatElement.setAttribute('title', mxResources.get('formatPanel') + ' (' + Editor.ctrlKey + '+Shift+P)');
 		this.toggleFormatElement.style.position = 'absolute';
 		this.toggleFormatElement.style.display = 'inline-block';
-		this.toggleFormatElement.style.top = '5px';
-		this.toggleFormatElement.style.right = (uiTheme != 'atlas' && urlParams['embed'] != '1') ? '26px' : '10px';
+		this.toggleFormatElement.style.top = '8px';
+		this.toggleFormatElement.style.right = (uiTheme != 'atlas' && urlParams['embed'] != '1') ? '30px' : '10px';
 		this.toggleFormatElement.style.padding = '2px';
 		this.toggleFormatElement.style.fontSize = '14px';
 		this.toggleFormatElement.className = (uiTheme != 'atlas') ? 'geButton' : '';
@@ -4983,8 +4952,8 @@ App.prototype.updateHeader = function()
 		this.fullscreenElement.setAttribute('title', mxResources.get('fullscreen'));
 		this.fullscreenElement.style.position = 'absolute';
 		this.fullscreenElement.style.display = 'inline-block';
-		this.fullscreenElement.style.top = '5px';
-		this.fullscreenElement.style.right = (uiTheme != 'atlas' && urlParams['embed'] != '1') ? '42px' : '26px';
+		this.fullscreenElement.style.top = '8px';
+		this.fullscreenElement.style.right = (uiTheme != 'atlas' && urlParams['embed'] != '1') ? '50px' : '30px';
 		this.fullscreenElement.style.padding = '2px';
 		this.fullscreenElement.style.fontSize = '14px';
 		this.fullscreenElement.className = (uiTheme != 'atlas') ? 'geButton' : '';
@@ -5002,6 +4971,13 @@ App.prototype.updateHeader = function()
 			evt.preventDefault();
 		}));
 		
+		// Some style changes in Atlas theme
+		if (uiTheme == 'atlas')
+		{
+			mxUtils.setOpacity(this.toggleFormatElement, 70);
+			mxUtils.setOpacity(this.fullscreenElement, 70);
+		}
+		
 		var initialPosition = this.hsplitPosition;
 		var collapsed = false;
 
@@ -5023,18 +4999,7 @@ App.prototype.updateHeader = function()
 			collapsed = !collapsed;
 			mxEvent.consume(evt);
 		}));
-		
-		// Some style changes in Atlas theme
-		if (uiTheme == 'atlas')
-		{
-			mxUtils.setOpacity(this.toggleFormatElement, 70);
-			mxUtils.setOpacity(this.fullscreenElement, 70);
-			this.toggleFormatElement.style.right = '6px';
-			this.fullscreenElement.style.right = '22px';
-			this.toggleFormatElement.style.top = '8px';
-			this.fullscreenElement.style.top = '8px';
-		}
-		
+
 		/**
 		 * Adds compact UI toggle.
 		 */
@@ -5048,7 +5013,7 @@ App.prototype.updateHeader = function()
 			this.toggleElement.style.width = '16px';
 			this.toggleElement.style.height = '16px';
 			this.toggleElement.style.color = '#666';
-			this.toggleElement.style.top = '5px';
+			this.toggleElement.style.top = '8px';
 			this.toggleElement.style.right = '10px';
 			this.toggleElement.style.padding = '2px';
 			this.toggleElement.style.fontSize = '14px';
@@ -5106,7 +5071,6 @@ App.prototype.toggleCompactMode = function(forceHide)
 		this.menubar.container.style.paddingTop = '';
 		this.menubar.container.style.paddingBottom = '';
 		this.menubar.container.style.top = '29px';
-		this.toolbar.container.style.paddingLeft = '56px';
 		this.buttonContainer.style.visibility = 'visible';
 		this.appIcon.style.display = 'block';
 		this.fnameWrapper.style.display = 'block';
@@ -5122,7 +5086,6 @@ App.prototype.toggleCompactMode = function(forceHide)
 		this.menubar.container.style.paddingTop = '0px';
 		this.menubar.container.style.paddingBottom = '0px';
 		this.menubar.container.style.top = '0px';
-		this.toolbar.container.style.paddingLeft = '4px';
 		this.buttonContainer.style.visibility = 'hidden';
 		this.appIcon.style.display = 'none';
 		this.fnameWrapper.style.display = 'none';

src/main/webapp/js/diagramly/Dialogs.js

@@ -3711,7 +3711,7 @@ var CreateDialog = function(editorUi, title, createFn, cancelFn, dlgTitle, btnLa
 			addLogo(IMAGE_PATH + '/github-logo.svg', mxResources.get('github'), App.MODE_GITHUB, 'gitHub');
 		}
 
-		if (editorUi.trello != null)
+		if (typeof window.TrelloClient === 'function')
 		{
 			var trelloOption = document.createElement('option');
 			trelloOption.setAttribute('value', App.MODE_TRELLO);

src/main/webapp/js/diagramly/DrawioFileSync.js

@@ -335,8 +335,8 @@ DrawioFileSync.prototype.updateOnlineState = function()
 			elt.style.display = 'inline-block';
 			elt.style.verticalAlign = 'bottom';
 			elt.style.color = '#666';
-			elt.style.top = '5px';
-			elt.style.right = (uiTheme == 'atlas') ? '42px' : '60px';
+			elt.style.top = '8px';
+			elt.style.right = (uiTheme != 'atlas') ?  '70px' : '50px';
 			elt.style.padding = '2px';
 			elt.style.fontSize = '8pt';
 			elt.style.verticalAlign = 'middle';

src/main/webapp/js/diagramly/DriveClient.js

@@ -110,7 +110,7 @@ DriveClient.prototype.oldAppHostname = 'legacy.draw.io';
 /**
  * Executes the first step for connecting to Google Drive.
  */
-DriveClient.prototype.extension = '.html';
+DriveClient.prototype.extension = '.drawio';
 
 /**
  * Interval for updating the access token.

src/main/webapp/js/diagramly/DropboxClient.js

@@ -22,7 +22,7 @@ DropboxClient.prototype.appPath = '/drawio/';
 /**
  * Executes the first step for connecting to Google Drive.
  */
-DropboxClient.prototype.extension = '.html';
+DropboxClient.prototype.extension = '.drawio';
 
 /**
  * Executes the first step for connecting to Google Drive.

src/main/webapp/js/diagramly/Editor.js

@@ -2310,7 +2310,7 @@
 		/**
 		 * Configures global color schemes.
 		 */
-		StyleFormatPanel.prototype.defaultColorSchemes = [[null, {fill: '#f5f5f5', stroke: '#666666', font: '#333333'},
+		StyleFormatPanel.prototype.defaultColorSchemes = [[{fill: '', stroke: ''}, {fill: '#f5f5f5', stroke: '#666666', font: '#333333'},
 			{fill: '#dae8fc', stroke: '#6c8ebf'}, {fill: '#d5e8d4', stroke: '#82b366'},
 			{fill: '#ffe6cc', stroke: '#d79b00'}, {fill: '#fff2cc', stroke: '#d6b656'},
 			{fill: '#f8cecc', stroke: '#b85450'}, {fill: '#e1d5e7', stroke: '#9673a6'}],
@@ -2322,11 +2322,11 @@
 			{fill: '#f0a30a', stroke: '#BD7000', font: '#ffffff'}, {fill: '#e3c800', stroke: '#B09500', font: '#ffffff'},
 			{fill: '#6d8764', stroke: '#3A5431', font: '#ffffff'}, {fill: '#647687', stroke: '#314354', font: '#ffffff'},
 			{fill: '#76608a', stroke: '#432D57', font: '#ffffff'}, {fill: '#a0522d', stroke: '#6D1F00', font: '#ffffff'}],
-			[null, {fill: mxConstants.NONE, stroke: '#36393d'},
+			[{fill: '', stroke: ''}, {fill: mxConstants.NONE, stroke: ''},
 			{fill: '#fad7ac', stroke: '#b46504'}, {fill: '#fad9d5', stroke: '#ae4132'},
 			{fill: '#b0e3e6', stroke: '#0e8088'}, {fill: '#b1ddf0', stroke: '#10739e'},
 			{fill: '#d0cee2', stroke: '#56517e'}, {fill: '#bac8d3', stroke: '#23445d'}],
-		    [null,
+		    [{fill: '', stroke: ''},
 			{fill: '#f5f5f5', stroke: '#666666', gradient: '#b3b3b3'},
 			{fill: '#dae8fc', stroke: '#6c8ebf', gradient: '#7ea6e0'},
 			{fill: '#d5e8d4', stroke: '#82b366', gradient: '#97d077'},
@@ -2334,7 +2334,7 @@
 			{fill: '#fff2cc', stroke: '#d6b656', gradient: '#ffd966'},
 			{fill: '#f8cecc', stroke: '#b85450', gradient: '#ea6b66'},
 			{fill: '#e6d0de', stroke: '#996185', gradient: '#d5739d'}],
-			[null, {fill: '#eeeeee', stroke: '#36393d'},
+			[{fill: '', stroke: ''}, {fill: '#eeeeee', stroke: '#36393d'},
 			{fill: '#f9f7ed', stroke: '#36393d'}, {fill: '#ffcc99', stroke: '#36393d'},
 			{fill: '#cce5ff', stroke: '#36393d'}, {fill: '#ffff88', stroke: '#36393d'},
 			{fill: '#cdeb8b', stroke: '#36393d'}, {fill: '#ffcccc', stroke: '#36393d'}]];
@@ -3089,12 +3089,28 @@
 								
 								if (colorset != null)
 								{
-									style = mxUtils.setStyle(style, mxConstants.STYLE_FILLCOLOR, colorset['fill'] ||
-										mxUtils.getValue(defaults, mxConstants.STYLE_FILLCOLOR, null));
-									style = mxUtils.setStyle(style, mxConstants.STYLE_STROKECOLOR, colorset['stroke'] ||
-										mxUtils.getValue(defaults, mxConstants.STYLE_STROKECOLOR, null));
 									style = mxUtils.setStyle(style, mxConstants.STYLE_GRADIENTCOLOR, colorset['gradient'] ||
 										mxUtils.getValue(defaults, mxConstants.STYLE_GRADIENTCOLOR, null));
+								
+									if (colorset['fill'] == '')
+									{
+										style = mxUtils.setStyle(style, mxConstants.STYLE_FILLCOLOR,null);
+									}
+									else
+									{
+										style = mxUtils.setStyle(style, mxConstants.STYLE_FILLCOLOR, colorset['fill'] ||
+											mxUtils.getValue(defaults, mxConstants.STYLE_FILLCOLOR, null));
+									}
+									
+									if (colorset['stroke'] == '')
+									{
+										style = mxUtils.setStyle(style, mxConstants.STYLE_STROKECOLOR, null);
+									}
+									else
+									{
+										style = mxUtils.setStyle(style, mxConstants.STYLE_STROKECOLOR, colorset['stroke'] ||
+											mxUtils.getValue(defaults, mxConstants.STYLE_STROKECOLOR, null));
+									}
 									
 									if (graph.getModel().isVertex(cells[i]))
 									{
@@ -3152,14 +3168,31 @@
 						{
 							btn.style.background = 'url(\'' + Dialog.prototype.noColorImage + '\')';
 						}
+						else if (colorset['fill'] == '')
+						{
+							btn.style.backgroundColor = mxUtils.getValue(graph.defaultVertexStyle,
+								mxConstants.STYLE_FILLCOLOR, (uiTheme == 'dark') ?'#000000' : '#ffffff');
+						}
 						else
 						{
 							btn.style.backgroundColor = colorset['fill'] || mxUtils.getValue(graph.defaultVertexStyle,
-								mxConstants.STYLE_FILLCOLOR, '#ffffff');
+								mxConstants.STYLE_FILLCOLOR, (uiTheme == 'dark') ?'#000000' : '#ffffff');
 						}
 						
-						btn.style.border = '1px solid ' + (colorset['stroke'] || mxUtils.getValue(graph.defaultVertexStyle,
-							mxConstants.STYLE_STROKECOLOR, '#000000'));
+						if (colorset['stroke'] == mxConstants.NONE)
+						{
+							btn.style.border = '1px solid transparent';
+						}
+						else if (colorset['stroke'] == '')
+						{
+							btn.style.border = '1px solid ' + mxUtils.getValue(graph.defaultVertexStyle, 
+								mxConstants.STYLE_STROKECOLOR, (uiTheme != 'dark') ?'#000000' : '#ffffff');
+						}
+						else
+						{
+							btn.style.border = '1px solid ' + (colorset['stroke'] || mxUtils.getValue(graph.defaultVertexStyle,
+									mxConstants.STYLE_STROKECOLOR, (uiTheme != 'dark') ?'#000000' : '#ffffff'));
+						}
 					}
 					else
 					{

src/main/webapp/js/diagramly/EditorUi.js

@@ -207,7 +207,7 @@
 	/**
 	 * Allows for two buttons in the sidebar footer.
 	 */
-	EditorUi.prototype.sidebarFooterHeight = 36;
+	EditorUi.prototype.sidebarFooterHeight = 38;
 
 	/**
 	 * Specifies the default custom shape style.
@@ -2706,11 +2706,7 @@
 				if (dropTarget == null)
 				{
 					dropTarget = document.createElement('div');
-					mxUtils.setPrefixedStyle(dropTarget.style, 'borderRadius', '6px');
-					dropTarget.style.border = '3px dotted lightGray';
-					dropTarget.style.textAlign = 'center';
-					dropTarget.style.padding = '8px';
-					dropTarget.style.color = '#B3B3B3';
+					dropTarget.className = 'geDropTarget';
 					mxUtils.write(dropTarget, mxResources.get('dragElementsHere'));
 				}
 				
@@ -2968,25 +2964,13 @@
 				mxEvent.consume(evt);
 			});
 			
-			// Defines inactive border state
-			contentDiv.style.border = '3px solid transparent';
-			
 			// Adds drop handler from graph
 			mxEvent.addGestureListeners(contentDiv, function(){}, mxUtils.bind(this, function(evt)
 			{
 				if (graph.isMouseDown && graph.panningManager != null && graph.graphHandler.shape != null)
 				{
 					graph.graphHandler.shape.node.style.visibility = 'hidden';
-					
-					if (dropTarget != null)
-					{
-						dropTarget.style.border = '3px dotted rgb(254, 137, 12)';
-					}
-					else
-					{
-						contentDiv.style.border = '3px dotted rgb(254, 137, 12)';
-					}
-					
+					contentDiv.style.backgroundColor = '#f1f3f4';
 					contentDiv.style.cursor = 'copy';
 					graph.panningManager.stop();
 					graph.autoScroll = false;
@@ -3007,13 +2991,7 @@
 			{
 				if (graph.isMouseDown && graph.panningManager != null && graph.graphHandler != null)
 				{
-					contentDiv.style.border = '3px solid transparent';
-					
-					if (dropTarget != null)
-					{
-						dropTarget.style.border = '3px dotted lightGray';
-					}
-					
+					contentDiv.style.backgroundColor = '';
 					contentDiv.style.cursor = 'default';
 					this.sidebar.showTooltips = true;
 					graph.panningManager.stop();
@@ -3031,7 +3009,7 @@
 				if (graph.isMouseDown && graph.graphHandler.shape != null)
 				{
 					graph.graphHandler.shape.node.style.visibility = 'visible';
-					contentDiv.style.border = '3px solid transparent';
+					contentDiv.style.backgroundColor = '';
 					contentDiv.style.cursor = '';
 					graph.autoScroll = true;
 					
@@ -3044,11 +3022,6 @@
 					{
 						graph.graphHandler.hint.style.visibility = 'visible';	
 					}
-					
-					if (dropTarget != null)
-					{
-						dropTarget.style.border = '3px dotted lightGray';
-					}
 				}
 			}));
 			
@@ -3057,15 +3030,7 @@
 			{
 				mxEvent.addListener(contentDiv, 'dragover', mxUtils.bind(this, function(evt)
 				{
-					if (dropTarget != null)
-					{
-						dropTarget.style.border = '3px dotted rgb(254, 137, 12)';
-					}
-					else
-					{
-						contentDiv.style.border = '3px dotted rgb(254, 137, 12)';
-					}
-					
+					contentDiv.style.backgroundColor = '#f1f3f4';
 					evt.dataTransfer.dropEffect = 'copy';
 					contentDiv.style.cursor = 'copy';
 					this.sidebar.hideTooltip();
@@ -3075,13 +3040,8 @@
 				
 				mxEvent.addListener(contentDiv, 'drop', mxUtils.bind(this, function(evt)
 				{
-					contentDiv.style.border = '3px solid transparent';
 					contentDiv.style.cursor = '';
-					
-					if (dropTarget != null)
-					{
-						dropTarget.style.border = '3px dotted lightGray';
-					}
+					contentDiv.style.backgroundColor = '';
 					
 				    if (evt.dataTransfer.files.length > 0)
 				    {	
@@ -3209,16 +3169,8 @@
 	
 				mxEvent.addListener(contentDiv, 'dragleave', function(evt)
 				{
-					if (dropTarget != null)
-					{
-						dropTarget.style.border = '3px dotted lightGray';
-					}
-					else
-					{
-						contentDiv.style.border = '3px solid transparent';
-						contentDiv.style.cursor = '';
-					}
-	
+					contentDiv.style.cursor = '';
+					contentDiv.style.backgroundColor = '';
 					evt.stopPropagation();
 					evt.preventDefault();
 				});
@@ -3381,11 +3333,6 @@
     		Editor.prototype.initialTopSpacing = 3;
     		EditorUi.prototype.menubarHeight = 41;
     		EditorUi.prototype.toolbarHeight = 38;
-    		EditorUi.prototype.hsplitPosition = 188;
-    		Sidebar.prototype.thumbWidth = 46;
-    		Sidebar.prototype.thumbHeight = 46;
-    		Sidebar.prototype.thumbPadding = (document.documentMode >= 5) ? 0 : 1;
-    		Sidebar.prototype.thumbBorder = 2;
     	}
     	else if (uiTheme == 'dark')
     	{
@@ -3519,13 +3466,13 @@
 	 */
 	EditorUi.prototype.createSidebarFooterContainer = function()
 	{
-		var div =  this.createDiv('geSidebarContainer');
+		var div =  this.createDiv('geSidebarContainer geSidebarFooter');
 		div.style.position = 'absolute';
 		div.style.overflow = 'hidden';
-		div.style.borderWidth = '3px';
 		
 		var elt2 = document.createElement('a');
 		elt2.className = 'geTitle';
+		elt2.style.color = '#188038';
 		elt2.style.height = '100%';
 		elt2.style.paddingTop = '9px';
 		elt2.innerHTML = '<span style="font-size:18px;margin-right:5px;">+</span>';
@@ -3600,7 +3547,9 @@
 					
 					var id = window.location.hash;
 					
-					if (id != null && id.substring(0, 2) == '#G')
+					if (id != null && id.substring(0, 2) == '#G' && resp != null && resp.error != null &&
+						resp.error.errors != null && resp.error.errors.length > 0 &&
+						resp.error.errors[0].reason == 'fileAccess')
 					{
 						id = id.substring(2);
 						

src/main/webapp/js/diagramly/GitHubClient.js

@@ -25,7 +25,7 @@ GitHubClient.prototype.scope = 'repo';
 /**
  * Default extension for new files.
  */
-GitHubClient.prototype.extension = '.xml';
+GitHubClient.prototype.extension = '.drawio';
 
 /**
  * Base URL for API calls.

src/main/webapp/js/diagramly/Menus.js

@@ -1842,7 +1842,7 @@
 						pickFileFromService(editorUi.drive);
 					}, parent);
 				}
-				else if (googleEnabled)
+				else if (googleEnabled && typeof window.DriveClient === 'function')
 				{
 					menu.addItem(mxResources.get('googleDrive') + ' (' + mxResources.get('loading') + '...)', null, function()
 					{
@@ -1858,7 +1858,7 @@
 					pickFileFromService(editorUi.oneDrive);
 				}, parent);
 			}
-			else if (oneDriveEnabled)
+			else if (oneDriveEnabled && typeof window.OneDriveClient === 'function')
 			{
 				menu.addItem(mxResources.get('oneDrive') + ' (' + mxResources.get('loading') + '...)', null, function()
 				{
@@ -1873,7 +1873,7 @@
 					pickFileFromService(editorUi.dropbox);
 				}, parent);
 			}
-			else if (dropboxEnabled)
+			else if (dropboxEnabled && typeof window.DropboxClient === 'function')
 			{
 				menu.addItem(mxResources.get('dropbox') + ' (' + mxResources.get('loading') + '...)', null, function()
 				{
@@ -1883,7 +1883,7 @@
 			
 			if (editorUi.gitHub != null)
 			{
-				menu.addItem(mxResources.get('github') + '...', null, function()
+				menu.addItem(mxResources.get('gh') + '...', null, function()
 				{
 					pickFileFromService(editorUi.gitHub);
 				}, parent);
@@ -1896,7 +1896,7 @@
 					pickFileFromService(editorUi.trello);
 				}, parent);
 			}
-			else if (trelloEnabled)
+			else if (trelloEnabled && typeof window.TrelloClient === 'function')
 			{
 				menu.addItem(mxResources.get('trello') + ' (' + mxResources.get('loading') + '...)', null, function()
 				{
@@ -2407,7 +2407,7 @@
 					editorUi.pickFile(App.MODE_GOOGLE);
 				}, parent);
 			}
-			else if (googleEnabled)
+			else if (googleEnabled && typeof window.DriveClient === 'function')
 			{
 				menu.addItem(mxResources.get('googleDrive') + ' (' + mxResources.get('loading') + '...)', null, function()
 				{
@@ -2422,7 +2422,7 @@
 					editorUi.pickFile(App.MODE_ONEDRIVE);
 				}, parent);
 			}
-			else if (oneDriveEnabled)
+			else if (oneDriveEnabled && typeof window.OneDriveClient === 'function')
 			{
 				menu.addItem(mxResources.get('oneDrive') + ' (' + mxResources.get('loading') + '...)', null, function()
 				{
@@ -2437,7 +2437,7 @@
 					editorUi.pickFile(App.MODE_DROPBOX);
 				}, parent);
 			}
-			else if (dropboxEnabled)
+			else if (dropboxEnabled && typeof window.DropboxClient === 'function')
 			{
 				menu.addItem(mxResources.get('dropbox') + ' (' + mxResources.get('loading') + '...)', null, function()
 				{
@@ -2460,7 +2460,7 @@
 					editorUi.pickFile(App.MODE_TRELLO);
 				}, parent);
 			}
-			else if (trelloEnabled)
+			else if (trelloEnabled && typeof window.TrelloClient === 'function')
 			{
 				menu.addItem(mxResources.get('trello') + ' (' + mxResources.get('loading') + '...)', null, function()
 				{
@@ -2527,7 +2527,7 @@
 							editorUi.showLibraryDialog(null, null, null, null, App.MODE_GOOGLE);
 						}, parent);
 					}
-					else if (googleEnabled)
+					else if (googleEnabled && typeof window.DriveClient === 'function')
 					{
 						menu.addItem(mxResources.get('googleDrive') + ' (' + mxResources.get('loading') + '...)', null, function()
 						{
@@ -2543,7 +2543,7 @@
 						editorUi.showLibraryDialog(null, null, null, null, App.MODE_ONEDRIVE);
 					}, parent);
 				}
-				else if (oneDriveEnabled)
+				else if (oneDriveEnabled && typeof window.OneDriveClient === 'function')
 				{
 					menu.addItem(mxResources.get('oneDrive') + ' (' + mxResources.get('loading') + '...)', null, function()
 					{
@@ -2558,7 +2558,7 @@
 						editorUi.showLibraryDialog(null, null, null, null, App.MODE_DROPBOX);
 					}, parent);
 				}
-				else if (dropboxEnabled)
+				else if (dropboxEnabled && typeof window.DropboxClient === 'function')
 				{
 					menu.addItem(mxResources.get('dropbox') + ' (' + mxResources.get('loading') + '...)', null, function()
 					{
@@ -2581,7 +2581,7 @@
 						editorUi.showLibraryDialog(null, null, null, null, App.MODE_TRELLO);
 					}, parent);
 				}
-				else if (trelloEnabled)
+				else if (trelloEnabled && typeof window.TrelloClient === 'function')
 				{
 					menu.addItem(mxResources.get('trello') + ' (' + mxResources.get('loading') + '...)', null, function()
 					{
@@ -2619,7 +2619,7 @@
 							editorUi.pickLibrary(App.MODE_GOOGLE);
 						}, parent);
 					}
-					else if (googleEnabled)
+					else if (googleEnabled && typeof window.DriveClient === 'function')
 					{
 						menu.addItem(mxResources.get('googleDrive') + ' (' + mxResources.get('loading') + '...)', null, function()
 						{
@@ -2635,7 +2635,7 @@
 						editorUi.pickLibrary(App.MODE_ONEDRIVE);
 					}, parent);
 				}
-				else if (oneDriveEnabled)
+				else if (oneDriveEnabled && typeof window.OneDriveClient === 'function')
 				{
 					menu.addItem(mxResources.get('oneDrive') + ' (' + mxResources.get('loading') + '...)', null, function()
 					{
@@ -2650,7 +2650,7 @@
 						editorUi.pickLibrary(App.MODE_DROPBOX);
 					}, parent);
 				}
-				else if (dropboxEnabled)
+				else if (dropboxEnabled && typeof window.DropboxClient === 'function')
 				{
 					menu.addItem(mxResources.get('dropbox') + ' (' + mxResources.get('loading') + '...)', null, function()
 					{
@@ -2673,7 +2673,7 @@
 						editorUi.pickLibrary(App.MODE_TRELLO);
 					}, parent);
 				}
-				else if (trelloEnabled)
+				else if (trelloEnabled && typeof window.TrelloClient === 'function')
 				{
 					menu.addItem(mxResources.get('trello') + ' (' + mxResources.get('loading') + '...)', null, function()
 					{

src/main/webapp/js/diagramly/Minimal.js

@@ -348,7 +348,7 @@ EditorUi.initMinimalTheme = function()
         {
         	// Makes room for view zoom menu
         	this.tabContainer.style.right = '70px';
-        	this.diagramContainer.style.bottom = '30px';
+        	this.diagramContainer.style.bottom = this.tabContainerHeight + 'px';
         }
     	
     	editorUiUpdateTabContainer.apply(this, arguments);
@@ -1242,10 +1242,11 @@ EditorUi.initMinimalTheme = function()
 			elt.style.fontSize = '12px';
 			elt.style.color = '#707070';
 			elt.style.width = '59px';
+			elt.style.cursor = 'pointer';
 			elt.style.borderTop = '1px solid lightgray';
 			elt.style.borderLeft = '1px solid lightgray';
-			elt.style.height = (parseInt(ui.tabContainer.style.height) - 1) + 'px';
-			elt.style.lineHeight = (parseInt(ui.tabContainer.style.height) + 1) + 'px';
+			elt.style.height = (parseInt(ui.tabContainerHeight) - 1) + 'px';
+			elt.style.lineHeight = (parseInt(ui.tabContainerHeight) + 1) + 'px';
 			wrapper.appendChild(elt);
 	        
 	    	// Updates the label if the scale changes
@@ -1268,7 +1269,8 @@ EditorUi.initMinimalTheme = function()
 	    		if (this.tabContainer != null)
 	    		{
 	    			elt.style.visibility = this.tabContainer.style.visibility;
-    	        	this.diagramContainer.style.bottom = (this.tabContainer.style.visibility != 'hidden') ? '30px' : '0px';
+    	        	this.diagramContainer.style.bottom = (this.tabContainer.style.visibility != 'hidden') ?
+    	        		this.tabContainerHeight + 'px' : '0px';
 	    		}
 	    	};
 		}

src/main/webapp/js/diagramly/OneDriveClient.js

@@ -50,7 +50,7 @@ OneDriveClient.prototype.endpointHint = OneDriveClient.prototype.defEndpointHint
 /**
  * Executes the first step for connecting to Google Drive.
  */
-OneDriveClient.prototype.extension = '.html';
+OneDriveClient.prototype.extension = '.drawio';
 
 /**
  * Executes the first step for connecting to Google Drive.

src/main/webapp/js/diagramly/Pages.js

@@ -261,6 +261,11 @@ ChangePage.prototype.execute = function()
 	}
 };
 
+/**
+ * Specifies the height of the tab container. Default is 38.
+ */
+EditorUi.prototype.tabContainerHeight = 38;
+
 /**
  * Returns the index of the selected page.
  */
@@ -338,7 +343,7 @@ EditorUi.prototype.initPages = function()
 			}
 			else
 			{
-				this.tabContainer.style.height = '30px';
+				this.tabContainer.style.height = this.tabContainerHeight + 'px';
 			}
 			
 			if (prevHeight != this.tabContainer.style.height)
@@ -984,7 +989,7 @@ EditorUi.prototype.movePage = function(oldIndex, newIndex)
 EditorUi.prototype.createTabContainer = function()
 {
 	var div = document.createElement('div');
-	div.style.backgroundColor = (uiTheme == 'dark') ? '#2a2a2a' : '#dcdcdc';
+	div.className = 'geTabContainer';
 	div.style.position = 'absolute';
 	div.style.whiteSpace = 'nowrap';
 	div.style.overflow = 'hidden';
@@ -1008,7 +1013,7 @@ EditorUi.prototype.updateTabContainer = function()
 		wrapper.style.height = this.tabContainer.style.height;
 		wrapper.style.whiteSpace = 'nowrap';
 		wrapper.style.overflow = 'hidden';
-		wrapper.style.fontSize = '12px';
+		wrapper.style.fontSize = '13px';
 		
 		// Allows for negative left margin of first tab
 		wrapper.style.marginLeft = '30px';
@@ -1027,9 +1032,7 @@ EditorUi.prototype.updateTabContainer = function()
 				if (this.pages[index] == this.currentPage)
 				{
 					tab.className = 'geActivePage';
-					tab.style.backgroundColor = (uiTheme == 'dark') ? '#2a2a2a' : '#eeeeee';
-					tab.style.fontWeight = 'bold';
-					tab.style.borderTopStyle = 'none';
+					tab.style.backgroundColor = (uiTheme == 'dark') ? '#2a2a2a' : '#fff';
 				}
 				else
 				{
@@ -1178,11 +1181,13 @@ EditorUi.prototype.createTab = function(hoverEnabled)
 	tab.style.boxSizing = 'border-box';
 	tab.style.position = 'relative';
 	tab.style.overflow = 'hidden';
+	tab.style.textAlign = 'center';
 	tab.style.marginLeft = '-1px';
 	tab.style.height = this.tabContainer.clientHeight + 'px';
-	tab.style.padding = '8px 4px 8px 4px';
-	tab.style.border = (uiTheme == 'dark') ? '1px solid #505759' : '1px solid #c0c0c0';
-	tab.style.borderBottomStyle = 'solid';
+	tab.style.padding = '12px 4px 8px 4px';
+	tab.style.border = (uiTheme == 'dark') ? '1px solid #505759' : '1px solid #e8eaed';
+	tab.style.borderTopStyle = 'none';
+	tab.style.borderBottomStyle = 'none';
 	tab.style.backgroundColor = this.tabContainer.style.backgroundColor;
 	tab.style.cursor = 'move';
 	tab.style.color = 'gray';
@@ -1193,7 +1198,7 @@ EditorUi.prototype.createTab = function(hoverEnabled)
 		{
 			if (!this.editor.graph.isMouseDown)
 			{
-				tab.style.backgroundColor = (uiTheme == 'dark') ? 'black' : '#d3d3d3';
+				tab.style.backgroundColor = (uiTheme == 'dark') ? 'black' : '#e8eaed';
 				mxEvent.consume(evt);
 			}
 		}));
@@ -1214,10 +1219,10 @@ EditorUi.prototype.createTab = function(hoverEnabled)
 EditorUi.prototype.createControlTab = function(paddingTop, html)
 {
 	var tab = this.createTab(true);
+	tab.style.lineHeight = this.tabContainerHeight + 'px';
 	tab.style.paddingTop = paddingTop + 'px';
 	tab.style.cursor = 'pointer';
 	tab.style.width = '30px';
-	tab.style.lineHeight = '30px';
 	tab.innerHTML = html;
 
 	if (tab.firstChild != null && tab.firstChild.style != null)
@@ -1233,9 +1238,10 @@ EditorUi.prototype.createControlTab = function(paddingTop, html)
  */
 EditorUi.prototype.createPageMenuTab = function()
 {
-	var tab = this.createControlTab(3, '<div class="geSprite geSprite-dots" style="display:inline-block;width:21px;height:21px;"></div>');
+	var tab = this.createControlTab(3, '<div class="geSprite geSprite-dots" style="display:inline-block;margin-top:5px;width:21px;height:21px;"></div>');
 	tab.setAttribute('title', mxResources.get('pages'));
 	tab.style.position = 'absolute';
+	tab.style.marginLeft = '0px';
 	tab.style.top = '0px';
 	tab.style.left = '1px';
 	

src/main/webapp/js/mxgraph/EditorUi.js

@@ -972,9 +972,9 @@ EditorUi.prototype.formatEnabled = true;
 EditorUi.prototype.formatWidth = 240;
 
 /**
- * Specifies the height of the toolbar. Default is 36.
+ * Specifies the height of the toolbar. Default is 40.
  */
-EditorUi.prototype.toolbarHeight = 34;
+EditorUi.prototype.toolbarHeight = 40;
 
 /**
  * Specifies the height of the footer. Default is 28.
@@ -987,10 +987,10 @@ EditorUi.prototype.footerHeight = 28;
 EditorUi.prototype.sidebarFooterHeight = 34;
 
 /**
- * Specifies the position of the horizontal split bar. Default is 208 or 118 for
+ * Specifies the position of the horizontal split bar. Default is 240 or 118 for
  * screen widths <= 640px.
  */
-EditorUi.prototype.hsplitPosition = (screen.width <= 640) ? 118 : 208;
+EditorUi.prototype.hsplitPosition = (screen.width <= 640) ? 118 : 240;
 
 /**
  * Specifies if animations are allowed in <executeLayout>. Default is true.

src/main/webapp/js/mxgraph/Format.js

@@ -25,7 +25,7 @@ Format.prototype.showCloseButton = true;
 /**
  * Background color for inactive tabs.
  */
-Format.prototype.inactiveTabBackgroundColor = '#d7d7d7';
+Format.prototype.inactiveTabBackgroundColor = '#f1f3f4';
 
 /**
  * Background color for inactive tabs.
@@ -354,14 +354,16 @@ Format.prototype.refresh = function()
 	div.style.cursor = 'default';
 	
 	var label = document.createElement('div');
-	label.style.border = '1px solid #c0c0c0';
-	label.style.borderWidth = '0px 0px 1px 0px';
+	label.className = 'geFormatSection';
 	label.style.textAlign = 'center';
 	label.style.fontWeight = 'bold';
-	label.style.overflow = 'hidden';
-	label.style.display = (mxClient.IS_QUIRKS) ? 'inline' : 'inline-block';
 	label.style.paddingTop = '8px';
+	label.style.fontSize = '14px';
+	label.style.borderWidth = '0px 0px 1px 1px';
+	label.style.borderStyle = 'solid';
+	label.style.display = (mxClient.IS_QUIRKS) ? 'inline' : 'inline-block';
 	label.style.height = (mxClient.IS_QUIRKS) ? '34px' : '25px';
+	label.style.overflow = 'hidden';
 	label.style.width = '100%';
 	this.container.appendChild(div);
 	
@@ -697,8 +699,8 @@ BaseFormatPanel.prototype.installInputHandler = function(input, key, defaultValu
 BaseFormatPanel.prototype.createPanel = function()
 {
 	var div = document.createElement('div');
+	div.className = 'geFormatSection';
 	div.style.padding = '12px 0px 12px 18px';
-	div.style.borderBottom = '1px solid #c0c0c0';
 	
 	return div;
 };

src/main/webapp/plugins/googledrive.js

@@ -0,0 +1,16 @@
+/**
+ * Google Drive plugin limits supported storage to Google Drive, browser and device.
+ */
+Draw.loadPlugin(function(ui)
+{
+	ui.oneDrive = null;
+	ui.dropbox = null;
+	ui.gitHub = null;
+	ui.trello = null;
+
+	window.OneDriveClient = null;
+	window.DropboxClient = null;
+	window.TrelloClient = null;
+	
+	isLocalStorage = false;
+});

src/main/webapp/styles/atlas.css

@@ -28,7 +28,6 @@ body > .geToolbarContainer .geLabel, body > .geToolbarContainer .geButton {
 	-moz-box-shadow: none !important;
 	box-shadow: none !important;
 	border: 1px solid transparent !important;
-	background: none !important;
 }
 body > .geToolbarContainer {
 	background: #f5f5f5 !important;

src/main/webapp/styles/dark.css

@@ -1,8 +1,17 @@
-html body .geDiagramContainer, html body div.geMenubarContainer, html body div.mxPopupMenu, html body td.mxPopupMenuIcon, html body .geFormatContainer, html body div.geMenubarContainer .geStatus:hover {
+html body .geDiagramContainer, html body div.geMenubarContainer, html body td.mxPopupMenuIcon, html body .geFormatContainer, html body div.geMenubarContainer .geStatus:hover {
 	background-color:#2a2a2a;
 }
-html body .geSidebarContainer {
-	border-top: 1px solid #505759;
+html body.geEditor div.mxPopupMenu {
+	border:3px solid #505759;
+	background:#2a2a2a;
+	box-shadow:none;
+}
+html body.geEditor div.mxPopupMenu hr {
+	background-color:#505759;
+}
+html body .geTabContainer {
+	border-top:1px solid #505759;
+	background-color:#2a2a2a;
 }
 html body .geMenubarContainer .geItem:active {
 	opacity: 0.7;
@@ -17,12 +26,17 @@ html body .geFooterContainer a {
 html body div.mxRubberband {
 	border:1px dashed #ffffff !important; background:#505759 !important;
 }
-html body .geToolbarContainer, html body .geSidebar, html body .geSidebarContainer .geTitle, html body input, html body textarea, html body button, html body .geColorBtn, html body .geBaseButton, html body .geSidebarTooltip {
+html body .geToolbarContainer, html body .geSidebar, html body .geSidebarContainer .geTitle, html body input,
+html body textarea, html body button, html body .geColorBtn, html body .geBaseButton, html body .geSidebarTooltip,
+html body .geBaseButton {
 	background:#2a2a2a;
 	border-color:#505759;
 	box-shadow:none;
 	color:#cccccc;
 }
+html body .geSidebarTooltip {
+	border:1px solid #505759;
+}
 html body .geSprite, html body .geSocialFooter img, html body .mxPopupMenuItem>img {
 	filter:invert(100%);
 }
@@ -30,6 +44,13 @@ html body .geFormatContainer {
 	background-color:#2a2a2a !important;
 	border-left:1px solid #505759;
 }
+html body .geSidebarFooter {
+	border-top:1px solid #505759;
+}
+html body .geFormatSection {
+	border-bottom:1px solid #505759;
+	border-color:#505759;
+}
 html body .geDiagramContainer {
 	border-color:#505759;
 }
@@ -48,10 +69,6 @@ html body .geFooterContainer a {
 html body .geFooterContainer td:hover, html body #geFooterItem1:hover {
 	background-color:#000000;
 }
-html body div.mxPopupMenu {
-	border-color:#505759 !important;
-	box-shadow:none;
-}
 html body .geSidebarContainer, html body .geDiagramBackdrop {
 	background-color:#2a2a2a;
 }
@@ -84,12 +101,22 @@ html body tr.mxPopupMenuItemHover {
 	background:#000000;
 	color:#cccccc;
 }
-html body .geSidebarContainer .geTitle:hover, html body .geMenubarContainer .geItem:hover, html body .geBaseButton:hover {
+html body .geSidebarContainer .geTitle:hover, html body .geSidebarContainer .geItem:hover,
+html body .geMenubarContainer .geItem:hover, html body .geBaseButton:hover {
 	background:#000000;
 }
-html body .geHsplit, html body .geToolbarContainer .geSeparator, html body table.mxPopupMenu hr {
+html body .geToolbarContainer .geSeparator {
 	background-color:#505759;
 }
+html body .geHsplit, html body table.mxPopupMenu hr {
+	border-color:#505759;
+	background-color:#2a2a2a;
+}
+html body .geToolbarContainer .geButton:hover, html body .geToolbarContainer .geButton:active,
+html body .geToolbarContainer .geLabel:hover, html body .geToolbarContainer .geLabel:active,
+html body .geHsplit:hover, html body .geVsplit:hover {
+	background-color:#000;
+}
 html body .geToolbar {
 	border-color:#505759;
 	box-shadow:none;
@@ -108,21 +135,11 @@ html body .geActivePage {
 	-moz-box-shadow: 1px 1px 1px 0px #ccc;
 	box-shadow: 1px 1px 1px 0px #ccc;
 }
-.geEditor ::-webkit-scrollbar-corner {
-	background-color: #2a2a2a;
-}
-.geEditor ::-webkit-scrollbar-track {
-	background-color: #000;
-}
-.geEditor ::-webkit-scrollbar-thumb {
+html .geEditor ::-webkit-scrollbar-thumb {
 	background-color: #505759;
-	border:#000 solid 3px;
-}
-.geEditor ::-webkit-scrollbar-thumb:hover {
-	background:#b5b5b5;
 }
-.geHsplit:hover, .geVsplit:hover {
-	background-color:#b5b5b5;
+html .geEditor ::-webkit-scrollbar-thumb:hover, .geHsplit:hover, .geVsplit:hover {
+	background-color:#a0a0a0;
 }
 html body .geStatusAlert {
 	background-color:#a20025;

src/main/webapp/styles/grapheditor.css

@@ -1,19 +1,24 @@
 .geEditor {
-	font-family:Helvetica Neue,Helvetica,Arial Unicode MS,Arial;
-	font-size:10pt;
+	font-family:Roboto,Helvetica,Arial,sans-serif;
+	font-size:14px;
 	border:none;
 	margin:0px;
 }
 .geEditor input[type=text]::-ms-clear {
 	display: none;
 }
+.geEditor div.mxTooltip {
+	background: whiteSmoke;
+	border-color: lightGray;
+	font-size: 11px;
+	color: black;
+	padding:6px;
+}
 .geMenubarContainer .geItem, .geToolbar .geButton, .geToolbar .geLabel, .geSidebarContainer .geTitle {
 	cursor:pointer !important;
 }
 .geBackgroundPage {
-  	-webkit-box-shadow:0px 0px 3px 0px #d9d9d9;
-	-moz-box-shadow:0px 0px 3px 0px #d9d9d9;
-  	box-shadow:0px 0px 3px 0px #d9d9d9;
+  	box-shadow:0px 0px 2px 1px #e9e9e9;
 }
 .geSidebarContainer a, .geMenubarContainer a, .geToolbar a {
 	color:#000000;
@@ -25,14 +30,20 @@
 	cursor:default;
 }
 .geFormatContainer {
-	background-color: whiteSmoke !important;
-	overflow-x: hidden !important;
-	overflow-y: auto !important;
+	overflow-x:hidden !important;
+	overflow-y:auto !important;
 	font-size:12px;
+	border-left:1px solid #dadce0;
+}
+.geSidebarFooter {
+	border-top:1px solid #dadce0;
+}
+.geFormatSection {
+	border-bottom:1px solid #dadce0;
+	border-color:#dadce0;
 }
 .geDiagramContainer {
 	background-color:#ffffff;
-	border: 1px solid #e5e5e5;
 	font-size:0px;
 	outline:none;
 }
@@ -112,8 +123,9 @@
 	border: 1px solid #d8d8d8;
 	color: #333;
 	cursor: default;
-	font-size: 11px;
-	font-weight: bold;
+	font-size: 13px;
+	font-weight: 500;
+	letter-spacing:0.25px;
 	height: 29px;
 	line-height: 27px;
 	margin: 0 0 0 8px;
@@ -204,6 +216,10 @@
 	font-weight:700;
 	text-decoration:none;
 }
+.geActivePage {
+	font-weight:bold;
+	color:#188038 !important;
+}
 .geMenubarContainer {
 	background-color:#ffffff;
 }
@@ -216,7 +232,10 @@
 	cursor:default;
 }
 .geMenubarContainer .geItem:hover {
-	background:#eeeeee;
+	background: #f1f3f4;
+}
+.geMenubarContainer .geItem:active {
+	background: #e8f0fe;
 }
 .mxDisabled:hover {
 	background:inherit !important;
@@ -230,12 +249,8 @@
 .geMenubar a.geStatus:hover {
 	background:transparent;
 }
-.geMenubarMenu {
-	border:1px solid #d5d5d5 !important;
-}
 .geToolbarContainer {
-	background:whiteSmoke;
-	border-bottom:1px solid #e0e0e0;
+	border-bottom:1px solid #dadce0;
 }
 .geSidebarContainer .geToolbarContainer {
 	background:transparent;
@@ -246,20 +261,21 @@
 	overflow:hidden;
 }
 .geToolbar {
-	padding:1px 0px 0px 6px;
-	border-top:1px solid #e0e0e0;
+	padding:1px 0px 0px 4px;
+	border-top:1px solid #dadce0;
 	-webkit-box-shadow: inset 0 1px 0 0 #fff;
 	-moz-box-shadow: inset 0 1px 0 0 #fff;
 	box-shadow: inset 0 1px 0 0 #fff;
+	padding-top:5px;
 }
 .geToolbarContainer .geSeparator {
 	float:left;
 	width:1px;
-	height:34px;
+	height:20px;
 	background:#e5e5e5;
 	margin-left:6px;
 	margin-right:6px;
-	margin-top:-2px;
+	margin-top:4px;
 }
 .geToolbarContainer .geButton {
 	float:left;
@@ -273,13 +289,12 @@
 	_filter:alpha(opacity=60);
 }
 .geToolbarContainer .geButton:hover {
-	border:1px solid gray;
-	border-radius:2px;
 	opacity:1;
 	_filter:none !important;
+	background: #f1f3f4;
 }
 .geToolbarContainer .geButton:active {
-	border:1px solid black;
+	background: #e8f0fe;
 }
 div.mxWindow .geButton {
 	margin: -1px 2px 2px 2px;
@@ -295,13 +310,12 @@ div.mxWindow .geButton {
 	filter:alpha(opacity=60);
 }
 .geToolbarContainer .geLabel:hover {
-	border:1px solid gray;
-	border-radius:2px;
+	background: #f1f3f4;
 	opacity:0.9;
 	filter:alpha(opacity=90) !important;
 }
 .geToolbarContainer .geLabel:active {
-	border:1px solid black;
+	background: #e8f0fe;
 	opacity:1;
 	filter:none !important;
 }
@@ -310,47 +324,50 @@ div.mxWindow .geButton {
 	opacity:0.2 !important;
 	filter:alpha(opacity=20) !important;
 }
-.geToolbarMenu {
-	border:3px solid #e0e0e0 !important;
-	-webkit-box-shadow:none !important;
-	-moz-box-shadow:none !important;
-	box-shadow:none !important;
-	filter:none !important;
-}
 .geDiagramBackdrop {
-	background-color: #ebebeb;
+	background-color: #f8f9fa;
 }
 .geSidebarContainer {
 	background:#ffffff;
 	overflow:hidden;
 	position:absolute;
-	border-top:1px solid #e5e5e5;
 	overflow:auto;
 }
+.geTabContainer {
+	border-top:1px solid #e5e5e5;
+	background-color:#f1f3f4;
+}
 .geSidebar {
-	background:whiteSmoke;
 	border-bottom:1px solid #e5e5e5;
-	padding:5px;
-	_padding:1px;
+	padding:8px;
+	_padding:4px;
 	padding-bottom:12px;
 	overflow:hidden;
 }
 .geSidebarContainer .geTitle {
 	display:block;
-	font-size:9pt;
+	font-size:13px;
 	border-bottom:1px solid #e5e5e5;
-	font-weight:normal;
-	padding:6px 0px 6px 14px;
+	font-weight:500;
+	padding:8px 0px 8px 14px;
 	margin:0px;
 	cursor:default;
-	background:#eeeeee;
 	white-space:nowrap;
 	overflow:hidden;
 	text-overflow:ellipsis;
 	line-height:1.4em;
 }
 .geSidebarContainer .geTitle:hover {
-	background:#e5e5e5;
+	background-color:#f1f3f4;
+}
+.geSidebarContainer .geDropTarget {
+	border-radius:10px;
+	border:2px dotted #e5e5e5;
+	text-align:center;
+	padding:6px;
+	margin:6px;
+	color:#d0d0d0;
+	fontSize:13px;
 }
 .geTitle img {
 	opacity:0.5;
@@ -372,12 +389,10 @@ div.mxWindow .geButton {
 	display:inline-block;
 	background-repeat:no-repeat;
 	background-position:50% 50%;
-	border:1px solid transparent;
-	border-radius:2px;
 	cursor: move;
 }
 .geSidebar .geItem:hover {
-	border:1px solid gray !important;
+	background-color:#f1f3f4;
 }
 .geItem {
 	vertical-align: top;
@@ -387,11 +402,8 @@ div.mxWindow .geButton {
 	position:absolute;
 	background:white;
 	overflow:hidden;
-	border:1px solid gray;
-	border-radius:8px;
-	-webkit-box-shadow:0px 0px 2px 2px #d5d5d5;
-	-moz-box-shadow:0px 0px 2px 2px #d5d5d5;
-	box-shadow:0px 0px 2px 2px #d5d5d5;
+	box-shadow:0 2px 6px 2px rgba(60,64,67,.15);
+	border-radius:6px;
 	_filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=2, OffY=2, Color='#d5d5d5', Positive='true');
 }
 .geFooterContainer {
@@ -421,7 +433,6 @@ div.mxWindow .geButton {
 }
 .geHsplit {
 	cursor:col-resize;
-	background-color:#e5e5e5;
 	background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAHBAMAAADdS/HjAAAAGFBMVEUzMzP///9tbW1QUFCKiopBQUF8fHxfX1/IXlmXAAAAHUlEQVQImWMQEGAQFWUQFmYQF2cQEmIQE2MQEQEACy4BF67hpEwAAAAASUVORK5CYII=);
 	_background-image:url('thumb_vertical.png');
 	background-repeat:no-repeat;
@@ -430,14 +441,21 @@ div.mxWindow .geButton {
 .geVsplit {
 	font-size:1pt;
 	cursor:row-resize;
-	background-color:#e5e5e5;
 	background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAEBAMAAACw6DhOAAAAGFBMVEUzMzP///9tbW1QUFCKiopBQUF8fHxfX1/IXlmXAAAAFElEQVQImWNgNVdzYBAUFBRggLMAEzYBy29kEPgAAAAASUVORK5CYII=);
 	_background-image:url('thumb_horz.png');
 	background-repeat:no-repeat;
 	background-position:center center;
 }
+.geHsplit {
+	border-left:1px solid #e5e5e5;
+	border-right:1px solid #e5e5e5;
+}
+.geVSplit {
+	border-top:1px solid #e5e5e5;
+	border-bottom:1px solid #e5e5e5;
+}
 .geHsplit:hover, .geVsplit:hover {
-	background-color:#d5d5d5;
+	background-color:#f1f3f4;
 }
 .geDialog {
 	position:absolute;
@@ -668,14 +686,11 @@ td.mxPopupMenuIcon div {
 	width:16px;
 	height:16px;
 }
-html div.mxPopupMenu {
-	-webkit-box-shadow:2px 2px 3px #d5d5d5;
-	-moz-box-shadow:2px 2px 3px #d5d5d5;
-	box-shadow:2px 2px 3px #d5d5d5;
-	_filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=2, OffY=2, Color='#d0d0d0', Positive='true');
+.geEditor div.mxPopupMenu {
+	box-shadow:0 2px 6px 2px rgba(60,64,67,.15);
 	background:white;
-	position:absolute;
-	border:3px solid #e7e7e7;
+	border-radius:4px;
+	border:none;
 	padding:3px;
 }
 html table.mxPopupMenu {