Dev / design updates: typography, colours, button styles, etc.

bdit-flashcrow.code-workspace

@@ -3,10 +3,10 @@
 		"recommendations": [
 			"cpylua.language-postcss",
 			"dbaeumer.vscode-eslint",
-			"jcbuisson.vue",
 			"ms-python.python",
-			"ms-vscode-remote.vscode-remote-extensionpack",
-			"thibaudcolas.stylelint"
+      "ms-vscode-remote.vscode-remote-extensionpack",
+      "octref.vetur",
+			"stylelint.vscode-stylelint"
 		]
 	},
 	"folders": [

lib/Constants.js

@@ -524,7 +524,7 @@ class StudyHours extends Enum {
       return 'Please specify your desired schedule below';
     }
     const { times } = this;
-    const timesParts = times.map(([start, end]) => `${start}\u2013${end}`);
+    const timesParts = times.map(([start, end]) => `${start} -- ${end}`);
     return timesParts.join(', ');
   }
 }

lib/controller/AuthController.js

@@ -100,7 +100,7 @@ AuthController.push({
       return h.redirect(config.PUBLIC_PATH);
     } catch (err) {
       request.log(LogTag.ERROR, err);
-      return h.redirect('/login');
+      return h.redirect('/');
     }
   },
 });

lib/i18n/Strings.js

@@ -43,6 +43,15 @@ const REQUEST_STUDY_NOT_FOUND = {
   text: 'Could not find study request.',
 };
 
+/*
+ * @memberof Strings
+ * @type {StringMessage}
+ */
+const REQUEST_STUDY_PROVIDE_URGENT_DUE_DATE = {
+  variant: 'info',
+  text: 'Please provide a due date for this request.',
+};
+
 /*
  * @memberof Strings
  * @type {StringMessage}
@@ -148,6 +157,7 @@ const Strings = {
   OPTIONAL,
   REQUEST_STUDY_FORBIDDEN,
   REQUEST_STUDY_NOT_FOUND,
+  REQUEST_STUDY_PROVIDE_URGENT_DUE_DATE,
   REQUEST_STUDY_PROVIDE_URGENT_REASON,
   REQUEST_STUDY_REQUIRES_LOCATION,
   REQUEST_STUDY_REQUIRES_REASONS,
@@ -165,6 +175,7 @@ export {
   OPTIONAL,
   REQUEST_STUDY_FORBIDDEN,
   REQUEST_STUDY_NOT_FOUND,
+  REQUEST_STUDY_PROVIDE_URGENT_DUE_DATE,
   REQUEST_STUDY_PROVIDE_URGENT_REASON,
   REQUEST_STUDY_REQUIRES_LOCATION,
   REQUEST_STUDY_REQUIRES_REASONS,

lib/reports/format/FormatCss.js

@@ -11,7 +11,7 @@ import { InvalidCssVariableError } from '@/lib/error/MoveErrors';
  */
 
 /**
- * Parses CSS variables from `web/css/main.postcss`.
+ * Parses CSS variables from `web/css/main.scss`.
  */
 class FormatCss {
   /**
@@ -53,7 +53,7 @@ class FormatCss {
   }
 
   /**
-   * Initializes `FormatCss.vars` from `main.postcss`.
+   * Initializes `FormatCss.vars` from `main.scss`.
    *
    * @returns {Promise<undefined>}
    */
@@ -66,7 +66,7 @@ class FormatCss {
       try {
         const tdsPostcssPath = path.resolve(
           __dirname,
-          '../../../web/css/main.postcss',
+          '../../../web/css/main.scss',
         );
         const tdsPostcss = readline.createInterface({
           input: fs.createReadStream(tdsPostcssPath),

lib/time/DateTime.js

@@ -46,4 +46,9 @@ DateTime.fromJSON = function fromJSON(value) {
   return DateTime.fromSQL(value);
 };
 
+DateTime.fromLocaleString = function fromLocaleString(str) {
+  // TODO: get format from locale
+  return DateTime.fromFormat(str, 'M/d/yyyy');
+};
+
 export default DateTime;

package.json

@@ -124,7 +124,7 @@
     "*.js": [
       "vue-cli-service lint"
     ],
-    "*.postcss": [
+    "*.scss": [
       "stylelint"
     ],
     "*.py": [

src/styles/variables.scss

@@ -0,0 +1,7 @@
+/*
+ * This file indicates to `vuetify-loader` that Vuetify variable overrides are found at
+ * `@/styles/variables.scss`.  However, we map `@` to the application root in order to
+ * share code between client and server.
+ *
+ * You can edit these styles at `styles/variables.scss` (without `src` in front).
+ */

styles/variables.scss

@@ -0,0 +1,53 @@
+$headings: (
+  'h1': (
+    'size': 3rem,
+    'weight': normal,
+    'line-height': 3.5rem
+  ),
+  'h2': (
+    'size': 2.25rem,
+    'weight': normal,
+    'line-height': 2.5rem
+  ),
+  'h3': (
+    'size': 1.5rem,
+    'weight': 500,
+    'line-height': 1.6875rem
+  ),
+  'h4': (
+    'size': 1.25rem,
+    'weight': normal,
+    'line-height': 1.4375rem
+  ),
+  'h5': (
+    'size': 1rem,
+    'weight': 500,
+    'line-height': 1.25rem
+  ),
+  'h6': (
+    'size': 0.875rem,
+    'weight': 500,
+    'line-height': 1.25rem
+  ),
+  'subtitle-1': (
+    'size': 0.875rem,
+    'weight': normal,
+    'line-height': 1rem
+  ),
+  'subtitle-2': (
+    'size': 0.75rem,
+    'weight': normal,
+    'line-height': 1rem
+  ),
+  'body-1': (
+    'size': 0.875rem,
+    'weight': normal,
+    'line-height': 1.25rem
+  )
+);
+
+$data-table-regular-header-font-size: map-get(map-get($headings, 'h6'), 'size');
+$data-table-regular-row-font-size: map-get(map-get($headings, 'body-1'), 'size');
+$tab-font-size: map-get(map-get($headings, 'h6'), 'size');
+$tab-font-weight: map-get(map-get($headings, 'h6'), 'weight');
+$tabs-item-letter-spacing: 0;

tests/jest/unit/time/DateTime.spec.js

@@ -14,6 +14,16 @@ test('DateTime.local', () => {
   });
 });
 
+test('DateTime.fromLocaleString', () => {
+  const actual = DateTime.fromLocaleString('2/18/2020');
+  const expected = DateTime.fromObject({
+    year: 2020,
+    month: 2,
+    day: 18,
+  });
+  expect(actual.equals(expected)).toBe(true);
+});
+
 test('DateTime.fromJSDate', () => {
   const dt = DateTime.fromJSDate(new Date());
   expect(dt.zone).toEqual({

web/App.vue

@@ -1,32 +1,14 @@
 <template>
   <v-app id="fc_app">
-    <div class="d-none">
-      <form
-        v-if="auth.loggedIn"
-        ref="formSignOut"
-        method="POST"
-        action="/api/auth/logout">
-        <input type="hidden" name="csrf" :value="auth.csrf" />
-      </form>
-      <form
-        v-if="$route.name !== 'adfsCallback'"
-        ref="formSignIn"
-        method="POST"
-        action="/api/auth/adfs-init">
-        <input type="hidden" name="csrf" :value="auth.csrf" />
-        <input type="hidden" name="nonce" :value="nonce" />
-      </form>
-    </div>
     <v-snackbar
       v-if="hasToast"
       v-model="hasToast"
-      :color="toast.variant">
-      {{toast.text}}
-      <v-btn
-        text
-        @click="hasToast = false">
-        Close
-      </v-btn>
+      bottom
+      class="fc-toast"
+      :color="toast.variant"
+      left
+      :timeout="10000">
+      <span class="body-1">{{toast.text}}</span>
     </v-snackbar>
     <v-navigation-drawer
       app
@@ -43,6 +25,13 @@
         class="d-flex fill-height flex-column justify-center"
         dense>
         <FcDashboardNavItem
+          :active-route-names="[
+            'requestStudyEdit',
+            'requestStudyNew',
+            'requestStudyView',
+            'viewDataAtLocation',
+            'viewReportsAtLocation',
+          ]"
           icon="map"
           label="View Map"
           :to="{ name: 'viewData' }" />
@@ -52,38 +41,7 @@
           :to="{ name: 'requestsTrack' }" />
       </v-list>
       <template v-slot:append>
-        <div class="text-center pb-2">
-          <v-menu
-            v-if="auth.loggedIn"
-            top>
-            <template v-slot:activator="{ on }">
-              <v-btn
-                v-on="on"
-                icon
-                small>
-                <v-icon>mdi-account</v-icon>
-              </v-btn>
-            </template>
-            <v-list>
-              <v-list-item
-                v-for="({ label, value }, i) in userActions"
-                :key="i"
-                @click="onUserAction(value)">
-                <v-list-item-title>{{label}}</v-list-item-title>
-              </v-list-item>
-            </v-list>
-          </v-menu>
-          <v-btn
-            v-else
-            :disabled="$route.name === 'adfsCallback'"
-            fab
-            icon
-            :loading="$route.name === 'adfsCallback'"
-            small
-            @click="onClickLogin">
-            <v-icon>mdi-login</v-icon>
-          </v-btn>
-        </div>
+        <FcDashboardNavUser />
       </template>
     </v-navigation-drawer>
     <v-content>
@@ -97,27 +55,19 @@
 </template>
 
 <script>
-import Vue from 'vue';
-import {
-  mapActions,
-  mapGetters,
-  mapMutations,
-  mapState,
-} from 'vuex';
+import { mapMutations, mapState } from 'vuex';
 
 import 'mapbox-gl/dist/mapbox-gl.css';
-import '@/web/css/main.postcss';
+import '@/web/css/main.scss';
 
-import ClientNonce from '@/lib/auth/ClientNonce';
-import FcDashboardNavItem from '@/web/components/FcDashboardNavItem.vue';
+import FcDashboardNavItem from '@/web/components/nav/FcDashboardNavItem.vue';
+import FcDashboardNavUser from '@/web/components/nav/FcDashboardNavUser.vue';
 
 export default {
   name: 'App',
   components: {
     FcDashboardNavItem,
-  },
-  data() {
-    return { nonce: null };
+    FcDashboardNavUser,
   },
   computed: {
     hasToast: {
@@ -130,46 +80,32 @@ export default {
         }
       },
     },
-    userActions() {
-      return [{ label: 'Log out', value: 'logout' }];
-    },
     ...mapState([
       'auth',
       'location',
       'toast',
     ]),
-    ...mapGetters(['username']),
   },
   methods: {
-    onClickLogin() {
-      this.nonce = ClientNonce.get(16);
-      window.localStorage.setItem('nonce', this.nonce);
-      Vue.nextTick(() => {
-        this.$refs.formSignIn.submit();
-      });
-    },
-    onModalToggle() {
-      if (!this.$refs.modalToggle.checked) {
-        this.clearModal();
-      }
-    },
-    onUserAction(action) {
-      if (action === 'logout') {
-        this.$refs.formSignOut.submit();
-      }
-    },
-    onViewData() {
-      if (this.location === null) {
-        return;
-      }
-      const { centrelineId, centrelineType } = this.location;
-      this.$router.push({
-        name: 'viewDataAtLocation',
-        params: { centrelineId, centrelineType },
-      });
-    },
-    ...mapActions(['setToast']),
     ...mapMutations(['clearToast']),
   },
 };
 </script>
+
+<style lang="scss">
+#fc_app {
+  color: var(--v-default-base);
+  font-size: 0.875rem;
+  font-weight: normal;
+  line-height: 1.25rem;
+
+  & .fc-toast {
+    left: 76px;
+  }
+
+  & .v-input--selection-controls__input + .v-label {
+    color: var(--v-default-base);
+    padding-left: 24px;
+  }
+}
+</style>