Skip to content

Commit e42b3c1

Browse files
tomasboncotomasbonco
committed
Finished functionality, now going into polishing code.
1 parent 0159af2 commit e42b3c1

File tree

6 files changed

+240
-109
lines changed

6 files changed

+240
-109
lines changed

‎src/inject/file.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,9 @@ export class File
7373

7474
render(): any
7575
{
76-
const fileClass = `file gitlab-tree-plugin-file-${EFileState[this.state.type].toLocaleLowerCase()} ${ this.state.isActive ? CSS_PREFIX + '-file-active' : '' }`;
77-
const iconClass = `fa fa-comments-o ${CSS_PREFIX}-file-commented-icon`;
76+
const fileClass = `gitlab-tree-plugin__file gitlab-tree-plugin__file--is-${EFileState[this.state.type].toLocaleLowerCase()} ${ this.state.isActive ? CSS_PREFIX + '__file--is-active' : '' } ${this.state.isCommented ? CSS_PREFIX + '__file--is-commented' : ''}`;
77+
const iconClass = `fa fa-comments-o ${CSS_PREFIX}__file__commented-icon`;
78+
7879
return (
7980
<a href={this.state.hash} class={ fileClass }>
8081
{ this.state.isCommented ? <i class={iconClass}></i> : '' }

‎src/inject/folder.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -211,12 +211,12 @@ export class Folder
211211

212212
render()
213213
{
214-
const expandedClass = CSS_PREFIX + ( this.state.isExpanded || this.state.isRoot ? `-folder-expanded` : `-folder-collapsed` );
214+
const expandedClass = CSS_PREFIX + ( this.state.isExpanded || this.state.isRoot ? `__folder--is-expanded` : `__folder--is-collapsed` );
215215

216216
return (
217-
<div class={`${CSS_PREFIX}-folder ${ expandedClass }`}>
217+
<div class={`${CSS_PREFIX}__folder ${ expandedClass } ${ this.state.isRoot ? CSS_PREFIX + '__folder--is-root' : '' }`}>
218218

219-
<div class={CSS_PREFIX + '-holder'} title={this.state.name} onclick={ () => this.toggleIsFolderExpanded() }> {this.state.name} </div>
219+
<div class={CSS_PREFIX + '__holder'} title={this.state.name} onclick={ () => this.toggleIsFolderExpanded() }> {this.state.name} </div>
220220
{ this.getFolders( parseInt( this.settingsStore.get( 'file-sort' )) ).map( fdr => fdr.render() ) }
221221
{ this.getFiles( parseInt( this.settingsStore.get( 'file-sort' )) ).map( fls => fls.render() ) }
222222

‎src/inject/inject.tsx‎

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ declare const chrome, browser;
1515
@autoinject
1616
export class GitLabTree
1717
{
18+
isOn: boolean = true; // are all files displayed (false) or single selected (true)?
19+
1820
pathPrefix: string;
1921
fileHolders: NodeList;
2022
fileNames: string[];
@@ -36,8 +38,9 @@ export class GitLabTree
3638
{
3739
this.init();
3840

39-
this.pubsub.subscribe( 'settings-changed', this.settingsChanged.bind( this ) )
41+
this.pubsub.subscribe( 'settings-changed', (action, data ) => this.settingsChanged(action, data) )
4042
this.pubsub.subscribe( 'toggle-navigation', ( action, isOpen ) => this.toggleNavigation( isOpen ) )
43+
this.pubsub.subscribe( 'toggle-extension-is-on', () => this.toggleExtensionIsOn() );
4144

4245

4346
// Detection if we have any files to generate tree from
@@ -86,7 +89,7 @@ export class GitLabTree
8689

8790
// Apply settings
8891

89-
this.settingsChanged( 'internal', this.settingStore.getAll() )
92+
this.settingsChanged( 'internal', this.settingStore.getAll() );
9093

9194

9295
// Show file based on hash id
@@ -122,21 +125,21 @@ export class GitLabTree
122125
document.body.appendChild( this.settingsElement );
123126

124127
this.wrapperElement.classList.add( CSS_PREFIX + '-wrapper' );
125-
this.leftElement.classList.add( CSS_PREFIX + '-left' );
126-
this.rightElement.classList.add( CSS_PREFIX + '-right' );
128+
this.leftElement.classList.add( CSS_PREFIX + '__left' );
129+
this.rightElement.classList.add( CSS_PREFIX + '__right' );
127130
this.settingsElement.classList.add( CSS_PREFIX + '-settings' );
128131
}
129132

130133

131-
settingsChanged( action: string, data: any ): void
134+
settingsChanged( action?: string, data?: any ): void
132135
{
133136
this.leftElement.style.flexBasis = data['panel-width'] + 'px';
134137
}
135138

136139

137140
toggleNavigation( isOpen: boolean )
138141
{
139-
const className = 'gitlab-tree-plugin__collapsed';
142+
const className = 'gitlab-tree-plugin__left--is-collapsed';
140143
this.leftElement.classList.remove( className )
141144

142145
if ( ! isOpen )
@@ -160,7 +163,7 @@ export class GitLabTree
160163
files.removeChild( fileHolder );
161164
this.rightElement.appendChild( fileHolder );
162165

163-
fileHolder.classList.add( CSS_PREFIX + '-hidden' );
166+
fileHolder.classList.add( CSS_PREFIX + '--is-hidden', CSS_PREFIX + '__file-holder' );
164167
}
165168
}
166169

@@ -248,6 +251,32 @@ export class GitLabTree
248251
this.showFile( newHash );
249252
}
250253

254+
255+
turnExtensionOff()
256+
{
257+
this.isOn = false;
258+
const fileHolders = this.rightElement.querySelectorAll( `.${CSS_PREFIX}--is-hidden` );
259+
console.log( fileHolders );
260+
fileHolders.forEach( file => file.classList.remove( `${CSS_PREFIX}--is-hidden` ) )
261+
}
262+
263+
264+
turnExtensionOn()
265+
{
266+
this.isOn = true;
267+
const fileHolders = this.rightElement.querySelectorAll( `.${CSS_PREFIX}__file-holder` );
268+
fileHolders.forEach( file => file.classList.add( `${CSS_PREFIX}--is-hidden` ) )
269+
270+
this.showFile( this.lastActive );
271+
}
272+
273+
274+
toggleExtensionIsOn()
275+
{
276+
console.log('yah yah', this.isOn)
277+
return this.isOn ? this.turnExtensionOff() : this.turnExtensionOn();
278+
}
279+
251280

252281
/**
253282
* Shows file based on id.
@@ -265,13 +294,13 @@ export class GitLabTree
265294

266295
if ( this.lastActive )
267296
{
268-
this.getFileHolderByHash( this.lastActive ).classList.add( CSS_PREFIX + '-hidden' );
297+
this.getFileHolderByHash( this.lastActive ).classList.add( CSS_PREFIX + '--is-hidden' );
269298
this.getFileLinkByHash( this.lastActive ).setInactive();
270299
}
271300

272301
hash = metadata.getAll().filter( m => m.hash === hash ).length > 0 ? hash : metadata.getAll()[0].hash; // if hash is invalid use default hash
273302

274-
this.getFileHolderByHash( hash ).classList.remove( CSS_PREFIX + '-hidden' );
303+
this.getFileHolderByHash( hash ).classList.remove( CSS_PREFIX + '--is-hidden' );
275304
this.getFileLinkByHash( hash ).setActive();
276305

277306
this.lastActive = hash;

‎src/inject/navigation.tsx‎

Lines changed: 33 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ export class Navigation
1515
{
1616
this.lastSort = this.settingsStore.get( 'file-sort' );
1717

18+
this.settingsChanged();
19+
1820
this.pubsub.subscribe( 'settings-changed', () => this.settingsChanged() );
1921
}
2022

@@ -28,6 +30,11 @@ export class Navigation
2830
this.views.redrawView( 'navigation' );
2931
this.lastSort = sort;
3032
}
33+
34+
if ( this.settingsStore.get( 'single-change' ) && this.structure.flatFileStructure.length < 2 )
35+
{
36+
this.toggleHideNavigation( false );
37+
}
3138
}
3239

3340

@@ -37,36 +44,56 @@ export class Navigation
3744
}
3845

3946

40-
toggleHideNavigation()
47+
toggleHideNavigation( display?: boolean )
4148
{
42-
this.isNavigationOpened = ! this.isNavigationOpened;
49+
if ( display === undefined )
50+
{
51+
this.isNavigationOpened = ! this.isNavigationOpened;
52+
}
53+
54+
else
55+
{
56+
this.isNavigationOpened = display;
57+
}
58+
4359
this.pubsub.publish( 'toggle-navigation', this.isNavigationOpened );
4460
this.views.redrawView( 'navigation' );
4561
}
4662

4763

64+
toggleExtensionIsOn()
65+
{
66+
console.log( 'toggle me baby' )
67+
this.pubsub.publish( 'toggle-extension-is-on' );
68+
}
69+
70+
4871
render(): any
4972
{
5073
return (
5174
<div>
5275

53-
{ this.structure.entryPoint.render() }
76+
<div class="gitlab-tree-plugin__files">
77+
78+
{ this.structure.entryPoint.render() }
79+
80+
</div>
5481

5582
<div class="gitlab-tree-plugin__menu">
5683

57-
<div class={`gitlab-tree-plugin__menu__item ${ this.isNavigationOpened ? '' : 'gitlab-tree-plugin-hidden' }`} title="Turn extension off">
84+
<div class={`gitlab-tree-plugin__menu__item ${ this.isNavigationOpened ? '' : 'gitlab-tree-plugin--is-hidden' }`} title="Turn extension off" onclick={ () => this.toggleExtensionIsOn() }>
5885

5986
<i class="fa fa-power-off"></i>
6087

6188
</div>
6289

63-
<div class={`gitlab-tree-plugin__menu__item ${ this.isNavigationOpened ? '' : 'gitlab-tree-plugin-hidden' }`} title="Settings" onclick={ () => this.openSettings() }>
90+
<div class={`gitlab-tree-plugin__menu__item ${ this.isNavigationOpened ? '' : 'gitlab-tree-plugin--is-hidden' }`} title="Settings" onclick={ () => this.openSettings() }>
6491

6592
<i class="fa fa-cog"></i>
6693

6794
</div>
6895

69-
<div class="gitlab-tree-plugin__menu__item gitlab-tree-plugin__toggle-hide" onclick={ () => this.toggleHideNavigation() } title="Collapse file browser">
96+
<div class="gitlab-tree-plugin__menu__item" id="gitlab-tree-plugin__toggle-hide" onclick={ () => this.toggleHideNavigation() } title="Collapse file browser">
7097

7198
<i class={`fa fa-angle-double-${ this.isNavigationOpened ? 'left' : 'right' }`}></i>
7299

‎src/inject/settings.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export class Settings
8686
const fileSort = parseInt( this.state['file-sort'] );
8787

8888
return (
89-
<div class={`gitlab-tree-plugin__settings ${ this.state.isDisplayed ? '' : 'gitlab-tree-plugin-hidden' }`} onclick={e => (e.target as HTMLElement ).classList.contains( 'gitlab-tree-plugin__settings' ) ? this.hide() : undefined }>
89+
<div class={`gitlab-tree-plugin__settings ${ this.state.isDisplayed ? '' : 'gitlab-tree-plugin--is-hidden' }`} onclick={e => (e.target as HTMLElement ).classList.contains( 'gitlab-tree-plugin__settings' ) ? this.hide() : undefined }>
9090

9191
<div class="gitlab-tree-plugin__settings__fg">
9292

0 commit comments

Comments
 (0)