diff options
11 files changed, 309 insertions, 20 deletions
diff --git a/bundles/org.eclipse.orion.client.git/web/git/css/git.css b/bundles/org.eclipse.orion.client.git/web/git/css/git.css index 8821070..95bce5e 100644 --- a/bundles/org.eclipse.orion.client.git/web/git/css/git.css +++ b/bundles/org.eclipse.orion.client.git/web/git/css/git.css @@ -63,6 +63,7 @@ .gitPanel { min-width: 800px; background:white; + height:100%; } /* sprites */ diff --git a/bundles/org.eclipse.orion.client.ui/web/css/ide.css b/bundles/org.eclipse.orion.client.ui/web/css/ide.css index 046523f..c61c3bf 100644 --- a/bundles/org.eclipse.orion.client.ui/web/css/ide.css +++ b/bundles/org.eclipse.orion.client.ui/web/css/ide.css @@ -63,7 +63,7 @@ button::-moz-focus-inner { .navlinkonpage, .nav_fakelink { text-decoration: none; padding: 2px; - color: #333333; + color: #555; } .navlinkonpage:active { @@ -100,12 +100,12 @@ button::-moz-focus-inner { .pageActions { min-height: 28px; - margin-top: 4px; + margin-top: 8px; } /* 4px margin used by toolbar, plus 4px of border/padding */ .status { - padding-top: 8px; + padding-top: 10px; color:#555; vertical-align: baseline; } @@ -931,12 +931,12 @@ input { } .projectNavColumn a{ - color: #444; + color: #555; font-weight: bold; } .projectPrimaryNavColumn a{ - color: #444; + color: #555; font-weight: bold; } diff --git a/bundles/org.eclipse.orion.client.ui/web/css/images.css b/bundles/org.eclipse.orion.client.ui/web/css/images.css index b3c9f80..af95307 100644 --- a/bundles/org.eclipse.orion.client.ui/web/css/images.css +++ b/bundles/org.eclipse.orion.client.ui/web/css/images.css @@ -151,6 +151,7 @@ .core-sprite-wrench{ font-size: 16px; + line-height:16px; vertical-align:middle; color: #555555; font-family: 'Orion Icon Font'; diff --git a/bundles/org.eclipse.orion.client.ui/web/css/layout.css b/bundles/org.eclipse.orion.client.ui/web/css/layout.css index b333168..7dcd4a6 100644 --- a/bundles/org.eclipse.orion.client.ui/web/css/layout.css +++ b/bundles/org.eclipse.orion.client.ui/web/css/layout.css @@ -313,7 +313,7 @@ hard-coded numbers elsewhere. left: 33%; /* override this value if you want a different proportion of the two split panes */
height: 100%;
z-index: 50;
- width: 4px;
+ width: 5px;
margin-right: 3px;
cursor: e-resize;
overflow: hidden;
@@ -335,9 +335,11 @@ hard-coded numbers elsewhere. .splitThumbLayout {
position: relative;
left: 0;
- height: 2em;
+ height: 3em;
top: 49%;
cursor: pointer;
+ border-top-left-radius: 5px;
+ border-bottom-left-radius: 5px;
}
.splitVerticalThumbLayout {
@@ -395,3 +397,55 @@ hard-coded numbers elsewhere. margin-left: 4px !important;
margin-right: 4px !important;
}
+
+.sideMenu{
+ height: calc( 100% - 36px );
+ width: 0;
+ background: #2f313a;
+ float: left;
+ position: absolute;
+ top: 36px;
+ -webkit-animation: slide 0.5s forwards;
+ -webkit-animation-delay: 2s;
+ animation: slide 0.5s forwards;
+ animation-delay: 2s;
+}
+
+.sideMenuList{
+ padding:15px;
+}
+
+.sideMenuItem{
+ list-style-type: none;
+ padding: 0;
+ padding-bottom:15px;
+}
+
+.sideMenuItem.hover{
+ text-decoration:none;
+}
+
+.active{
+ color:whitesmoke !important;
+ font-size:20px !important;
+ text-decoration:none !important;
+}
+
+.inactive{
+ color:#999 !important;
+ font-size:20px !important;
+ text-decoration:none !important;
+}
+
+@-webkit-keyframes slide {
+ 100% { left: 0; }
+}
+
+@keyframes slide {
+ 100% { left: 0; }
+}
+
+.mainContent{
+ position:absolute;
+ left:50px;
+}
diff --git a/bundles/org.eclipse.orion.client.ui/web/css/theme.css b/bundles/org.eclipse.orion.client.ui/web/css/theme.css index 54ecc16..d8e56b3 100644 --- a/bundles/org.eclipse.orion.client.ui/web/css/theme.css +++ b/bundles/org.eclipse.orion.client.ui/web/css/theme.css @@ -14,7 +14,6 @@ background-color: rgb(51, 51, 51);
height: 16px;
padding: 10px 3px 6px 2px;
- display: -webkit-box;
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
@@ -85,7 +84,7 @@ a:hover { /* Row selection */
.checkedRow {
- background-color: #ffeecc !important; /* was e3e3e3 */
+ background-color: lightblue !important; /* was e3e3e3 */
}
.navbar-item-selected {
@@ -141,17 +140,19 @@ a.currentLocation:hover { .auxpane {
border: 0;
background: #eeeeee;
+ padding-left: 10px;
}
.mainpane {
border: 0;
background: #eee !important;
- padding-right:10px;
+ padding-right:15px;
}
.mainToolbar {
background: #eeeeee;
/* border-bottom: 1px solid #ebebeb; */
+ /* padding-left:50px; */
}
/* Filesystem switcher toolbar */
@@ -176,7 +177,7 @@ a.currentLocation:hover { -webkit-user-select: none;
-ms-user-select: none;
user-select: none;
- color:#444;
+ color:#555;
}
.filesystemSwitcher {
@@ -316,7 +317,7 @@ a.currentLocation:hover { }
.splitThumb {
- background: #EEEEEE;
+ background: #ccc;
}
/* dropdowns */
diff --git a/bundles/org.eclipse.orion.client.ui/web/edit/edit.html b/bundles/org.eclipse.orion.client.ui/web/edit/edit.html index d6db808..fed8f23 100644 --- a/bundles/org.eclipse.orion.client.ui/web/edit/edit.html +++ b/bundles/org.eclipse.orion.client.ui/web/edit/edit.html @@ -26,7 +26,7 @@ <div class="content-fixedHeight"> <div id="pageToolbar" class="mainToolbar toolComposite toolbarLayout"></div> <div id="innerPanels" style="position:absolute;width:100%;top:32px;bottom:0;"> - <div class="auxpane sidePanelLayout hasSplit"> + <div id="auxpane" class="auxpane sidePanelLayout hasSplit"> <div class="fixedToolbarHolder"> <div id="sidebarToolbar" class="sidebarToolbar mainToolbar toolComposite toolbarLayout"></div> <div id="sidebar" class="dropdownTrigger toolbarTarget"></div> @@ -40,6 +40,10 @@ </div> </div> </div> + <div id="sideMenu" class="sideMenu"> + <ul id="sideMenuAnchor" class="sideMenuList"> + </ul> + </div> <div class="footer-fixed-bottom footer" id="footer"> </div> <div id="contentassist" class="contentassist" role="listbox" tabindex="-1"></div> diff --git a/bundles/org.eclipse.orion.client.ui/web/edit/setup.js b/bundles/org.eclipse.orion.client.ui/web/edit/setup.js index 41610f7..00d5bb7 100644 --- a/bundles/org.eclipse.orion.client.ui/web/edit/setup.js +++ b/bundles/org.eclipse.orion.client.ui/web/edit/setup.js @@ -45,14 +45,15 @@ define([ 'orion/PageUtil', 'orion/objects', 'orion/webui/littlelib', - 'orion/projectClient' + 'orion/projectClient', + 'orion/webui/SideMenu' ], function( messages, Sidebar, mInputManager, mGlobalCommands, mTextModel, mUndoStack, mFolderView, mEditorView, mPluginEditorView , mMarkdownView, mCommandRegistry, mContentTypes, mFileClient, mFileCommands, mSelection, mStatus, mProgress, mOperationsClient, mOutliner, mDialogs, mExtensionCommands, mSearchClient, mProblems, mBlameAnnotation, - Deferred, EventTarget, URITemplate, i18nUtil, PageUtil, objects, lib, mProjectClient + Deferred, EventTarget, URITemplate, i18nUtil, PageUtil, objects, lib, mProjectClient, SideMenu ) { var exports = {}; @@ -185,6 +186,15 @@ exports.setUpEditor = function(serviceRegistry, pluginRegistry, preferences, isR commandRegistry.renderCommands(settingsToolbar.id, settingsToolbar, metadata, editor, "button"); //$NON-NLS-0$ } } + + var sideMenu = new SideMenu(); + sideMenu.setSideMenu(); + + sideMenu.addMenuItem( "core-sprite-edit", "http://www.google.com" ); + sideMenu.addMenuItem( "core-sprite-deploy", "http://www.bbc.co.uk" ); + + sideMenu.setActiveMenuItem( "http://www.bbc.co.uk" ); + return deferred; } diff --git a/bundles/org.eclipse.orion.client.ui/web/orion/globalCommands.js b/bundles/org.eclipse.orion.client.ui/web/orion/globalCommands.js index d09143a..288629b 100644 --- a/bundles/org.eclipse.orion.client.ui/web/orion/globalCommands.js +++ b/bundles/org.eclipse.orion.client.ui/web/orion/globalCommands.js @@ -555,6 +555,64 @@ define([ return globalEventTarget; } + function setSideMenu(){ + + var sideMenuNavigation = localStorage.getItem('sideMenuNavigation'); + + if( sideMenuNavigation ){ + + if( sideMenuNavigation === "closed" ){ + setSideMenuWidth( "0" ); + } + + if( sideMenuNavigation === "open" ){ + setSideMenuWidth( "50px" ); + } + } + } + + function setSideMenuWidth( sideMenuWidth ){ + + var sideToolBar = lib.node( "sideMenu" ); + var auxpane = lib.node( "auxpane" ); + var mainToolBar = lib.node( "pageToolbar"); + + if( sideToolBar ){ + sideToolBar.style.width = sideMenuWidth; + } + + if( auxpane ){ + auxpane.style.left = sideMenuWidth; + } + + if( mainToolBar ){ + mainToolBar.style.paddingLeft = sideMenuWidth; + } + } + + function toggleSideMenu(){ + + var sideMenuWidth = "50px"; + + var newState = "open"; + + var sideMenuNavigation = localStorage.getItem('sideMenuNavigation'); + + if( sideMenuNavigation ){ + + /* if this is true, a person has pinned the menu sometime before */ + + if( sideMenuNavigation === "open" ){ + newState = "closed"; + sideMenuWidth = "0"; + } + } + + localStorage.setItem('sideMenuNavigation', newState); + + setSideMenuWidth( sideMenuWidth ); + } + /** * Generates the banner at the top of a page. @@ -843,6 +901,8 @@ define([ setPageTarget: setPageTarget, setDirtyIndicator: setDirtyIndicator, setPageCommandExclusions: setPageCommandExclusions, + toggleSideMenu: toggleSideMenu, + setSideMenu: setSideMenu, notifyAuthenticationSite: notifyAuthenticationSite }; });
\ No newline at end of file diff --git a/bundles/org.eclipse.orion.client.ui/web/orion/webui/SideMenu.js b/bundles/org.eclipse.orion.client.ui/web/orion/webui/SideMenu.js new file mode 100644 index 0000000..9a525b4 --- /dev/null +++ b/bundles/org.eclipse.orion.client.ui/web/orion/webui/SideMenu.js @@ -0,0 +1,132 @@ +/******************************************************************************* + * @license + * Copyright (c) 2014 IBM Corporation and others. + * All rights reserved. This program and the accompanying materials are made + * available under the terms of the Eclipse Public License v1.0 + * (http://www.eclipse.org/legal/epl-v10.html), and the Eclipse Distribution + * License v1.0 (http://www.eclipse.org/org/documents/edl-v10.html). + * + * Contributors: Anton McConville - IBM Corporation - initial API and implementation + ******************************************************************************/ +/*global window console define localStorage*/ +/*jslint browser:true*/ + +define(['orion/webui/littlelib'], function(lib) { + + function SideMenu(){ + this.menuitems = new Array(); + } + + SideMenu.prototype.LIST_ANCHOR_ID = "sideMenuAnchor"; + SideMenu.prototype.LOCAL_STORAGE_NAME = "sideMenuNavigation"; + SideMenu.prototype.OPEN_STATE = "open"; + SideMenu.prototype.CLOSED_STATE = "closed"; + SideMenu.prototype.SIDE_MENU_OPEN_WIDTH = "50px"; + SideMenu.prototype.SIDE_MENU_CLOSED_WIDTH = "0"; + + SideMenu.prototype.menuitems = []; + + function addMenuItem( className, link ){ + + var anchor = lib.node( this.LIST_ANCHOR_ID ); + + var listItem = document.createElement( 'li' ); + listItem.className = 'sideMenuItem'; + + var pageLink = document.createElement( 'a' ); + pageLink.href = link; + pageLink.className = className + ' inactive'; + pageLink.iconClass = className; + + listItem.appendChild( pageLink ); + anchor.appendChild( listItem ); + + this.menuitems.push( pageLink ); + } + + function setAllMenuItemsInactive(){ + + this.menuitems.forEach( function( item ){ + item.className = item.iconClass + ' inactive'; + } ); + } + + function setActiveMenuItem( link ){ + + this.setAllMenuItemsInactive(); + + this.menuitems.forEach( function( item ){ + if( item.href == link ){ + item.className = item.iconClass + ' active'; + } + }); + } + + function setSideMenu(){ + + var sideMenuNavigation = localStorage.getItem(this.LOCAL_STORAGE_NAME); + + if( sideMenuNavigation ){ + + if( sideMenuNavigation === this.CLOSED_STATE ){ + this.setSideMenuWidth( this.SIDE_MENU_CLOSED_WIDTH ); + } + + if( sideMenuNavigation === this.OPEN_STATE ){ + this.setSideMenuWidth( this.SIDE_MENU_OPEN_WIDTH ); + } + } + } + + function setSideMenuWidth( sideMenuWidth ){ + + var sideToolBar = lib.node( "sideMenu" ); + var auxpane = lib.node( "auxpane" ); + var mainToolBar = lib.node( "pageToolbar"); + + if( sideToolBar ){ + sideToolBar.style.width = sideMenuWidth; + } + + if( auxpane ){ + auxpane.style.left = sideMenuWidth; + } + + if( mainToolBar ){ + mainToolBar.style.paddingLeft = sideMenuWidth; + } + }; + + function toggleSideMenu(){ + + var sideMenuWidth = this.SIDE_MENU_OPEN_WIDTH; + + var newState = this.OPEN_STATE; + + var sideMenuNavigation = localStorage.getItem(this.LOCAL_STORAGE_NAME); + + if( sideMenuNavigation ){ + + /* if this is true, a person has pinned the menu sometime before */ + + if( sideMenuNavigation === this.OPEN_STATE ){ + newState = this.CLOSED_STATE; + sideMenuWidth = this.SIDE_MENU_CLOSED_WIDTH; + } + } + + localStorage.setItem(this.LOCAL_STORAGE_NAME, newState); + + this.setSideMenuWidth( sideMenuWidth ); + }; + + SideMenu.prototype.addMenuItem = addMenuItem; + SideMenu.prototype.setAllMenuItemsInactive = setAllMenuItemsInactive; + SideMenu.prototype.setActiveMenuItem = setActiveMenuItem; + SideMenu.prototype.setSideMenu = setSideMenu; + SideMenu.prototype.setSideMenuWidth = setSideMenuWidth; + SideMenu.prototype.toggleSideMenu = toggleSideMenu; + + return SideMenu; +}); + diff --git a/bundles/org.eclipse.orion.client.ui/web/orion/widgets/input/DropDownMenu.js b/bundles/org.eclipse.orion.client.ui/web/orion/widgets/input/DropDownMenu.js index 5e2b58b..429e276 100644 --- a/bundles/org.eclipse.orion.client.ui/web/orion/widgets/input/DropDownMenu.js +++ b/bundles/org.eclipse.orion.client.ui/web/orion/widgets/input/DropDownMenu.js @@ -11,7 +11,7 @@ /*global window console define localStorage*/
/*jslint browser:true*/
-define(['orion/objects', 'orion/webui/littlelib'], function(objects, lib) {
+define(['orion/objects', 'orion/webui/littlelib', 'orion/webui/SideMenu'], function(objects, lib, SideMenu) {
/**
* Creates a dropdown menu for a node and its associated trigger node (button)
@@ -45,6 +45,15 @@ define(['orion/objects', 'orion/webui/littlelib'], function(objects, lib) { dropDownContainer.style.display = 'none'; //$NON-NLS-0$
this._parent.appendChild(dropDownContainer);
this._dropdownMenu = dropDownContainer;
+ this._dropdownMenu.pinSection = false;
+ this._dropdownMenu.sideMenuController = new SideMenu();
+
+ var pinSection = document.createElement( "div" );
+ pinSection.innerHTML = "pin";
+ pinSection.id = "hamburgerPin;"
+ pinSection.style.float="left";
+
+ this._pin = pinSection;
// Display trigger node and bind on click event
triggerNode = lib.node(triggerNode);
@@ -77,11 +86,25 @@ define(['orion/objects', 'orion/webui/littlelib'], function(objects, lib) { if (this.selectionClass) {
this._triggerNode.classList.add(this.selectionClass);
}
- this.handle = lib.addAutoDismiss( [ this._triggerNode, this._dropdownMenu], this.clearPanel.bind(this) );
+ this.handle = lib.addAutoDismiss( [ this._triggerNode, this._dropdownMenu, this._pin], this.clearPanel.bind(this) );
if (this.options.onShow) {
this.options.onShow();
}
}.bind(this));
+
+ if( this._dropdownMenu.pinSection === false ){
+
+
+ var dropDownMenu = this._dropdownMenu;
+
+ this._pin.onclick = function(){
+ dropDownMenu.sideMenuController.toggleSideMenu();
+ }
+ this._dropdownMenu.appendChild( this._pin );
+
+ this._dropdownMenu.pinSection = true;
+ }
+
}else{
this.clearPanel();
}
diff --git a/bundles/org.eclipse.orion.client.ui/web/orion/widgets/themes/container/ThemeSheetWriter.js b/bundles/org.eclipse.orion.client.ui/web/orion/widgets/themes/container/ThemeSheetWriter.js index e673593..3857a64 100644 --- a/bundles/org.eclipse.orion.client.ui/web/orion/widgets/themes/container/ThemeSheetWriter.js +++ b/bundles/org.eclipse.orion.client.ui/web/orion/widgets/themes/container/ThemeSheetWriter.js @@ -60,7 +60,10 @@ define(['orion/widgets/themes/ThemeClass'], topRowBanner.style.padding = '10px';
topRowBanner.style.paddingLeft = '6px';
topRowBanner.style.paddingRight = '2px';
- topRowBanner.style.borderBottom = '1px solid #dddddd';
+ /* topRowBanner.style.borderBottom = '1px solid #dddddd'; */
+ topRowBanner.style.borderBottom = "none";
+ topRowBanner.style.boxShadow = "0 2px 2px 0 rgba(0, 0, 0, 0.1),0 1px 0 0 rgba(0, 0, 0, 0.1)";
+ topRowBanner.style.zIndex = "100";
styles.push( topRowBanner );
@@ -232,7 +235,7 @@ define(['orion/widgets/themes/ThemeClass'], commandButton.style.padding = '4px 6px';
commandButton.style.borderRadius = '3px';
commandButton.style.lineHeight = '12px';
- commandButton.style.fontSize = '8pt';
+ commandButton.style.fontSize = '9pt';
commandButton.style.userSelect = 'none';
// -webkit-touch-callout: none;
// -webkit-user-select: none;
@@ -391,4 +394,4 @@ define(['orion/widgets/themes/ThemeClass'], };
}
-);
\ No newline at end of file +); |