Improved behavior of:

* word-wrapping in navigation when collapsed
* switch button, when extension is off
* navigation being clicked on while collapsed

Increased version number.

Author: tomasbonco

manifest.json

@@ -2,7 +2,7 @@
   "name": "GitLab - Tree view for code",
   "homepage_url": "https://github.com/tomasbonco/gitlabtree",
   "author": "Tomáš Bončo",
-  "version": "0.0.10",
+  "version": "1.0.0",
   "manifest_version": 2,
   "description": "Provides folder structure view for code in GitLab.",
   "icons": {

src/inject/folder.tsx

@@ -216,10 +216,14 @@ export class Folder
 		return (
 			<div class={`${CSS_PREFIX}__folder ${ expandedClass } ${ this.state.isRoot ? CSS_PREFIX + '__folder--is-root' : '' }`}>
 
-				<div class={CSS_PREFIX + '__holder'} title={this.state.name} onclick={ () => this.toggleIsFolderExpanded() }> {this.state.name} </div>
-				{ this.getFolders( parseInt( this.settingsStore.get( 'file-sort' )) ).map( fdr => fdr.render() ) }
-				{ this.getFiles( parseInt( this.settingsStore.get( 'file-sort' )) ).map( fls => fls.render() ) }
+				<div class={CSS_PREFIX + '__folder__holder'} title={this.state.name} onclick={ () => this.toggleIsFolderExpanded() }> {this.state.name} </div>
 
+				<div class={CSS_PREFIX + '__folder__content'}>
+
+					{ this.getFolders( parseInt( this.settingsStore.get( 'file-sort' )) ).map( fdr => fdr.render() ) }
+					{ this.getFiles( parseInt( this.settingsStore.get( 'file-sort' )) ).map( fls => fls.render() ) }
+					
+				</div>
 			</div>
 		)
 	}

src/inject/main.ts

@@ -51,7 +51,7 @@ export class GitLabTree
 
 		this.pubsub.subscribe( EVENT_SETTINGS_CHANGED, ( action, data ) => this.settingsChanged( action, data ))
 		this.pubsub.subscribe( EVENT_TOGGLE_NAVIGATION, ( action, isOpen ) => this.performNavigationIsOpen( isOpen ))
-		this.pubsub.subscribe( EVENT_TOGGLE_EXTENSION, () => this.toggleExtensionIsOn() );
+		this.pubsub.subscribe( EVENT_TOGGLE_EXTENSION, (action, isOn ) => this.toggleExtensionIsOn( isOn ) );
 
 
 		// Obtain metadata

src/inject/navigation.tsx

@@ -11,6 +11,8 @@ export class Navigation
 {
 	private isNavigationOpened: boolean = true;
 	private lastSort;
+	private isExtensionOn: boolean = true;
+
 
 	constructor( private structure: Structure, private pubsub: PubSub, private views: Views, private settingsStore: SettingsStore )
 	{
@@ -63,6 +65,7 @@ export class Navigation
 	 */
 	onToggleNavigationIsOpen( isOpen?: boolean )
 	{
+		console.log('wut')
 		this.isNavigationOpened = isOpen !== undefined ? isOpen : ! this.isNavigationOpened
 
 		this.pubsub.publish( EVENT_TOGGLE_NAVIGATION, this.isNavigationOpened ); // changes on top level are required
@@ -75,14 +78,30 @@ export class Navigation
 	 */
 	onToggleExtensionIsOn()
 	{
-		this.pubsub.publish( EVENT_TOGGLE_EXTENSION );
+		this.isExtensionOn = ! this.isExtensionOn
+		this.pubsub.publish( EVENT_TOGGLE_EXTENSION, this.isExtensionOn );
+		this.views.redrawView( 'navigation' );
+	}
+
+
+	/**
+	 * Once navigation is collapsed, pointer-events are turned off.
+	 * This callback is attached to top-level element that accepts pointer events.
+	 * So once click is registred, this should open expend navigation.
+	 */
+	onMaybeOpenNavigation( e: MouseEvent )
+	{
+		if ( (e.target as HTMLElement).classList.contains( 'gitlab-tree-plugin__navigation' ) && ! this.isNavigationOpened )
+		{
+			this.onToggleNavigationIsOpen();
+		}
 	}
 
 
 	render(): any
 	{
 		return (
-			<div>
+			<div class="gitlab-tree-plugin__navigation" onclick={(e) => this.onMaybeOpenNavigation( e )}>
 
 				<div class="gitlab-tree-plugin__files">
 
@@ -92,7 +111,7 @@ export class Navigation
 
 				<div class="gitlab-tree-plugin__menu">
 
-					<div class={`gitlab-tree-plugin__menu__item ${ this.isNavigationOpened ? '' : 'gitlab-tree-plugin--is-hidden' }`} title="Turn extension off" onclick={ () => this.onToggleExtensionIsOn() }>
+					<div id="gitlab-tree-plugin__toggle-on" class={`gitlab-tree-plugin__menu__item ${ this.isNavigationOpened ? '' : 'gitlab-tree-plugin--is-hidden' } ${ this.isExtensionOn ? '' : 'gitlab-tree-plugin--is-off' }`} title={ this.isExtensionOn ? "Turn extension off" : "Turn extension on" } onclick={ () => this.onToggleExtensionIsOn() }>
 
 						<i class="fa fa-power-off"></i>
 

src/inject/style.styl

@@ -54,12 +54,8 @@
 			margin-bottom: 10px;
 
 
-			.gitlab-tree-plugin__holder
-			{
-				white-space: nowrap;
-				text-overflow: ellipsis;
-				overflow: hidden;
-				
+			.gitlab-tree-plugin__folder__holder
+			{				
 
 				&:before
 				{
@@ -75,25 +71,44 @@
 				padding-left: 0px;
 
 
-				> .gitlab-tree-plugin__holder
+				> .gitlab-tree-plugin__folder__holder
 				{
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					overflow: hidden;
+
 					background-color: #fafafa;
 					border-bottom: 1px solid #e5e5e5;
 					margin: 0;
 					text-align: left;
 					padding: 10px 16px;
-					word-wrap: break-word;
 					font-weight: bold;
 
 					margin-bottom: 5px;
 				}
 
-				> .gitlab-tree-plugin__folder
+				> .gitlab-tree-plugin__folder__content 
 				{
-					padding-left: 15px;
+					overflow: auto;
+					padding-bottom: 5px;
+
+					.gitlab-tree-plugin__file
+					{
+						white-space: nowrap;
+					}
+
+					.gitlab-tree-plugin__folder__holder
+					{
+						white-space: nowrap;
+					}
+
+					> .gitlab-tree-plugin__folder
+					{
+						padding-left: 15px;
+					}
 				}
 
-				> .gitlab-tree-plugin__holder:before
+				> .gitlab-tree-plugin__folder__holder:before
 				{
 					content: "\f07c";
 				}
@@ -102,17 +117,12 @@
 
 			&--is-collapsed
 			{
-				> .gitlab-tree-plugin__holder:before
+				> .gitlab-tree-plugin__folder__holder:before
 				{
 					content: "\f114";
 				}
 
-				> .gitlab-tree-plugin__folder
-				{
-					display: none;
-				}
-
-				> .gitlab-tree-plugin__file
+				> .gitlab-tree-plugin__folder__content
 				{
 					display: none;
 				}
@@ -206,10 +216,18 @@
 			}
 
 
-			#gitlab-tree-plugin__toggle-hide
+			&#gitlab-tree-plugin__toggle-hide
 			{
 				border-left: 1px solid #e5e5e5;
 			}
+
+			&#gitlab-tree-plugin__toggle-on
+			{
+				&.gitlab-tree-plugin--is-off
+				{
+					background: rgba(220, 53, 69, 0.75);
+				}
+			}
 		}
 	}
 
@@ -227,6 +245,14 @@
 			pointer-events: none;
 		}
 
+		.gitlab-tree-plugin__folder--is-root
+		{
+			> .gitlab-tree-plugin__folder__content
+			{
+				overflow: hidden !important;
+			}
+		}
+
 		#gitlab-tree-plugin__toggle-hide
 		{
 			width: 100%;