glib-web 0.5.98 → 0.6.2

package/templates/_menu.vue

@@ -1,38 +1,38 @@
-<template>
-  <v-list-item-action v-if="editMenu">
-    <common-dropdownMenu :spec="editMenu" :disabled="$isBusy" />
-  </v-list-item-action>
-</template>
-
-<script>
-export default {
-  props: {
-    editButtons: { type: Array, required: true }
-  },
-  computed: {
-    // This needs to be computed so that it is always up-to-date, regardless of whether:
-    // 1. The page is navigated away and the parent component gets reused or
-    // 2. There is just a delay in the initialization of the menu variable in ($ready())
-    editMenu() {
-      if (this.editButtons.length > 0) {
-        return {
-          icon: { material: { name: "more_vert" } },
-          childButtons: this.editButtons
-        };
-      } else {
-        return null;
-      }
-    }
-  },
-  methods: {
-    buttonSpec(item) {
-      return Object.assign({}, item, {
-        view: "button-v1",
-        styleClasses: ["text"]
-      });
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+  <v-list-item-action v-if="editMenu">
+    <common-dropdownMenu :spec="editMenu" :disabled="$isBusy" />
+  </v-list-item-action>
+</template>
+
+<script>
+export default {
+  props: {
+    editButtons: { type: Array, required: true }
+  },
+  computed: {
+    // This needs to be computed so that it is always up-to-date, regardless of whether:
+    // 1. The page is navigated away and the parent component gets reused or
+    // 2. There is just a delay in the initialization of the menu variable in ($ready())
+    editMenu() {
+      if (this.editButtons.length > 0) {
+        return {
+          icon: { material: { name: "more_vert" } },
+          childButtons: this.editButtons
+        };
+      } else {
+        return null;
+      }
+    }
+  },
+  methods: {
+    buttonSpec(item) {
+      return Object.assign({}, item, {
+        view: "button-v1",
+        styleClasses: ["text"]
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

package/templates/comment.vue

@@ -1,202 +1,202 @@
-<template>
-  <div v-longclick="$onLongPress" class="outer-container">
-    <div :class="[spec.editButtons ? 'container-edit' : 'container']">
-      <v-card flat :class="mode" class="py-1">
-        <v-card-title v-if="mode === 'system'" class="caption">{{
-          spec.subtitle
-        }}</v-card-title>
-        <v-avatar
-          v-if="spec.imageUrl && mode !== 'outgoing'"
-          class="avatar"
-          size="30px"
-        >
-          <img :src="spec.imageUrl" alt="avatar" />
-        </v-avatar>
-        <v-card-title
-          v-if="spec.title"
-          class="font-weight-bold body-2 subtitle"
-          >{{ spec.title }}</v-card-title
-        >
-        <div v-if="mode !== 'system'" class="comment-bubble pa-2">
-          {{ spec.subtitle }}
-        </div>
-        <img
-          v-if="spec.image"
-          :src="spec.image"
-          class="comment-image pa-2"
-          :href="taHref(spec)"
-          @click="taClick($event, spec)"
-        />
-        <v-card-title v-if="spec.subsubtitle" class="subsubtitle caption">{{
-          spec.subsubtitle
-        }}</v-card-title>
-
-        <div class="mt-1 chips">
-          <template v-for="(spec, index) in chips">
-            <v-chip :key="index" class="ma-1" :color="spec.color">
-              {{ spec.text }}
-            </v-chip>
-          </template>
-        </div>
-      </v-card>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    spec: { type: Object, required: true }
-  },
-  data: function() {
-    return {
-      position: null,
-      mode: null,
-      chips: []
-    };
-  },
-  methods: {
-    $ready() {
-      const template = this.spec.template;
-      this.mode = this.determineMode(template);
-
-      this.chips = (this.spec.chips || []).map(spec => {
-        var color = null;
-        this.$type.ifArray(spec.styleClasses, classes => {
-          for (const val of ["success", "info", "warning", "error"]) {
-            if (classes.includes(val)) {
-              color = val;
-            }
-          }
-        });
-        return Object.assign({}, spec, { color: color });
-      });
-    },
-    determineMode(template) {
-      switch (template) {
-        case "commentIncoming":
-        case "commentImageIncoming":
-        case "commentVideoIncoming":
-          return "incoming";
-        case "commentOutgoing":
-        case "commentImageOutgoing":
-        case "commentVideoOutgoing":
-          return "outgoing";
-        case "systemComment":
-          return "system";
-      }
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.outer-container {
-  width: 100%;
-  display: grid;
-  grid-template-columns: 1fr 56px;
-}
-.edit-actions {
-  grid-column: 2/3;
-  justify-content: center;
-}
-.container,
-.container-edit {
-  width: 100%;
-  display: grid;
-  grid-template-columns: 30% 20% 20% 30%;
-}
-.container-edit {
-  padding: 0px;
-  grid-column: 1/2;
-}
-.container {
-  grid-column: 1/3;
-}
-.system {
-  max-height: auto;
-  grid-column: 1/5;
-  color: #bdbdbd;
-  justify-self: center;
-}
-.incoming {
-  display: grid;
-  grid-template-columns: 36px auto;
-  grid-template-rows: 1fr auto 0.5fr;
-  grid-column: 1/4;
-
-  > * {
-    justify-self: start;
-    grid-column: 2/3;
-  }
-
-  > .chips {
-    grid-row: 4/4;
-  }
-
-  > .comment-bubble {
-    background-color: #e6e5ea;
-    border-radius: 0px 10px 10px 10px;
-    grid-row: 2/3;
-  }
-
-  > .comment-image {
-    max-width: 100%;
-    height: 300px;
-    border-radius: 10px !important;
-    grid-row: 2/3;
-    padding: 0px !important;
-    cursor: pointer;
-  }
-
-  > .subsubtitle {
-    grid-row: 3/4;
-    padding: 0;
-    color: #9e9e9e;
-    padding-top: 4px;
-    align-self: start;
-  }
-}
-.avatar {
-  grid-row: 1/2;
-  grid-column: 1/2;
-  padding: 0;
-  justify-self: center;
-}
-.subtitle {
-  grid-row: 1/2;
-  grid-column: 2/3;
-  padding: 0;
-}
-.outgoing {
-  display: grid;
-  grid-template-rows: auto 1fr;
-  grid-column: 2/5;
-
-  > * {
-    justify-self: end;
-  }
-
-  > .comment-bubble {
-    background-color: #0084ff;
-    color: #fff;
-    border-radius: 10px 10px 0px 10px !important;
-    grid-row: 1/2;
-  }
-
-  > .comment-image {
-    max-width: 100%;
-    height: 300px;
-    border-radius: 10px !important;
-    grid-row: 1/2;
-    padding: 0px !important;
-    cursor: pointer;
-  }
-
-  > .subsubtitle {
-    grid-row: 2/3;
-    padding: 0;
-    color: #9e9e9e;
-  }
-}
-</style>
+<template>
+  <div v-longclick="$onLongPress" class="outer-container">
+    <div :class="[spec.editButtons ? 'container-edit' : 'container']">
+      <v-card flat :class="mode" class="py-1">
+        <v-card-title v-if="mode === 'system'" class="caption">{{
+          spec.subtitle
+        }}</v-card-title>
+        <v-avatar
+          v-if="spec.imageUrl && mode !== 'outgoing'"
+          class="avatar"
+          size="30px"
+        >
+          <img :src="spec.imageUrl" alt="avatar" />
+        </v-avatar>
+        <v-card-title
+          v-if="spec.title"
+          class="font-weight-bold body-2 subtitle"
+          >{{ spec.title }}</v-card-title
+        >
+        <div v-if="mode !== 'system'" class="comment-bubble pa-2">
+          {{ spec.subtitle }}
+        </div>
+        <img
+          v-if="spec.image"
+          :src="spec.image"
+          class="comment-image pa-2"
+          :href="taHref(spec)"
+          @click="taClick($event, spec)"
+        />
+        <v-card-title v-if="spec.subsubtitle" class="subsubtitle caption">{{
+          spec.subsubtitle
+        }}</v-card-title>
+
+        <div class="mt-1 chips">
+          <template v-for="(spec, index) in chips">
+            <v-chip :key="index" class="ma-1" :color="spec.color">
+              {{ spec.text }}
+            </v-chip>
+          </template>
+        </div>
+      </v-card>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data: function() {
+    return {
+      position: null,
+      mode: null,
+      chips: []
+    };
+  },
+  methods: {
+    $ready() {
+      const template = this.spec.template;
+      this.mode = this.determineMode(template);
+
+      this.chips = (this.spec.chips || []).map(spec => {
+        var color = null;
+        this.$type.ifArray(spec.styleClasses, classes => {
+          for (const val of ["success", "info", "warning", "error"]) {
+            if (classes.includes(val)) {
+              color = val;
+            }
+          }
+        });
+        return Object.assign({}, spec, { color: color });
+      });
+    },
+    determineMode(template) {
+      switch (template) {
+        case "commentIncoming":
+        case "commentImageIncoming":
+        case "commentVideoIncoming":
+          return "incoming";
+        case "commentOutgoing":
+        case "commentImageOutgoing":
+        case "commentVideoOutgoing":
+          return "outgoing";
+        case "systemComment":
+          return "system";
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.outer-container {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 56px;
+}
+.edit-actions {
+  grid-column: 2/3;
+  justify-content: center;
+}
+.container,
+.container-edit {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 30% 20% 20% 30%;
+}
+.container-edit {
+  padding: 0px;
+  grid-column: 1/2;
+}
+.container {
+  grid-column: 1/3;
+}
+.system {
+  max-height: auto;
+  grid-column: 1/5;
+  color: #bdbdbd;
+  justify-self: center;
+}
+.incoming {
+  display: grid;
+  grid-template-columns: 36px auto;
+  grid-template-rows: 1fr auto 0.5fr;
+  grid-column: 1/4;
+
+  > * {
+    justify-self: start;
+    grid-column: 2/3;
+  }
+
+  > .chips {
+    grid-row: 4/4;
+  }
+
+  > .comment-bubble {
+    background-color: #e6e5ea;
+    border-radius: 0px 10px 10px 10px;
+    grid-row: 2/3;
+  }
+
+  > .comment-image {
+    max-width: 100%;
+    height: 300px;
+    border-radius: 10px !important;
+    grid-row: 2/3;
+    padding: 0px !important;
+    cursor: pointer;
+  }
+
+  > .subsubtitle {
+    grid-row: 3/4;
+    padding: 0;
+    color: #9e9e9e;
+    padding-top: 4px;
+    align-self: start;
+  }
+}
+.avatar {
+  grid-row: 1/2;
+  grid-column: 1/2;
+  padding: 0;
+  justify-self: center;
+}
+.subtitle {
+  grid-row: 1/2;
+  grid-column: 2/3;
+  padding: 0;
+}
+.outgoing {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-column: 2/5;
+
+  > * {
+    justify-self: end;
+  }
+
+  > .comment-bubble {
+    background-color: #0084ff;
+    color: #fff;
+    border-radius: 10px 10px 0px 10px !important;
+    grid-row: 1/2;
+  }
+
+  > .comment-image {
+    max-width: 100%;
+    height: 300px;
+    border-radius: 10px !important;
+    grid-row: 1/2;
+    padding: 0px !important;
+    cursor: pointer;
+  }
+
+  > .subsubtitle {
+    grid-row: 2/3;
+    padding: 0;
+    color: #9e9e9e;
+  }
+}
+</style>

package/templates/featured.vue

@@ -1,32 +1,32 @@
-<template>
-  <v-card :href="$href()" @click="$onClick()">
-    <v-img :src="spec.imageUrl" height="200" :style="genericStyles()" />
-
-    <v-list-item v-if="spec.template != 'spacer'">
-      <v-list-item-content>
-        <v-list-item-title>{{ spec.title }}</v-list-item-title>
-        <v-list-item-subtitle v-if="spec.subtitle">{{
-          spec.subtitle
-        }}</v-list-item-subtitle>
-        <v-list-item-subtitle v-if="spec.subsubtitle">{{
-          spec.subsubtitle
-        }}</v-list-item-subtitle>
-      </v-list-item-content>
-
-      <template-menu :edit-buttons="spec.editButtons || []" />
-    </v-list-item>
-  </v-card>
-</template>
-
-<script>
-// import Menu from "./menu";
-
-export default {
-  // components: {
-  //   "template-menu": Menu
-  // },
-  props: {
-    spec: { type: Object, required: true }
-  }
-};
-</script>
+<template>
+  <v-card :href="$href()" @click="$onClick()">
+    <v-img :src="spec.imageUrl" height="200" :style="genericStyles()" />
+
+    <v-list-item v-if="spec.template != 'spacer'">
+      <v-list-item-content>
+        <v-list-item-title>{{ spec.title }}</v-list-item-title>
+        <v-list-item-subtitle v-if="spec.subtitle">{{
+          spec.subtitle
+        }}</v-list-item-subtitle>
+        <v-list-item-subtitle v-if="spec.subsubtitle">{{
+          spec.subsubtitle
+        }}</v-list-item-subtitle>
+      </v-list-item-content>
+
+      <template-menu :edit-buttons="spec.editButtons || []" />
+    </v-list-item>
+  </v-card>
+</template>
+
+<script>
+// import Menu from "./menu";
+
+export default {
+  // components: {
+  //   "template-menu": Menu
+  // },
+  props: {
+    spec: { type: Object, required: true }
+  }
+};
+</script>