Merge pull request #437 from getodk/update-submissions

Update submission components for v1.2

CONTRIBUTING.md

@@ -275,11 +275,11 @@ To update the icons using the [IcoMoon website](https://icomoon.io/app/):
 
 By following the steps above, you should minimize the diff. However, in the JSON file, you may still see changes for properties like `id`, `iconIdx`, `setId`, and `setIdx`. (I think these properties may change for the icons that were previously most recently added.)
 
-Here are a few screenshots the IcoMoon interface from March 2021:
+Here are a few screenshots of the IcoMoon interface from March 2021:
+
 ![Using IcoMoon Interface](docs/img/icomoon-choose-new-icons.png)
 ![Choosing Font Awesome Icon Set](docs/img/icomoon-font-awesome.png)
 
-
 ### Standard Actions
 
 Certain actions are standardized across ODK Central Frontend.

icomoon.json

@@ -1161,14 +1161,41 @@
       "attrs": [],
       "properties": {
         "name": "ban",
-        "id": 93,
+        "id": 42,
         "order": 2,
         "prevSize": 28,
         "code": 61534
       },
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 42
+    },
+    {
+      "icon": {
+        "paths": [
+          "M1024 512c0 202.286-229.143 365.714-512 365.714-28 0-56-1.714-82.857-4.571-74.857 66.286-164 113.143-262.857 138.286-20.571 5.714-42.857 9.714-65.143 12.571-12.571 1.143-24.571-8-27.429-21.714v-0.571c-2.857-14.286 6.857-22.857 15.429-33.143 36-40.571 77.143-74.857 104-170.286-117.714-66.857-193.143-170.286-193.143-286.286 0-201.714 229.143-365.714 512-365.714s512 163.429 512 365.714z"
+        ],
+        "width": 1024,
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "comment"
+        ],
+        "defaultCode": 61557,
+        "grid": 14
+      },
+      "attrs": [],
+      "properties": {
+        "name": "comment",
+        "id": 111,
+        "order": 2,
+        "prevSize": 28,
+        "code": 61557
+      },
       "setIdx": 1,
       "setId": 3,
-      "iconIdx": 14
+      "iconIdx": 111
     }
   ],
   "height": 1024,

src/assets/css/icomoon.css

@@ -1,9 +1,9 @@
 @font-face {
   font-family: 'icomoon';
   src:
-    url('/fonts/icomoon.ttf?kps16g') format('truetype'),
-    url('/fonts/icomoon.woff?kps16g') format('woff'),
-    url('/fonts/icomoon.svg?kps16g#icomoon') format('svg');
+    url('/fonts/icomoon.ttf?6bbdpm') format('truetype'),
+    url('/fonts/icomoon.woff?6bbdpm') format('woff'),
+    url('/fonts/icomoon.svg?6bbdpm#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -177,3 +177,6 @@
 .icon-ban:before {
   content: "\f05e";
 }
+.icon-comment:before {
+  content: "\f075";
+}

src/assets/scss/_mixins.scss

@@ -19,3 +19,11 @@
 
   li { margin-bottom: 5px; }
 }
+
+@mixin clearfix {
+  &::after {
+    clear: both;
+    content: " ";
+    display: table;
+  }
+}

src/assets/scss/_variables.scss

@@ -66,6 +66,9 @@ $padding-left-table-data: 8px;
 $padding-right-table-data: 8px;
 $padding-top-table-data: 8px;
 
+// Panels
+$box-shadow-panel-main: 0 0 24px rgba(0, 0, 0, 0.25), 0 35px 115px rgba(0, 0, 0, 0.28);
+
 $color-subpanel-background: #eee;
 $color-subpanel-active: #ddd;
 $color-subpanel-border: #e6e6e6;

src/assets/scss/app.scss

@@ -23,7 +23,10 @@ body {
   color: $color-text;
   min-height: 100vh;
 
-  &.scroll { overflow-y: scroll; }
+  &.scroll {
+    overflow-y: scroll;
+    &.modal-open { overflow-y: hidden; }
+  }
 }
 
 h1, .h1 {
@@ -36,6 +39,9 @@ h1, .h1 {
 p { max-width: $max-width-p; }
 
 dl div {
+  display: flex;
+  flex-direction: column-reverse;
+
   border-bottom: 1px solid #ddd;
   padding-bottom: 10px;
   padding-top: 10px;
@@ -48,6 +54,13 @@ dl div {
   }
 }
 
+dt {
+  color: #666;
+  font-weight: normal;
+}
+
+dd { font-size: 16px; }
+
 pre {
   background-color: $color-subpanel-background;
   border-color: $color-subpanel-border;
@@ -514,7 +527,7 @@ becomes more complicated.
 }
 
 .panel-main {
-  box-shadow: 0 0 24px rgba(0, 0, 0, 0.25), 0 35px 115px rgba(0, 0, 0, 0.28);
+  box-shadow: $box-shadow-panel-main;
   margin-top: 70px;
 
   .panel-body {

src/components/actor-link.vue

@@ -0,0 +1,38 @@
+<!--
+Copyright 2021 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+-->
+<template>
+  <link-if-can v-if="actor.type === 'user'" :to="to" class="actor-link" :title="actor.displayName">{{ actor.displayName }}</link-if-can>
+  <span v-else class="actor-link" :title="actor.displayName">{{ actor.displayName }}</span>
+</template>
+
+<script>
+import LinkIfCan from './link-if-can.vue';
+
+import routes from '../mixins/routes';
+
+export default {
+  name: 'ActorLink',
+  components: { LinkIfCan },
+  mixins: [routes()],
+  props: {
+    actor: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    to() {
+      return this.userPath(this.actor.id);
+    }
+  }
+};
+</script>

src/components/audit/row.vue

@@ -19,13 +19,7 @@ except according to the terms contained in the LICENSE file.
       </template>
     </td>
     <td class="initiator">
-      <template v-if="audit.actor != null">
-        <router-link v-if="audit.actor.type === 'user'"
-          :to="userPath(audit.actor.id)" :title="audit.actor.displayName">
-          {{ audit.actor.displayName }}
-        </router-link>
-        <span v-else :title="audit.actor.displayName">{{ audit.actor.displayName }}</span>
-      </template>
+      <actor-link v-if="audit.actor != null" :actor="audit.actor"/>
     </td>
     <td class="target">
       <template v-if="target != null">
@@ -41,6 +35,7 @@ except according to the terms contained in the LICENSE file.
 </template>
 
 <script>
+import ActorLink from '../actor-link.vue';
 import DateTime from '../date-time.vue';
 import Selectable from '../selectable.vue';
 
@@ -86,7 +81,7 @@ acteeSpeciesByCategory.upgrade = acteeSpeciesByCategory.form;
 
 export default {
   name: 'AuditRow',
-  components: { DateTime, Selectable },
+  components: { ActorLink, DateTime, Selectable },
   mixins: [audit(), routes()],
   props: {
     audit: {

src/components/date-time.vue

@@ -10,7 +10,8 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <span :title="title">{{ text }}</span>
+  <time v-if="iso != null" :datetime="iso" :title="format(false)">{{ format(true) }}</time>
+  <span v-else>{{ blank }}</span>
 </template>
 
 <script>
@@ -21,7 +22,7 @@ import { formatDateTime } from '../util/date-time';
 export default {
   name: 'DateTime',
   props: {
-    iso: String, // eslint-disable-line vue/require-default-prop
+    iso: String,
     blank: {
       type: String,
       default: ''
@@ -30,14 +31,11 @@ export default {
   computed: {
     dateTime() {
       return DateTime.fromISO(this.iso, { locale: this.$i18n.locale });
-    },
-    title() {
-      return this.iso != null ? formatDateTime(this.dateTime) : null;
-    },
-    text() {
-      return this.iso != null
-        ? formatDateTime(this.dateTime, true)
-        : this.blank;
+    }
+  },
+  methods: {
+    format(relative) {
+      return formatDateTime(this.dateTime, relative);
     }
   }
 };