bootstrap filemanager

src/app/files/file-explorer.js

@@ -79,8 +79,8 @@ function fileExplorer (localRegistry, files) {
           self.focusElement = self.treeView.labelAt(self.focusPath)
           // TODO: here we update the selected file (it applicable)
           // cause we are refreshing the interface of the whole directory when there's a new file.
-          if (self.focusElement && !self.focusElement.classList.contains(css.hasFocus)) {
-            self.focusElement.classList.add(css.hasFocus)
+          if (self.focusElement && !self.focusElement.classList.contains('bg-primary')) {
+            self.focusElement.classList.add('bg-primary')
           }
         })
       }
@@ -122,7 +122,8 @@ function fileExplorer (localRegistry, files) {
     },
     formatSelf: function formatSelf (key, data, li) {
       var isRoot = data.path === self.files.type
-      return yo`<label class="${data.children ? css.folder : css.file}"
+      return yo`<label
+        class=${css.label}
         data-path="${data.path}"
         style="${isRoot ? 'font-weight:bold;' : ''}"
         onkeydown=${editModeOff}
@@ -165,13 +166,13 @@ function fileExplorer (localRegistry, files) {
 
   self.treeView.event.register('leafClick', function (key, data, label) {
     if (self.focusElement) {
-      self.focusElement.classList.remove(css.hasFocus)
+      self.focusElement.classList.remove('bg-secondary')
       self.focusElement = null
       self.focusPath = null
     }
     self.focusElement = self.treeView.labelAt(key)
     if (self.focusElement) {
-      self.focusElement.classList.add(css.hasFocus)
+      self.focusElement.classList.add('bg-secondary')
       self.focusPath = key
       self.events.trigger('focus', [key])
     }
@@ -201,7 +202,7 @@ function fileExplorer (localRegistry, files) {
   // register to main app, trigger when the current file in the editor changed
   self._deps.fileManager.event.register('currentFileChanged', (newFile, explorer) => {
     if (self.focusElement && (!explorer || explorer.type !== files.type) && self.focusPath !== newFile) {
-      self.focusElement.classList.remove(css.hasFocus)
+      self.focusElement.classList.remove('bg-primary')
       self.focusElement = null
       self.focusPath = null
     }
@@ -220,7 +221,7 @@ function fileExplorer (localRegistry, files) {
   function editModeOn (label) {
     textUnderEdit = label.innerText
     label.setAttribute('contenteditable', true)
-    label.classList.add(css.rename)
+    label.classList.add('bg-light')
     label.focus()
     selectElementContents(label)
   }
@@ -259,7 +260,7 @@ function fileExplorer (localRegistry, files) {
         modalDialogCustom.confirm(null, 'Do you want to rename?', () => { rename() }, () => { label.innerText = textUnderEdit })
       }
       label.removeAttribute('contenteditable')
-      label.classList.remove(css.rename)
+      label.classList.remove('bg-light')
     }
   }
 }
@@ -285,7 +286,7 @@ fileExplorer.prototype.ensureRoot = function (cb) {
   self.files.resolveDirectory('/', (error, files) => {
     if (error) console.error(error)
     var element = self.treeView.render(files, false)
-    element.className = css.fileexplorer
+    element.classList.add(css.fileexplorer)
     element.events = self.events
     element.api = self.api
     self.container.appendChild(element)

src/app/files/styles/file-explorer-styles.js

@@ -1,8 +1,9 @@
 var csjs = require('csjs-inject')
-var styleGuide = require('../../ui/styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
 
 var css = csjs`
+  .label {
+    margin-bottom     : 0px;
+  }
   .fileexplorer       {
     box-sizing        : border-box;
   }
@@ -15,13 +16,10 @@ var css = csjs`
     cursor            : pointer;
   }
   .file               {
-    color             : ${styles.leftPanel.text_Teriary};
   }
   .hasFocus           {
-    background-color  : ${styles.leftPanel.backgroundColor_FileExplorer};
   }
   .rename             {
-    background-color  : ${styles.leftPanel.backgroundColor_Panel};
   }
   .remove             {
     margin-left       : auto;

src/app/panels/file-panel.js

@@ -72,7 +72,7 @@ function filepanel (localRegistry) {
   function template () {
     return yo`
       <div class=${css.container}>
-        <div class=${css.fileexplorer}>
+        <div class="${css.fileexplorer}">
           <div class=${css.menu}>
             <span onclick=${createNewFile} class="newFile ${css.newFile}" title="Create New File in the Browser Storage Explorer">
               <i class="fa fa-plus-circle"></i>
@@ -94,7 +94,7 @@ function filepanel (localRegistry) {
               <i class="fa fa-files-o" aria-hidden="true"></i>
             </span>
           </div>
-          <div class=${css.treeviews}>
+          <div>
             <div class=${css.treeview}>${fileExplorer.init()}</div>
             <div class="configexplorer ${css.treeview}">${configExplorer.init()}</div>
             <div class="filesystemexplorer ${css.treeview}">${fileSystemExplorer.init()}</div>

src/app/panels/styles/file-panel-styles.js

@@ -1,6 +1,4 @@
 var csjs = require('csjs-inject')
-var styleGuide = require('../../ui/styles-guide/theme-chooser')
-var styles = styleGuide.chooser()
 
 var css = csjs`
   .container {
@@ -30,7 +28,7 @@ var css = csjs`
     cursor            : pointer;
   }
   .newFile i:hover    {
-    color             : ${styles.colors.orange};
+    color             : var(--secondary)
   }
   .gist            {
     padding           : 10px;
@@ -57,20 +55,17 @@ var css = csjs`
     cursor            : pointer;
   }
   .connectToLocalhost i:hover   {
-    color             : ${styles.colors.orange};
+    color             : var(--secondary)
   }
   .uploadFile         {
     padding           : 10px;
   }
   .uploadFile label:hover   {
-    color             : ${styles.colors.orange};
+    color             : var(--secondary)
   }
   .uploadFile label   {
     cursor            : pointer;
   }
-  .treeview {
-    background-color  : ${styles.colors.general_BackgroundColor};
-  }
   .treeviews {
     overflow-y        : auto;
   }  
@@ -79,7 +74,6 @@ var css = csjs`
     flex-direction: column;
   }
   .dialogParagraph {
-    ${styles.infoTextBox}
     margin-bottom: 2em;
     word-break: break-word;
   }

src/app/ui/TreeView.js

@@ -24,7 +24,6 @@ var css = csjs`
     flex-shrink: 0;
   }
   .label_tv {
-    display: flex;
     align-items: center;
   }
 `