Update/offline badge (#2202)

Moves the offline badge from the bottom right to the note toolbar.
Automattic · Jul 17, 2020 · 1912e87 · 1912e87
1 parent 13e1b7d
commit 1912e87
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 10 deletions.
diff --git a/lib/app.tsx b/lib/app.tsx
@@ -24,7 +24,6 @@ type OwnProps = {
 type StateProps = {
   autoHideMenuBar: boolean;
   hotkeysEnabled: boolean;
-  isOffline: boolean;
   isSmallScreen: boolean;
   lineLength: T.LineLength;
   showNavigation: boolean;
@@ -137,7 +136,6 @@ class AppComponent extends Component<Props> {
   render() {
     const {
       isDevConfig,
-      isOffline,
       lineLength,
       showNavigation,
       showNoteInfo,
@@ -159,7 +157,6 @@ class AppComponent extends Component<Props> {
     return (
       <div className={appClasses}>
         {isDevConfig && <DevBadge />}
-        {isOffline && <div className="dev-badge">OFFLINE</div>}
         <div className={mainClasses}>
           {showNavigation && <NavigationBar />}
           <AppLayout />
@@ -174,7 +171,6 @@ class AppComponent extends Component<Props> {
 const mapStateToProps: S.MapState<StateProps> = (state) => ({
   autoHideMenuBar: state.settings.autoHideMenuBar,
   hotkeysEnabled: state.settings.keyboardShortcuts,
-  isOffline: state.simperium.connectionStatus === 'offline',
   isSmallScreen: selectors.isSmallScreen(state),
   lineLength: state.settings.lineLength,
   showNavigation: state.ui.showNavigation,

diff --git a/lib/note-toolbar/index.tsx b/lib/note-toolbar/index.tsx
@@ -18,6 +18,7 @@ import * as T from '../types';
 type StateProps = {
   editMode: boolean;
   hasRevisions: boolean;
+  isOffline: boolean;
   markdownEnabled: boolean;
   note: T.Note | null;
 };
@@ -40,7 +41,7 @@ export class NoteToolbar extends Component<Props> {
   static displayName = 'NoteToolbar';
 
   render() {
-    const { note } = this.props;
+    const { isOffline, note } = this.props;
 
     return (
       <div className="note-toolbar-wrapper theme-color-border">
@@ -53,6 +54,7 @@ export class NoteToolbar extends Component<Props> {
     const {
       editMode,
       hasRevisions,
+      isOffline,
       markdownEnabled,
       note,
       toggleNoteInfo,
@@ -62,22 +64,23 @@ export class NoteToolbar extends Component<Props> {
     ) : (
       <div className="note-toolbar">
         <div className="note-toolbar__column-left">
-          <div className="note-toolbar__button">
+          <div className="note-toolbar__button note-toolbar__button-sidebar">
             <IconButton
               icon={<SidebarIcon />}
               onClick={this.props.toggleFocusMode}
               title="Toggle Sidebar"
             />
           </div>
-        </div>
-        <div className="note-toolbar__column-right">
           <div className="note-toolbar__button note-toolbar-back">
             <IconButton
               icon={<BackIcon />}
               onClick={this.props.toggleNoteList}
               title="Back • Ctrl+Shift+L"
             />
           </div>
+        </div>
+        {isOffline && <div className="offline-badge">OFFLINE</div>}
+        <div className="note-toolbar__column-right">
           {markdownEnabled && (
             <div className="note-toolbar__button">
               <IconButton
@@ -131,6 +134,7 @@ export class NoteToolbar extends Component<Props> {
             title="Back • Ctrl+Shift+L"
           />
         </div>
+        {isOffline && <div className="offline-badge">OFFLINE</div>}
         <div className="note-toolbar__column-right">
           <div className="note-toolbar__button">
             <button
@@ -159,12 +163,14 @@ export class NoteToolbar extends Component<Props> {
 const mapStateToProps: S.MapState<StateProps> = ({
   data,
   ui: { editMode, openedNote, selectedRevision },
+  simperium: { connectionStatus },
 }) => {
   const note = openedNote ? data.notes.get(openedNote) ?? null : null;
 
   return {
     editMode,
     hasRevisions: !!data.noteRevisions.get(openedNote)?.size,
+    isOffline: connectionStatus === 'offline',
     markdownEnabled: note?.systemTags.includes('markdown') || false,
     note,
   };

diff --git a/lib/note-toolbar/style.scss b/lib/note-toolbar/style.scss
@@ -6,6 +6,24 @@
   border-bottom: 1px solid $studio-gray-5;
 }
 
+.note-toolbar-wrapper .offline-badge {
+  border: solid 1px $studio-gray-5;
+  border-radius: 2px;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+  color: $studio-gray-50;
+  font-size: 12px;
+  height: 24px;
+  margin-top: 16px;
+  text-align: center;
+  width: 64px;
+}
+
+.theme-dark .note-toolbar-wrapper .offline-badge {
+  border: solid 1px $studio-gray-80;
+  box-shadow: 0 2px 4px 0 rgba(255, 255, 255, 0.02);
+  color: $studio-gray-50;
+}
+
 .note-toolbar {
   display: flex;
   justify-content: space-between;
@@ -35,12 +53,16 @@
 }
 
 @media only screen and (max-width: $single-column) {
-  .note-toolbar__column-left {
+  .offline-badge {
+    margin: 0 25px;
+  }
+
+  .note-toolbar__button-sidebar {
     display: none;
   }
 
   .note-toolbar__column-right {
-    width: 100%;
+    width: 80%;
     justify-content: space-between;
   }
 }