Synchronization UI

ekuiter · Jun 8, 2019 · fbc2219 · fbc2219
1 parent 0493ad2
commit fbc2219
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 16 deletions.
diff --git a/client/src/components/conflictView/ConflictView.tsx b/client/src/components/conflictView/ConflictView.tsx
@@ -5,6 +5,7 @@ import i18n from '../../i18n';
 import Operation from './Operation';
 import {Collaborator} from '../../store/types';
 import {Link} from 'office-ui-fabric-react/lib/Link';
+import {Spinner, SpinnerSize} from 'office-ui-fabric-react/lib/Spinner';
 
 interface Props {
     conflictDescriptor: KernelConflictDescriptor,
@@ -30,13 +31,17 @@ export default class extends React.Component<Props> {
         return (
             <div className="conflict">
                 <div className="header">
-                    <span>{i18n.t('conflictResolution.header')}</span>&nbsp;&nbsp;
-                    <Link
-                        onClick={() => window.alert('Under development')}
-                        onMouseOver={this.onDiscardActive}
-                        onMouseOut={this.onDiscardInactive}>
-                        {i18n.t('conflictResolution.cancel')}
-                    </Link>
+                    <div className="heading">{i18n.t('conflictResolution.header')}</div>&nbsp;&nbsp;
+                    {!conflictDescriptor.synchronized && <Spinner size={SpinnerSize.small}/>}
+                    <div>
+                        <Link
+                            onClick={() => window.alert('Still under development. In the meantime, use "Developer: Reset entire system".')}
+                            onMouseOver={this.onDiscardActive}
+                            onMouseOut={this.onDiscardInactive}
+                            {...conflictDescriptor.synchronized ? {} : {disabled: true}}>
+                            {i18n.t('conflictResolution.cancel')}
+                        </Link>
+                    </div>
                 </div>
                 <div className="versions">
                     {Object.entries(conflictDescriptor.versions).map(

diff --git a/client/src/components/overlays/CommandPalette.tsx b/client/src/components/overlays/CommandPalette.tsx
@@ -617,12 +617,7 @@ export default class extends React.Component<Props, State> {
         }, {
             text: i18n.t('commandPalette.developer.reset'),
             icon: 'DeveloperTools',
-            action: () => {
-                if (window.confirm(i18n.t('commandPalette.developer.confirmReset'))) {
-                    this.props.onReset();
-                    deferred(clearLocalStorage)();
-                }
-            }
+            action: () => window.confirm(i18n.t('commandPalette.developer.confirmReset')) && this.props.onReset()
         }
     ];
 

diff --git a/client/src/modeling/types.ts b/client/src/modeling/types.ts
@@ -78,7 +78,8 @@ export interface KernelConflictDescriptor {
         icon: string,
         timestamp: number,
         siteID: string
-    }}
+    }},
+    synchronized: boolean
 };
 
 export type KernelCombinedEffect = KernelFeatureModel | KernelConflictDescriptor;

diff --git a/client/src/stylesheets/conflict.css b/client/src/stylesheets/conflict.css
@@ -11,9 +11,21 @@
     line-height: 1.4em;
 }
 
-.conflict > .header span {
+.conflict > .header > .heading {
     font-size: 1.3em;
     font-weight: bold;
+    float: left;
+}
+
+.conflict > .header button {
+    padding-top: 5px;
+}
+
+.conflict > .header > .ms-Spinner {
+    display: block;
+    float: left;
+    padding-left: 10px;
+    padding-top: 2px;
 }
 
 .conflict .versions {

diff --git a/client/src/stylesheets/index.css b/client/src/stylesheets/index.css
@@ -52,7 +52,7 @@
     overflow-y: auto;
 }
 
-.ms-Spinner {
+.ms-Fabric.fabricRoot .content > div > .ms-Spinner {
     margin: auto;
 }