fix(convert): add "cm" to unit strings and skip revit params (#34 )

* feat(convert): skip revit params cant do anything w them so skipping for now for efficiency * fix(convert): add "cm" to unit strings
feat(ui): css-ing around + notifications on actions (#33 )
2022-02-23 10:11:48 +00:00 · 2022-02-14 21:05:03 +00:00 · 2022-01-19 12:01:23 +00:00
13 changed files with 384 additions and 196 deletions
@@ -34,7 +34,8 @@ module SpeckleSystems::SpeckleConnector
    def self._get_speckle_dir
      speckle_dir =
        case Sketchup.platform
-        when :platform_win then File.join(Dir.home, "AppData/Roaming/Speckle")
+        # sometimes Dir.home on windows points somewhere else bc I guess it's picking up a higher level user?
+        when :platform_win then File.join(Dir.pwd[%r{^((?:[^/]*/){3})}], "AppData/Roaming/Speckle")
        when :platform_osx then File.join(Dir.home, ".config", "Speckle")
        else
          nil
@@ -3,7 +3,7 @@ require "speckle_connector/converter/to_speckle"
 require "speckle_connector/converter/to_native"

 module SpeckleSystems::SpeckleConnector
-  SKETCHUP_UNIT_STRINGS = { "m" => "m", "mm" => "mm", "ft" => "feet", "in" => "inch", "yd" => "yard" }.freeze
+  SKETCHUP_UNIT_STRINGS = { "m" => "m", "mm" => "mm", "ft" => "feet", "in" => "inch", "yd" => "yard", "cm" => "cm" }.freeze
  public_constant :SKETCHUP_UNIT_STRINGS
  class ConverterSketchup
    include ToNative
@@ -6,6 +6,8 @@ module SpeckleSystems::SpeckleConnector::ToNative
    if can_convert_to_native(obj)
      convert_to_native(obj, Sketchup.active_model.entities)
    elsif obj.is_a?(Hash) && obj.key?("speckle_type")
+      return if is_ignored_speckle_type(obj)
+
      puts(">>> Found #{obj["speckle_type"]}: #{obj["id"]}")
      props = obj.keys.filter_map { |key| key unless key.start_with?("_") }
      props.each { |prop| traverse_commit_object(obj[prop]) }
@@ -32,7 +34,12 @@ module SpeckleSystems::SpeckleConnector::ToNative
    ].include?(obj["speckle_type"])
  end

+  def is_ignored_speckle_type(obj)
+    ["Objects.BuiltElements.Revit.Parameter"].include?(obj["speckle_type"])
+  end
+
  def convert_to_native(obj, entities = SketchUp.active_model.entities)
+    puts(">>> Converting #{obj["speckle_type"]}: #{obj["id"]}")
    case obj["speckle_type"]
    when "Objects.Geometry.Line", "Objects.Geometry.Polyline" then edge_to_native(obj, entities)
    when "Objects.Other.BlockInstance" then component_instance_to_native(obj, entities)
@@ -14,6 +14,7 @@
        "debounce": "^1.2.1",
        "register-service-worker": "^1.7.1",
        "sqlite3": "^5.0.2",
+        "v-tooltip": "^2.1.3",
        "vue": "^2.6.11",
        "vue-apollo": "^3.0.0-beta.11",
        "vue-matomo": "^4.1.0",
@@ -1876,7 +1877,6 @@
      "version": "7.16.7",
      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz",
      "integrity": "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==",
-      "dev": true,
      "dependencies": {
        "regenerator-runtime": "^0.13.4"
      },
@@ -15549,8 +15549,7 @@
    "node_modules/lodash": {
      "version": "4.17.21",
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
    },
    "node_modules/lodash._reinterpolate": {
      "version": "3.0.0",
@@ -17894,6 +17893,16 @@
        "node": ">=6"
      }
    },
+    "node_modules/popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
    "node_modules/portfinder": {
      "version": "1.0.28",
      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -19071,8 +19080,7 @@
    "node_modules/regenerator-runtime": {
      "version": "0.13.9",
      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
-      "dev": true
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
    },
    "node_modules/regenerator-transform": {
      "version": "0.14.5",
@@ -22497,6 +22505,17 @@
        "uuid": "bin/uuid"
      }
    },
+    "node_modules/v-tooltip": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-2.1.3.tgz",
+      "integrity": "sha512-xXngyxLQTOx/yUEy50thb8te7Qo4XU6h4LZB6cvEfVd9mnysUxLEoYwGWDdqR+l69liKsy3IPkdYff3J1gAJ5w==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "lodash": "^4.17.21",
+        "popper.js": "^1.16.1",
+        "vue-resize": "^1.0.1"
+      }
+    },
    "node_modules/v8-compile-cache": {
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@@ -23114,6 +23133,17 @@
        "npm": ">= 3.0.0"
      }
    },
+    "node_modules/vue-resize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-1.0.1.tgz",
+      "integrity": "sha512-z5M7lJs0QluJnaoMFTIeGx6dIkYxOwHThlZDeQnWZBizKblb99GSejPnK37ZbNE/rVwDcYcHY+Io+AxdpY952w==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "vue": "^2.6.0"
+      }
+    },
    "node_modules/vue-router": {
      "version": "3.5.3",
      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",
@@ -25761,7 +25791,6 @@
      "version": "7.16.7",
      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz",
      "integrity": "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==",
-      "dev": true,
      "requires": {
        "regenerator-runtime": "^0.13.4"
      }
@@ -36776,8 +36805,7 @@
    "lodash": {
      "version": "4.17.21",
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
    },
    "lodash._reinterpolate": {
      "version": "3.0.0",
@@ -38678,6 +38706,11 @@
        "ts-pnp": "^1.1.6"
      }
    },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
    "portfinder": {
      "version": "1.0.28",
      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -39684,8 +39717,7 @@
    "regenerator-runtime": {
      "version": "0.13.9",
      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
-      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
-      "dev": true
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
    },
    "regenerator-transform": {
      "version": "0.14.5",
@@ -42428,6 +42460,17 @@
      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
      "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
    },
+    "v-tooltip": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-2.1.3.tgz",
+      "integrity": "sha512-xXngyxLQTOx/yUEy50thb8te7Qo4XU6h4LZB6cvEfVd9mnysUxLEoYwGWDdqR+l69liKsy3IPkdYff3J1gAJ5w==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "lodash": "^4.17.21",
+        "popper.js": "^1.16.1",
+        "vue-resize": "^1.0.1"
+      }
+    },
    "v8-compile-cache": {
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@@ -42894,6 +42937,14 @@
      "resolved": "https://registry.npmjs.org/vue-matomo/-/vue-matomo-4.1.0.tgz",
      "integrity": "sha512-y+tdmhY835Ip3EAGfIAgA33+aBYrvRT7fNnBnA7bSM459XpoWXgqJKdbopVpEUrxCPIq8IkuF7g4KqSLc0Fa3w=="
    },
+    "vue-resize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-1.0.1.tgz",
+      "integrity": "sha512-z5M7lJs0QluJnaoMFTIeGx6dIkYxOwHThlZDeQnWZBizKblb99GSejPnK37ZbNE/rVwDcYcHY+Io+AxdpY952w==",
+      "requires": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
    "vue-router": {
      "version": "3.5.3",
      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",
@@ -15,6 +15,7 @@
    "debounce": "^1.2.1",
    "register-service-worker": "^1.7.1",
    "sqlite3": "^5.0.2",
+    "v-tooltip": "^2.1.3",
    "vue": "^2.6.11",
    "vue-apollo": "^3.0.0-beta.11",
    "vue-matomo": "^4.1.0",
@@ -41,4 +42,4 @@
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.7.0"
  }
-}
+}
@@ -85,6 +85,7 @@
      <v-container fluid>
        <router-view :stream-search-query="streamSearchQuery" />
      </v-container>
+      <global-toast />
    </v-main>
  </v-app>
 </template>
@@ -118,7 +119,9 @@ global.setSelectedAccount = function (account) {

 export default {
  name: 'App',
-  components: {},
+  components: {
+    GlobalToast: () => import('@/components/GlobalToast')
+  },
  props: {
    size: {
      type: Number,
@@ -0,0 +1,42 @@
+<template>
+  <v-snackbar v-model="snack" app bottom color="primary">
+    {{ text }}
+    <template #action="{}">
+      <v-btn v-if="actionName" :to="to" @click.append="snack = false">
+        {{ actionName }}
+      </v-btn>
+      <v-btn small icon @click="snack = false">
+        <v-icon small>mdi-close</v-icon>
+      </v-btn>
+    </template>
+  </v-snackbar>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      snack: false,
+      text: null,
+      actionName: null,
+      to: null
+    }
+  },
+  watch: {
+    snack(newVal) {
+      if (!newVal) {
+        this.text = null
+        this.actionName = null
+        this.to = null
+      }
+    }
+  },
+  mounted() {
+    this.$eventHub.$on('notification', (args) => {
+      this.snack = true
+      this.text = args.text
+      this.actionName = args.action ? args.action.name : null
+      this.to = args.action ? args.action.to : null
+    })
+  }
+}
+</script>
@@ -1,178 +1,140 @@
 <template>
-  <v-hover v-slot="{ hover }">
-    <v-card color="" class="mt-5 mb-5" style="transition: all 0.2s ease-in-out">
-      <v-row>
-        <v-col v-if="$apollo.loading">
-          <v-row>
-            <v-col><v-skeleton-loader type="article" /></v-col>
-          </v-row>
-        </v-col>
-        <v-col v-else>
-          <v-toolbar class="transparent elevation-0" dense>
-            <v-toolbar-title>{{ stream.name }}</v-toolbar-title>
-            <v-spacer />
-          </v-toolbar>
-          <v-card-text class="transparent elevation-0 mt-0 pt-0" dense>
-            <div class="text-caption">
-              Updated
-              <timeago class="mr-1" :datetime="stream.updatedAt" />
-              |
-              <v-icon class="ml-1" small>mdi-account-key-outline</v-icon>
-              {{ stream.role.split(':')[1] }}
-            </div>
-            <v-toolbar-title>
-              <v-menu offset-y>
-                <template #activator="{ on, attrs }">
-                  <v-chip v-if="stream.branches" small v-bind="attrs" class="mr-1" v-on="on">
-                    <v-icon small class="mr-1 float-left">mdi-source-branch</v-icon>
-                    {{ branchName }}
-                  </v-chip>
-                </template>
-                <v-list dense>
-                  <v-list-item
-                    v-for="(branch, index) in stream.branches.items"
-                    :key="index"
-                    link
-                    @click="switchBranch(branch.name)"
-                  >
-                    <v-list-item-title class="text-caption font-weight-regular">
-                      <v-icon v-if="branch.name == branchName" small class="mr-1 float-left">
-                        mdi-check
-                      </v-icon>
-                      <v-icon v-else small class="mr-1 float-left">mdi-source-branch</v-icon>
-                      {{ branch.name }} ({{ branch.commits.totalCount }})
-                    </v-list-item-title>
-                  </v-list-item>
-                </v-list>
-              </v-menu>
-
-              <v-menu offset-y>
-                <template #activator="{ on, attrs }">
-                  <v-chip v-if="stream.commits" small v-bind="attrs" v-on="on">
-                    <v-icon small class="mr-1 float-left">mdi-source-commit</v-icon>
-                    {{ selectedBranch.commits.items.length ? commitId : 'no commits' }}
-                  </v-chip>
-                </template>
-                <v-list dense>
-                  <v-list-item
-                    v-for="(commit, index) in selectedBranch.commits.items"
-                    :key="index"
-                    link
-                    @click="switchCommit(commit.id)"
-                  >
-                    <v-list-item-title class="text-caption font-weight-regular">
-                      <v-icon
-                        v-if="(commitId == 'latest' && index == 0) || commit.id == commitId"
-                        small
-                        class="mr-1 float-left"
-                      >
-                        mdi-check
-                      </v-icon>
-                      <v-icon v-else small class="mr-1 float-left">mdi-source-commit</v-icon>
-                      {{ commit.id }} |
-                      <span class="font-weight-regular">{{ commit.message }} |</span>
-                      <span class="font-weight-light ml-1">
-                        <timeago :datetime="commit.createdAt" />
-                      </span>
-                    </v-list-item-title>
-                  </v-list-item>
-                </v-list>
-              </v-menu>
-            </v-toolbar-title>
-          </v-card-text>
-        </v-col>
-        <v-col v-if="hover && !$apollo.loading" align="end" justify="center">
-          <v-tooltip bottom>
-            <template #activator="{ on, attrs }">
-              <v-btn icon class="mr-4 btn-fix" v-bind="attrs" v-on="on" @click="openInWeb">
-                <v-icon>mdi-open-in-new</v-icon>
-              </v-btn>
-            </template>
-            <span>Open in web</span>
-          </v-tooltip>
-
-          <v-tooltip bottom>
-            <template #activator="{ on, attrs }">
-              <v-btn
-                fab
-                :loading="loadingSend"
-                class="mr-4 elevation-1 btn-fix"
-                hint="Send"
-                v-bind="attrs"
-                v-on="on"
-                @click="send"
+  <v-card
+    v-if="stream"
+    :class="`mb-3 rounded-lg grey ${$vuetify.theme.dark ? 'darken-4' : 'lighten-4'}`"
+    @mouseenter="hover = true"
+    @mouseleave="hover = false"
+  >
+    <v-toolbar flat height="70">
+      <v-toolbar-title class="ml-0">
+        <!-- Uncomment when pinning is in place and add style="position: relative; left: -10px" to the element above :)  -->
+        <!-- <v-btn v-tooltip="'Pin this stream - it will be saved to this file.'" icon x-small>
+          <v-icon x-small>mdi-pin</v-icon>
+        </v-btn> -->
+        {{ stream.name }}
+      </v-toolbar-title>
+      <v-spacer />
+      <v-slide-x-transition>
+        <div v-show="hover" style="white-space: nowrap">
+          <v-btn v-tooltip="'View online'" icon small class="mr-3" @click="openInWeb">
+            <v-icon small>mdi-open-in-new</v-icon>
+          </v-btn>
+          <v-btn
+            v-tooltip="'Send'"
+            icon
+            class="mr-3 elevation-2"
+            :loading="loadingSend"
+            @click="send"
+          >
+            <!-- <v-icon>mdi-upload</v-icon> -->
+            <v-img v-if="$vuetify.theme.dark" src="@/assets/SenderWhite.png" max-width="30" />
+            <v-img v-else src="@/assets/Sender.png" max-width="30" />
+          </v-btn>
+          <v-btn
+            v-tooltip="'Receive'"
+            icon
+            class="elevation-2"
+            :loading="loadingReceive"
+            @click="receive"
+          >
+            <!-- <v-icon>mdi-download</v-icon> -->
+            <v-img v-if="$vuetify.theme.dark" src="@/assets/ReceiverWhite.png" max-width="30" />
+            <v-img v-else src="@/assets/Receiver.png" max-width="30" />
+          </v-btn>
+        </div>
+      </v-slide-x-transition>
+    </v-toolbar>
+    <v-card-text class="caption pt-1 text-truncate" style="white-space: nowrap">
+      Updated
+      <timeago class="mr-1" :datetime="stream.updatedAt" />
+      |
+      <v-icon class="ml-1" small>mdi-account-key-outline</v-icon>
+      {{ stream.role.split(':')[1] }}
+    </v-card-text>
+    <v-card-text class="d-flex align-center pb-5 mb-5 -mt-2" style="height: 50px">
+      <v-menu offset-y>
+        <template #activator="{ on, attrs }">
+          <v-chip v-if="stream.branches" small v-bind="attrs" class="mr-1" v-on="on">
+            <v-icon small class="mr-1 float-left">mdi-source-branch</v-icon>
+            {{ branchName }}
+          </v-chip>
+        </template>
+        <v-list dense>
+          <v-list-item
+            v-for="(branch, index) in stream.branches.items"
+            :key="index"
+            link
+            @click="switchBranch(branch.name)"
+          >
+            <v-list-item-title class="text-caption font-weight-regular">
+              <v-icon v-if="branch.name == branchName" small class="mr-1 float-left">
+                mdi-check
+              </v-icon>
+              <v-icon v-else small class="mr-1 float-left">mdi-source-branch</v-icon>
+              {{ branch.name }} ({{ branch.commits.totalCount }})
+            </v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+      <v-menu offset-y>
+        <template #activator="{ on, attrs }">
+          <v-chip v-if="stream.commits" small v-bind="attrs" v-on="on">
+            <v-icon small class="mr-1 float-left">mdi-source-commit</v-icon>
+            {{ selectedBranch.commits.items.length ? commitId : 'no commits' }}
+          </v-chip>
+        </template>
+        <v-list dense>
+          <v-list-item
+            v-for="(commit, index) in selectedBranch.commits.items"
+            :key="index"
+            link
+            @click="switchCommit(commit.id)"
+          >
+            <v-list-item-title class="text-caption font-weight-regular">
+              <v-icon
+                v-if="(commitId == 'latest' && index == 0) || commit.id == commitId"
+                small
+                class="mr-1 float-left"
              >
-                <v-img
-                  v-if="$vuetify.theme.dark"
-                  src="@/assets/SenderWhite.png"
-                  max-width="40"
-                  style="display: inline-block"
-                />
-                <v-img
-                  v-else
-                  src="@/assets/Sender.png"
-                  max-width="40"
-                  style="display: inline-block"
-                />
-              </v-btn>
-            </template>
-            <span>Send</span>
-          </v-tooltip>
-
-          <v-tooltip bottom>
-            <template #activator="{ on, attrs }">
-              <v-btn
-                fab
-                :loading="loadingReceive"
-                class="mr-4 elevation-1 btn-fix"
-                hint="Receive"
-                v-bind="attrs"
-                v-on="on"
-                @click="receive"
-              >
-                <v-img
-                  v-if="$vuetify.theme.dark"
-                  src="@/assets/ReceiverWhite.png"
-                  max-width="40"
-                  style="display: inline-block"
-                />
-                <v-img
-                  v-else
-                  src="@/assets/Receiver.png"
-                  max-width="40"
-                  style="display: inline-block"
-                />
-              </v-btn>
-            </template>
-            <span>Receive</span>
-          </v-tooltip>
-        </v-col>
-      </v-row>
-      <transition-group name="expand">
-        <v-card-text v-if="hover && !$apollo.loading" key="commit-message-field" class="mt-0 pt-0">
-          <transition name="fade">
+                mdi-check
+              </v-icon>
+              <v-icon v-else small class="mr-1 float-left">mdi-source-commit</v-icon>
+              {{ commit.id }} |
+              <span class="font-weight-regular">{{ commit.message }} |</span>
+              <span class="font-weight-light ml-1">
+                <timeago :datetime="commit.createdAt" />
+              </span>
+            </v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+      <div class="flex-grow-1 px-4">
+        <v-slide-y-transition>
+          <div v-show="hover">
            <v-text-field
              v-model="commitMessage"
-              class="small-text-field"
+              xxxclass="small-text-field"
              hide-details
              dense
              flat
-              label="Commit Message"
              placeholder="Write your commit message here"
            ></v-text-field>
-          </transition>
-        </v-card-text>
-        <v-progress-linear
-          v-if="(loadingSend || loadingReceive) && loadingStage"
-          key="progress-bar"
-          height="14"
-          indeterminate
-        >
-          <div class="text-caption">{{ loadingStage }}</div>
-        </v-progress-linear>
-      </transition-group>
-    </v-card>
-  </v-hover>
+          </div>
+        </v-slide-y-transition>
+      </div>
+    </v-card-text>
+    <v-progress-linear
+      v-if="(loadingSend || loadingReceive) && loadingStage"
+      key="progress-bar"
+      height="14"
+      indeterminate
+    >
+      <div class="text-caption">{{ loadingStage }}</div>
+    </v-progress-linear>
+  </v-card>
+  <v-card v-else class="my-2">
+    <v-skeleton-loader type="article" />
+  </v-card>
 </template>

 <script>
@@ -205,6 +167,7 @@ export default {
  },
  data() {
    return {
+      hover: false,
      loadingSend: false,
      loadingReceive: false,
      loadingStage: null,
@@ -383,6 +346,9 @@ export default {
      if (objects.length == 0) {
        this.loadingSend = false
        this.loadingStage = null
+        this.$eventHub.$emit('notification', {
+          text: 'No objects selected. Nothing was sent.'
+        })
        return
      }

@@ -423,7 +389,9 @@ export default {
          }
        })
        console.log('>>> SpeckleSketchUp: Sent to stream: ' + this.streamId, commit)
-
+        this.$eventHub.$emit('notification', {
+          text: 'Model selection sent!'
+        })
        this.loadingSend = false
        this.loadingStage = null
      } catch (err) {
@@ -1,11 +0,0 @@
-<template>
-  <v-container>
-    <v-card>hello there!</v-card>
-  </v-container>
-</template>
-
-<script>
-export default {}
-</script>
-
-<style></style>
@@ -4,11 +4,16 @@ import router from './router'
 import vuetify from './plugins/vuetify'
 import { createProvider } from './vue-apollo'

+Vue.prototype.$eventHub = new Vue()
+
 Vue.config.productionTip = false

 import VueTimeago from 'vue-timeago'
 Vue.use(VueTimeago, { locale: 'en' })

+import VueTooltip from 'v-tooltip'
+Vue.use(VueTooltip)
+
 import VueMatomo from 'vue-matomo'

 Vue.use(VueMatomo, {
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import Vuetify from 'vuetify/lib/framework'
-
+import '@/scss/styles.css'
 Vue.use(Vuetify)

 export default new Vuetify({
@@ -0,0 +1,121 @@
+.background-light {
+  background: #8e9eab;
+  background: -webkit-linear-gradient(to top right, #eeeeee, #c8e8ff) !important;
+  background: linear-gradient(to top right, #ffffff, #c8e8ff) !important;
+}
+
+.background-dark {
+  background: #141e30;
+  background: -webkit-linear-gradient(to top left, #243b55, #141e30) !important;
+  background: linear-gradient(to top left, #243b55, #141e30) !important;
+}
+
+/* TOOLTIPs */
+
+.tooltip {
+  display: block !important;
+  z-index: 10000;
+  font-family: 'Roboto', sans-serif !important;
+  font-size: 0.75rem !important;
+}
+
+.tooltip .tooltip-inner {
+  background: rgba(0, 0, 0, 1);
+  color: white;
+  border-radius: 16px;
+  padding: 5px 10px 4px;
+}
+
+.tooltip .tooltip-arrow {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  position: absolute;
+  margin: 5px;
+  border-color: rgba(0, 0, 0, 0.5);
+  z-index: 1;
+}
+
+.tooltip[x-placement^='top'] {
+  margin-bottom: 5px;
+}
+
+.tooltip[x-placement^='top'] .tooltip-arrow {
+  border-width: 5px 5px 0 5px;
+  border-left-color: transparent !important;
+  border-right-color: transparent !important;
+  border-bottom-color: transparent !important;
+  bottom: -5px;
+  left: calc(50% - 5px);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.tooltip[x-placement^='bottom'] {
+  margin-top: 5px;
+}
+
+.tooltip[x-placement^='bottom'] .tooltip-arrow {
+  border-width: 0 5px 5px 5px;
+  border-left-color: transparent !important;
+  border-right-color: transparent !important;
+  border-top-color: transparent !important;
+  top: -5px;
+  left: calc(50% - 5px);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.tooltip[x-placement^='right'] {
+  margin-left: 5px;
+}
+
+.tooltip[x-placement^='right'] .tooltip-arrow {
+  border-width: 5px 5px 5px 0;
+  border-left-color: transparent !important;
+  border-top-color: transparent !important;
+  border-bottom-color: transparent !important;
+  left: -5px;
+  top: calc(50% - 5px);
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.tooltip[x-placement^='left'] {
+  margin-right: 5px;
+}
+
+.tooltip[x-placement^='left'] .tooltip-arrow {
+  border-width: 5px 0 5px 5px;
+  border-top-color: transparent !important;
+  border-right-color: transparent !important;
+  border-bottom-color: transparent !important;
+  right: -5px;
+  top: calc(50% - 5px);
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.tooltip.popover .popover-inner {
+  background: #f9f9f9;
+  color: black;
+  padding: 24px;
+  border-radius: 5px;
+  box-shadow: 0 5px 30px rgba(black, 0.1);
+}
+
+.tooltip.popover .popover-arrow {
+  border-color: #f9f9f9;
+}
+
+.tooltip[aria-hidden='true'] {
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.15s, visibility 0.15s;
+}
+
+.tooltip[aria-hidden='false'] {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity 0.15s;
+}
@@ -1,5 +1,5 @@
 <template>
-  <v-container>
+  <div>
    <v-row>
      <v-col v-if="$apollo.loading && !streams">
        <v-row>
@@ -10,7 +10,7 @@
      </v-col>
    </v-row>
    <div v-if="!streamsFound" class="text-subtitle-1 text-center mt-8">No streams found... 👀</div>
-    <div v-if="streams">
+    <div v-if="streams" class="mt-5">
      <div v-for="stream in streams.items" :key="stream.id">
        <stream-card :stream-id="stream.id" />
      </div>
@@ -26,7 +26,7 @@
        </v-btn>
      </div>
    </div>
-  </v-container>
+  </div>
 </template>

 <script>