2.2.0 release (#88)

- FIXED: some mountpoints may have no label (Windows) fixes #83 
- FIXED: left panel language didn't update on lang change, fixes #80 
- FIXED: resizing the window could crop the left panel, fixes #81
- FIXED: borders display bugs, fixes #84 
- FIXED: do not show forbidden cursor over the status bar, fixes #86 
- UPDATED: theme image un readme file, fixes #85

Author: warpdesign

README.md

@@ -102,10 +102,10 @@ This will start Jest and run every spec files found in src. Every test file can
 
 ### End to End testing
 
-End to end tests are using Cypress and are in the separate `e2e` directory:
+End to end tests are using Cypress and are in the separate `e2e` directory. You must install & configure Cypress before running E2E tests. This needs to be done one once using the following commands:
 
 ```shell
-cd e2e
+cd e2e && npm install && cd ..
 ```
 
 The first time you run the tests, you also need to install cypress dependencies:
@@ -122,6 +122,8 @@ npm run build
 
 This will create a new Electron-Explorer in the `build-e2e` directory.
 
+You may also type `npm run watch` if you want to rebuild automatically the e2e build after a change has been detected inside the sources.
+
 For React-Explorer to run without Electron, a local webserver needs to be started before running the tests:
 
 ```shell

e2e/cypress/integration/filetable.spec.ts

@@ -252,12 +252,19 @@ describe("filetable", () => {
                 .should("eq", 1);
         });
 
-        it("arrow up should select the previous element", () => {
-            // select second element
-            cy.get("#view_0").trigger("keydown", { keyCode: KEYS.Down });
-            cy.get("#view_0").trigger("keydown", { keyCode: KEYS.Down });
+        it.only("arrow up should select the previous element", () => {
+            // be sure to be in a predictable state, without any selected element
+            cy.triggerHotkey(`${MOD_KEY}a`);
+            cy.triggerHotkey(`${MOD_KEY}i`);
 
-            // select first element
+            // activate the first then second element
+            cy.get("#view_0")
+                .trigger("keydown", { keyCode: KEYS.Down });
+
+            cy.get("#view_0")
+                .trigger("keydown", { keyCode: KEYS.Down });
+
+            // activate previous element: should be the second one
             cy.get("#view_0")
                 .trigger("keydown", { keyCode: KEYS.Up })
                 .find("[data-cy-file]")

img/react-explorer-theme.png

@@ -1,6 +1,7 @@
 import { AppState } from "../state/appState";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
+import { platform } from "process";
 import { FocusStyleManager, Alert, Classes, Intent } from "@blueprintjs/core";
 import classNames from "classnames";
 import { Provider, observer, inject } from "mobx-react";
@@ -351,8 +352,9 @@ class App extends React.Component<AppProps> {
         const { t } = this.props;
         const winState = this.appState.winStates[0];
         const isSplitView = winState.splitView;
-        const mainClass = classNames('main', {
-            singleView: !isSplitView
+        const mainClass = classNames(`main ${platform}`, {
+            singleView: !isSplitView,
+            dualView: isSplitView
         });
         const viewStateLeft = winState.views[0];
         const viewStateRight = winState.views[1];

src/components/App.tsx

@@ -791,7 +791,7 @@ export class FileTableClass extends React.Component<IProps, IState> {
 
     onScroll = debounce(({ scrollTop }: any) => {
         this.cache.scrollTop = scrollTop;
-        console.log('onScroll: updating scrollTop', scrollTop, this.cache.path);
+        // console.log('onScroll: updating scrollTop', scrollTop, this.cache.path);
     }, SCROLL_DEBOUNCE);
 
     rowGetter = (index: Index) => this.getRow(index.index);
@@ -801,7 +801,7 @@ export class FileTableClass extends React.Component<IProps, IState> {
         const { position } = this.state;
         const rowCount = this.state.nodes.length;
 
-        return (<div ref={this.setTableRef} onKeyDown={this.onInputKeyDown} className={`fileListSizerWrapper ${Classes.ELEVATION_0}`}>
+        return (<div ref={this.setTableRef} onKeyDown={this.onInputKeyDown} className={`fileListSizerWrapper`}>
             <AutoSizer>
                 {({ width, height }) => (
                     <Table

src/components/FileTable.tsx

@@ -4,6 +4,7 @@ import { observer, inject } from "mobx-react";
 import { withNamespaces, WithNamespaces } from 'react-i18next';
 import classNames from "classnames";
 import { IReactionDisposer, reaction, toJS } from "mobx";
+import i18next from 'i18next';
 import { USERNAME } from "../utils/platform";
 import Icons from "../constants/icons";
 import { FavoritesState, Favorite } from "../state/favoritesState";
@@ -58,14 +59,30 @@ export class LeftPanelClass extends React.Component<IProps, LeftPanelState> {
         this.favoritesState = this.injected.appState.favoritesState;
 
         this.installReaction();
+        this.bindLanguageChange();
     }
 
+    private bindLanguageChange = () => {
+        console.log('languageChanged');
+        i18next.on('languageChanged', this.onLanguageChanged);
+    }
+
+    private unbindLanguageChange = () => {
+        i18next.off('languageChanged', this.onLanguageChanged);
+    }
+
+    public onLanguageChanged = (lang: string) => {
+        console.log('building nodes', lang);
+        this.buildNodes(this.favoritesState);
+    }    
+
     private get injected() {
         return this.props as InjectedProps;
     }
 
     componentWillUnmount() {
         this.disposers.forEach(disposer => disposer());
+        this.unbindLanguageChange();
     }
 
     private installReaction() {
@@ -152,21 +169,25 @@ export class LeftPanelClass extends React.Component<IProps, LeftPanelState> {
         shortcuts.childNodes = favorites.shortcuts.map((shortcut, i) => ({
             id: `s_${shortcut.path}`,
             key: `s_${shortcut.path}`,
-            label: shortcut.label === 'HOME_DIR' ? USERNAME: t(`FAVORITES_PANEL.${shortcut.label}`),
+            label: <span title={shortcut.path}>
+                    {shortcut.label === 'HOME_DIR' ? USERNAME : t(`FAVORITES_PANEL.${shortcut.label}`)}
+                    </span>,
             icon: Icons[shortcut.label],
-            title: shortcut.path,
             nodeData: shortcut.path
         }));
 
         places.childNodes = favorites.places.map((place, i) => ({
             id: `p_${place.path}`,
             key: `p_${place.path}`,
-            label: place.label,
+            label: <span title={place.path}>{place.label}</span>,
             icon: place.icon,
-            title: place.path,
             nodeData: place.path
         }));
 
+        // update root nodes label too
+        places.label = t('FAVORITES_PANEL.PLACES');
+        shortcuts.label = t('FAVORITES_PANEL.SHORTCUTS');
+
         this.setState(this.state);
     }
 

src/components/LeftPanel.tsx

@@ -92,6 +92,7 @@ export class SideViewClass extends React.Component<InjectedProps>{
 
         let activeClass = classnames('sideview', {
             active: active,
+            inactive: !active,
             hidden: this.props.hide,
             dropTarget: dropAndOver,
             notDropTarget: isOver && !canDrop

src/components/SideView.tsx

@@ -3,24 +3,27 @@
     overflow:auto;
     flex-shrink:0;
     width:200px;
-    border:1px dotted gray;
+    /* border:1px dotted gray; */
     margin: 0;
     list-style-type: none;
     background: rgba(206, 217, 224, 0.5);
-    padding: 5px;
+    padding: 0;
     font-size:13px;
 }
 
-.favoritesPanel:before {
+.bp3-dark .favoritesPanel {
+    background-color:rgb(41, 56, 66);
+}
+
+/* .favoritesPanel:before {
     position: absolute;
     top: -2px;
     right: -2px;
     bottom: -2px;
     left: -2px;
     border-radius: 4px;
     content: "";
-    box-shadow: 0 0 2px 2px inset rgb(231, 236, 239);
-}
+} */
 
 .favoritesPanel .bp3-tree-node-content-0 {
     color:#5c7080;

src/css/favoritesPanel.css

@@ -43,6 +43,11 @@ button.small:hover{
     -webkit-user-select: none;
 }
 
+.sideview > .bp3-control-group > :first-child,
+.sideview > .bp3-control-group > :last-child {
+    border-radius:0;
+}
+
 .main > .hidden{
     display:none;
     pointer-events: none;
@@ -66,56 +71,89 @@ button.small:hover{
     justify-content: center;
     flex-grow:1;
     overflow:hidden;
-    padding:10px;
+    /* padding:10px; */
 }
 
-#root .sideview{
+#root .sideview {
     position:relative;
-    width:50%;
-    min-width:360px;
+    width:calc((100% - 200px) / 2);
     flex-grow:1;
 }
 
-#root .sideview:before{
+#root .singleView .sideview {
+    width:calc(100% - 200px);
+}
+
+#root .sideview {
+    border-left: 1px solid rgb(189, 195, 199);
+}
+
+#root .dualView #view_0.inactive {
+    border-right-color:transparent;
+}
+
+#root .dualView #view_0.active {
+    border-left-color:transparent;
+}
+
+#root .dualView #view_1.inactive{
+    border-left-color: rgb(131, 135, 138);
+}
+
+#root .darwin.dualView #view_1.active:before {
+    border-bottom-right-radius: 5px;
+}
+
+#root .dualView .sideview:before{
     position: absolute;
-    top: -2px;
-    right: -2px;
-    bottom: -2px;
-    left: -2px;
-    border-radius: 4px;
+    pointer-events:none;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: -1px;
     content: "";
+    opacity: .6;
+    z-index: 9;
+    border: 1px solid rgb(189, 195, 199);
+    border-top:none;
+    border-bottom:none;
 }
 
-#root .sideview:before{
-    box-shadow: 0 0 2px 2px inset rgb(231, 236, 239);
+#root .dualView .sideview.active:before {
+    opacity:1;
+    border: 2px solid rgba(19, 124, 189, .9);
 }
 
-.bp3-dark #root .sideview:before{
-    box-shadow: 0 0 2px 2px inset rgb(66, 84, 97);
+#root .dualView .sideview.inactive:before{
+    border-left:none;
 }
 
-#root .sideview.active:before{
-    box-shadow: 0 0 0px 2px inset rgba(19, 124, 189, 0.8);
-    z-index:2;
-    pointer-events: none;
+/* dark theme */
+.bp3-dark #root .singleView .sideview {
+    border-left: 1px solid rgb(14,25,34);
 }
 
-#root .singleView .sideview.active:before{
-    box-shadow: 0 0 2px 2px inset rgb(219, 219, 219);
+.bp3-dark #root .sideview,
+.bp3-dark #root .dualView #view_1.inactive {
+    border-color: rgb(14,25,34);
 }
 
-.bp3-dark #root .singleView .sideview:before{
-    box-shadow: 0 0 2px 2px inset rgb(66, 84, 97);
+.bp3-dark #root .dualView .sideview.inactive:before {
+    border-color: rgb(73, 75, 76);
 }
 
-#root .sideview.dropTarget:before{
-    box-shadow: 0 0 4px 2px inset #00b63d82;
+#root .sideview.dropTarget:before {
+    box-shadow: 0 0 4px 2px inset #00b63ddb;
 }
 
 #root .sideview.notDropTarget{
     cursor:no-drop;
 }
 
+#root .sideview.notDropTarget:before {
+    box-shadow: 0 0 4px 2px inset #b6000982;
+}
+
 #root .sideview:first-child{
     margin-right:10px;
 }
@@ -180,6 +218,19 @@ button.small:hover{
     vertical-align:top;
 }
 
+#root .bp3-navbar {
+    border-bottom: 1px solid rgb(189, 195, 199);
+    background: rgb(246,246,246);
+    background: linear-gradient(180deg, rgba(246,246,246,1) 16%, rgba(230,236,239,1) 100%);
+    box-shadow:none;
+}
+
+.bp3-dark #root .bp3-navbar {
+    border-bottom: 1px solid rgb(14,25,34);
+    background: rgb(46,46,46);
+    background: linear-gradient(180deg, rgba(56,56,56,1) 16%, rgba(40,56,69,1) 100%);
+}
+
 .bp3-navbar .download .bp3-button-text{
     display: flex;
     align-items: center;
@@ -300,6 +351,24 @@ body.bp3-dark .bp3-loader.active{
     border:1px solid rgba(16,22,26,.2);
 }
 
+.status-bar {
+    border-top: 1px solid rgb(189, 195, 199);
+}
+
+/* FIXME: we only used disable state to use the styles associated with disabled state */
+.status-bar .bp3-input:disabled,
+.status-bar .bp3-input.bp3-disabled,
+.status-bar .bp3-button.bp3-disabled,
+.status-bar button.bp3-minimal.bp3-disabled,
+.status-bar button.bp3-minimal.bp3-disabled:hover,
+.status-bar.bp3-input-group.bp3-disabled {
+    cursor:default;
+}
+
+.bp3-dark .status-bar {
+    border-top: 1px solid rgb(14,25,34);
+}
+
 .status-bar.offline > .bp3-icon:after{
     border-bottom: 1px solid rgba(255,0,0,.6);
     content: "";
@@ -373,9 +442,21 @@ body.bp3-dark .bp3-loader.active{
     background-color: rgb(88, 100, 109);
 }
 
+.sideview > .toolbar > .bp3-button-group > .bp3-button:not([class*="bp3-intent-"]) {
+    box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1);
+}
+
+.sideview > .toolbar > .bp3-button-group > .bp3-button:first-child:not([class*="bp3-intent-"]) {
+    margin-left:-1px;
+}
+
+.sideview > .toolbar > .bp3-button-group > .bp3-button:last-child:not([class*="bp3-intent-"]) {
+    box-shadow:inset 0 -1px 0 rgba(16, 22, 26, 0.1);
+}
+
 .tablist .bp3-button .bp3-button-text{
     overflow:hidden;
-    white-space: nowrap;    
+    white-space: nowrap;
     text-overflow:ellipsis;
 }
 

src/css/main.css

@@ -38,7 +38,8 @@ export class FavoritesState {
             const mountpoint = drive.mountpoints[0];
 
             return {
-                label: mountpoint.label,
+                // Some mountpoints may not have a label (eg. win: c:\)
+                label: mountpoint.label || mountpoint.path,
                 path: mountpoint.path,
                 icon: (drive.isRemovable || drive.isVirtual) ? IconNames.FLOPPY_DISK : IconNames.DATABASE
             } as Favorite;