voom-presenters 0.1.0

data/views/mdc/assets/js/utils/urls.js

@@ -0,0 +1,54 @@
+export class VUrls {
+
+    paramsArrayToHash(params) {
+        var results = {};
+        // Map params to object/hash
+        for (let param of params) {
+            results[param[0]] = param[1];
+        }
+        return results;
+    }
+
+    buildURL(baseUrl) {
+        var url = baseUrl;
+        for (var i = 1; i < arguments.length; i++) {
+            var args = arguments[i];
+            if (Array.isArray(args)) {
+                for (let arg of args) {
+                    url += this.seperator(url) + this.encodeQueryParam(arg[0], arg[1]);
+                }
+            } else if (typeof args === 'object') {
+                url += this.seperator(url) + this.serialize(arguments[i]);
+            } else {
+                url += this.seperator(url) + args;
+            }
+        }
+        return url;
+    }
+
+    seperator(url) {
+        if (url.endsWith('?')) {
+            return '';
+        }
+        return url.includes("?") ? '&' : '?';
+    }
+
+    serialize(obj, prefix) {
+        var str = [],
+            p;
+        for (p in obj) {
+            if (obj.hasOwnProperty(p)) {
+                var k = prefix ? prefix + "[" + p + "]" : p,
+                    v = obj[p];
+                str.push((v !== null && typeof v === "object") ?
+                    this.serialize(v, k) :
+                    this.encodeQueryParam(k, v));
+            }
+        }
+        return str.join("&");
+    }
+
+    encodeQueryParam(k, v) {
+        return encodeURIComponent(k) + "=" + encodeURIComponent(v);
+    }
+}

data/views/mdc/assets/scss/app.scss

@@ -0,0 +1,31 @@
+@import 'material.blue_grey-orange.min';
+@import "theme";
+
+// MDC
+@import "components/fab";
+@import "components/button";
+@import "components/checkbox";
+@import "components/grid";
+@import "components/textfield";
+@import "components/list";
+@import "components/icon-toggles";
+@import "components/menu";
+@import "components/typography";
+@import "components/select";
+@import "components/chip";
+@import "components/card";
+@import "components/snackbar";
+
+// Custom
+@import "components/expansion-panel"; // MDL derivative
+//@import "components/table-pagination"; // WIP
+@import "components/avatar";
+@import "components/dialog";
+@import "components/switch";
+@import "components/image";
+@import "components/icon";
+@import "components/datetime";
+
+@import "styles";
+
+

data/views/mdc/assets/scss/components/avatar.scss

@@ -0,0 +1,41 @@
+
+.v-avatar {
+  margin-left: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  color: white;
+  align-items: center;
+  justify-content: center;
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.v-card-media {
+  .v-avatar {
+    background-color: var(--mdc-theme-text-icon-on-background, rgba(0, 0, 0, 0.38));
+    margin-right: 8px;
+    margin: 8px;
+  }
+  .v-avatar + .v-card-title {
+    margin-top: 8px;
+  }
+}
+
+.v-avatar-position-left {
+  float:left;
+}
+
+.v-avatar-position-top {
+  position: absolute;
+  top: 0;
+}
+
+.v-avatar-position-right {
+  float:right;
+}
+
+.v-avatar-position-bottom {
+  position: absolute;
+  bottom: 0;
+}

data/views/mdc/assets/scss/components/button.scss

@@ -0,0 +1,47 @@
+@import "@material/button/mdc-button";
+
+.mdc-button.v-secondary-filled-button {
+  @include mdc-button-filled-accessible($mdc-theme-secondary);
+}
+
+
+.mdc-button.v-secondary-text-button {
+  @include mdc-button-ink-color($mdc-theme-secondary);
+  @include mdc-states(secondary);
+}
+
+.v-button-position-left {
+  float: left;
+}
+
+.v-button-text-align-left {
+ padding-left: 0;
+}
+
+.v-button-position-right {
+  float: right;
+}
+
+
+v-card-title-position-left {
+  position: absolute;
+  left: 0;
+}
+
+.v-button-icon-position-top {
+  position: absolute;
+  top: 0;
+}
+
+.v-button-icon-position-right {
+  position: absolute;
+  right: 0;
+}
+
+.v-button-icon-position-bottom {
+  position: absolute;
+  bottom: 0;
+
+}
+
+

data/views/mdc/assets/scss/components/card.scss

@@ -0,0 +1,54 @@
+@import "@material/card/mdc-card";
+
+.v-card {
+  position: relative;
+
+}
+
+.v-card-media {
+  position: relative;
+}
+
+.v-card-content {
+  padding: 10px 10px 0px 10px;
+}
+
+.v-card-title {
+  padding: 10px 10px 0px 10px;
+}
+
+.v-card-title-position-left {
+  position: absolute;
+  left: 0;
+}
+
+.v-card-title-position-top {
+  position: absolute;
+  top: 0;
+}
+
+.v-card-title-position-right {
+  position: absolute;
+  right: 0;
+}
+
+.v-card-title-position-bottom {
+  position: absolute;
+  bottom: 0;
+
+}
+
+//.v-card-overflow-menu {
+//  position: absolute;
+//  right: 16px;
+//  top: 16px;
+//}
+
+.v-card-media-image, .v-card-media-avatar {
+}
+
+.v-card__media-menu{
+  .v-button-icon-position-top {
+    top: 8px;
+  }
+}

data/views/mdc/assets/scss/components/checkbox.scss

@@ -0,0 +1,5 @@
+@import "@material/checkbox/mdc-checkbox";
+
+.v-checkbox__label {
+  line-height: 40px;
+}

data/views/mdc/assets/scss/components/chip.scss

@@ -0,0 +1,30 @@
+@import "@material/chips/mdc-chips";
+
+.mdc-chip__icon.v-icon-position-left {
+  float: none;
+  padding-right: 0;
+}
+
+.mdc-chip__icon.v-icon-position-top {
+  //position: absolute;
+  //top: 0;
+}
+
+.mdc-chip__icon.v-icon-position-right {
+  float: none;
+  padding-left: 0;
+}
+
+.mdc-chip__icon.v-icon-position-bottom {
+  //position: absolute;
+  //bottom: 0;
+}
+
+.v-chip__primary {
+  background-color: $mdc-theme-primary;
+  @include mdc-button-ink-color(text-primary-on-dark);
+}
+
+.v-chip__secondary {
+  background-color: $mdc-theme-secondary;
+}

data/views/mdc/assets/scss/components/dialog.scss

@@ -0,0 +1,3 @@
+.v-dialog--form  {
+  padding-bottom: 0;
+}

data/views/mdc/assets/scss/components/expansion-panel.scss

@@ -0,0 +1,153 @@
+// https://codepen.io/rustemgareev/pen/dVyyYM/
+$v-expansion-bg: #fff;
+
+.v-expansion {
+  border-bottom: 1px solid rgba(0, 0, 0, .12);
+
+  &__summary {
+    padding-left: 24px;
+    padding-right: 24px;
+    height: 48px;
+    display: flex;
+    outline: none;
+    cursor: pointer;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &::after {
+      font-family: "Material Icons";
+      content: "\e313";
+      font-size: 24px;
+      font-weight: normal;
+      font-style: normal;
+      display: inline-flex;
+      flex-direction: column;
+      user-select: none;
+      justify-content: center;
+      transition: transform .2s, color .2s;
+      margin-left: auto;
+      // color: rgba(0, 0, 0, .38);
+    }
+  }
+
+  &__header {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    font-size: 0.937rem;
+    font-weight: 500;
+    flex-basis: 30%;
+    margin-right: 1rem;
+    cursor: pointer;
+  }
+
+  &__subheader {
+    font-size: .75rem;
+    color: rgba(0, 0, 0, .54);
+  }
+
+  &__secondary-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    font-size: 0.9375rem;
+    font-weight: 500;
+    flex-basis: 30%;
+    color: rgba(0, 0, 0, .87);
+    margin-right: 16px;
+  }
+
+  &__content {
+    padding-left: 24px;
+    padding-right: 24px;
+    padding-top: 16px;
+    padding-bottom: 16px;
+
+    & + .v-expansion__actions {
+      border-top: 1px solid rgba(0, 0, 0, .12);
+    }
+  }
+
+  &__actions {
+    display: flex;
+    flex-direction: row-reverse;
+    padding-top: 16px;
+    padding-bottom: 16px;
+  }
+
+  &__action {
+    margin-right: 8px;
+  }
+
+  &[open] {
+    .v-expansion__summary::after {
+      transform: rotate(180deg);
+    }
+  }
+
+  // Open state
+  &[open] {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.v-expansion {
+  display: block;
+  // margin: 0;
+  transition: margin 225ms cubic-bezier(.4,0,.2,1);
+
+  background-color: $v-expansion-bg;
+  box-sizing: content-box;
+  color: rgba(0,0,0,.87);
+}
+
+.v-expansion-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 48px;
+  padding: 0 24px;
+  font-size: 15px;
+  font-weight: 400;
+  outline: none;
+
+  &::-webkit-details-marker {
+    display:none;
+  }
+
+  &__content {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    overflow: hidden;
+  }
+
+  &__title {
+    display: flex;
+    flex-grow: 1;
+    margin-right: 16px;      
+  }
+
+  &__description {
+    display: flex;
+    flex-grow: 1;
+    margin-right: 16px;
+  }
+}
+
+.v-expansion-panel {
+  &__content {
+    padding: 0 24px 16px;
+  }
+}

data/views/mdc/assets/scss/components/fab.scss

@@ -0,0 +1,8 @@
+@import "@material/fab/mdc-fab";
+
+.v-fab--absolute {
+  position: relative;
+  float: right;
+  margin:  6px -8px -69px;
+  z-index: 10;
+}

data/views/mdc/assets/scss/components/grid.scss

@@ -0,0 +1,10 @@
+@import "@material/layout-grid/mdc-layout-grid";
+
+@each $size in map-keys($mdc-layout-grid-columns) {
+  @include mdc-layout-grid-media-query_($size) {
+    $gutter: map-get($mdc-layout-grid-default-gutter, $size);
+    .v-nested_grid {
+      padding: $gutter/2 0 $gutter/2 0;
+    }
+  }
+}