upgrade to vuetify 2

2019-09-02 16:37:57 +01:00
parent 1444e27062
commit 5f312efdf3
9 changed files with 192 additions and 123 deletions
@@ -10440,9 +10440,9 @@
      }
    },
    "vuetify": {
-      "version": "1.5.5",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-1.5.5.tgz",
-      "integrity": "sha512-WXFpRNO+AX4WjmA/+maDOBLQpHpkw8xf7O9iV8KKbKVQv7OBbLOEt7a0LBKRRNJboZPyOFXtt7K4+Q/KYc6dnQ=="
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.0.11.tgz",
+      "integrity": "sha512-H5g0Wf/KHS1t29X+kh5hkj25dZNITCDtOb3UGl1YXx5Ua3xXUfXBRjKP50BJ7uZtQ3Jk9CiwoA6k3Lstv6zFow=="
    },
    "vuex": {
      "version": "3.1.0",
@@ -11,7 +11,7 @@
    "roboto-fontface": "*",
    "vue": "^2.6.6",
    "vue-router": "^3.0.1",
-    "vuetify": "^1.5.5",
+    "vuetify": "^2.0.11",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
@@ -1,10 +1,10 @@
 <template>
  <v-app>
-    <v-toolbar app v-if='!showNotEmbeddError'>
-      <v-btn @click='showAccountsPopup()' icon small>
-        <v-icon class='small' small>account_circle</v-icon>
+    <v-app-bar app v-if='!showNotEmbeddError'>
+      <v-btn @click='showAccountsPopup()' icon>
+        <v-icon>account_circle</v-icon>
      </v-btn>
-      <v-toolbar-title class="headline text-uppercase mx-0">
+      <v-toolbar-title class="headline text-uppercase mx-0 pa-0">
        <span @click='showDev()'>Speckle </span>
        <span class="font-weight-light">{{$store.state.hostAppName}}</span>
      </v-toolbar-title>
@@ -15,12 +15,12 @@
      <v-btn color="primary" v-show='$store.state.accounts.length>0' absolute bottom right fab :ripple="false" @click.native='showAddNewSender=true' style="margin-right:60px">
        <v-icon>cloud_upload</v-icon>
      </v-btn>
-    </v-toolbar>
-    <v-dialog v-model="showAddNewReceiver" scrollable fullscreen v-if='!showNotEmbeddError'>
+    </v-app-bar>
+    <v-dialog v-model="showAddNewReceiver" scrollable xxxfullscreen v-if='!showNotEmbeddError'>
      <NewClient :is-visible='showAddNewReceiver' @close='showAddNewReceiver=false'>
      </NewClient>
    </v-dialog>
-    <v-dialog v-model="showAddNewSender" scrollable fullscreen v-if='!showNotEmbeddError'>
+    <v-dialog v-model="showAddNewSender" scrollable xxxfullscreen v-if='!showNotEmbeddError'>
      <NewClientSender :is-visible='showAddNewSender' @close='showAddNewSender=false'>
      </NewClientSender>
    </v-dialog>
@@ -30,15 +30,15 @@
          <v-flex xs12>
            <v-card color='primary' dark>
              <v-img contain src='https://robohash.org/specklesucks' height='210'></v-img>
-              <v-card-text class='text-xs-center'>
+              <v-card-text class='text-sm-center white--text'>
                <b>Howdy, stranger!</b> Seems you have no speckle accounts yet.
-                <v-btn block @click.native='showAccountsPopup()'>add an account</v-btn>
+                <v-btn block class="mt-2" @click.native='showAccountsPopup()'>add an account</v-btn>
              </v-card-text>
            </v-card>
          </v-flex>
        </v-layout>
        <v-layout row wrap>
-          <v-flex xs12 md6 pa-3 xxxv-if='receivers.length>0'>
+          <v-flex xs12 md6 pa-4 xxxv-if='receivers.length>0'>
            <span class='headline text-uppercase secondary--text'>Receivers</span>
            <v-divider class='my-4 secondary'></v-divider>
            <span class="" v-if="receivers.length===0">There are no receiver clients in this file.</span>
@@ -49,7 +49,7 @@
              </v-layout>
            </v-container>
          </v-flex>
-          <v-flex xs12 md6 pa-3>
+          <v-flex xs12 md6 pa-4>
            <span class='headline text-uppercase primary--text'>Senders</span>
            <v-divider class='my-4 primary'></v-divider>
            <span class="" v-if="senders.length===0">There are no sender clients in this file.</span>
@@ -64,18 +64,18 @@
    </v-content>
    <v-dialog v-model="showNotEmbeddError" persistent width="500">
      <v-card>
-        <v-card-title class="headline primary dark white--text" primary-title>
+        <v-card-title class="headline primary white--text" primary-title>
          Ouups. This Speckle Ui is not embedded.
        </v-card-title>
        <v-img src="https://robohash.org/speckled" height='210' contain></v-img>
-        <v-card-text>
+        <v-card-text class='mt-5' >
          See, we're looking for this <code>UiBindings</code> object, that should connect this ui to its subsequent model and we can't find it. Don't worry. It's not your fault.
          If you're confused, reach out below:
        </v-card-text>
-        <v-card-text class='text-xs-center'>
-          <v-btn large round color='' style='width: 200px' class='mt-1' :href='$store.state.slackInviteUrl' target='_blank'>Slack <v-icon right>question_answer</v-icon>
+        <v-card-text class='text-sm-center'>
+          <v-btn large rounded color='' style='width: 200px' class='mt-2' :href='$store.state.slackInviteUrl' target='_blank'>Slack <v-icon right>question_answer</v-icon>
          </v-btn><br>
-          <v-btn large round color='' style='width: 200px' class='mt-1' href='https://discourse.speckle.works' target='_blank'>Forum <v-icon right>speaker_notes</v-icon>
+          <v-btn large rounded color='' style='width: 200px' class='mt-3' href='https://discourse.speckle.works' target='_blank'>Forum <v-icon right>speaker_notes</v-icon>
          </v-btn>
        </v-card-text>
      </v-card>
@@ -132,6 +132,10 @@ export default {
    this.$store.dispatch( 'getAccounts' )
    this.$store.dispatch( 'getApplicationHostName' )
    this.$store.dispatch( 'getExistingClients' )
+    this.$store.dispatch( 'getFilters' )
  }
 }
-</script>
+</script>
+<style>
+.theme--light.v-card>.v-card__text {color: #000 !important}
+</style>
@@ -5,20 +5,23 @@
        :class="`elevation-${client.expired ? '15' : '1'} ${client.expired ? 'expired' : ''}`"
        slot-scope="{ hover }"
      >
-        <v-toolbar color="secondary text-truncate elevation-0" dark>
-          <v-icon color="white">cloud_download</v-icon>
+        <v-toolbar color="secondary text-truncate elevation-0" dark height="70">
+          <v-btn fab small color="white" :flat="!client.expired" @click.native="bakeReceiver()"><v-icon color="secondary">cloud_download</v-icon></v-btn>
          <v-toolbar-title class="text-truncate font-weight-light">{{client.name}}</v-toolbar-title>
          <v-spacer></v-spacer>
+          <v-btn small icon @click.native="selectObjects">
+            <v-icon small>gps_fixed</v-icon>
+          </v-btn>
          <v-btn
+            small
            icon
            :href="`${client.account.RestApi.replace('api','#')}streams/${client.streamId}`"
            target="_blank"
          >
-            <v-icon>open_in_new</v-icon>
+            <v-icon small>open_in_new</v-icon>
          </v-btn>
-          <v-btn :flat="!client.expired" @click.native="bakeReceiver()">
-            Pull
-            <v-icon small right>cloud_download</v-icon>
+          <v-btn small flat icon @click.native="deleteClient">
+            <v-icon small>delete</v-icon>
          </v-btn>
        </v-toolbar>
        <v-card-text class="caption">
@@ -44,19 +47,20 @@
            v-model="client.loadingProgress"
            color="primary darken-1"
          ></v-progress-linear>
-          <br>
+          <br />
          <span class="caption text--lighten-3">{{client.loadingBlurb}}</span>&nbsp;
          <span class="caption grey--text">Total objects: {{client.objects.length}}</span>
        </v-card-text>
-        <v-card-actions>
-          <v-btn small icon @click.native="selectObjects">
-            <v-icon small>gps_fixed</v-icon>
+        <!-- <v-card-actions>
+          <v-btn color="secondary" :flat="!client.expired" @click.native="bakeReceiver()">
+            Pull
+            <v-icon small right>cloud_download</v-icon>
          </v-btn>
          <v-spacer></v-spacer>
          <v-btn small flat outline icon color="error" @click.native="deleteClient">
            <v-icon small>delete</v-icon>
          </v-btn>
-        </v-card-actions>
+        </v-card-actions> -->
        <v-alert
          v-model="client.expired"
          dismissible
@@ -69,8 +73,9 @@
          type="warning"
          xxxcolor="grey darken-2"
          v-if="client.errors && client.errors!== ''"
-          
-        ><div v-html="client.errors"></div></v-alert>
+        >
+          <div v-html="client.errors"></div>
+        </v-alert>
      </v-card>
    </v-hover>
  </v-flex>
@@ -160,7 +165,7 @@ export default {
    let wsUrl = this.account.RestApi.replace("http", "ws");
    this.sockette = new Sockette(
      `${wsUrl}?client_id=${this.client.clientId}&access_token=${
-        this.account.Token
+      this.account.Token
      }`,
      {
        timeout: 5e3,
@@ -6,23 +6,66 @@
        slot-scope="{ hover }"
      >
        <v-dialog v-model="showEditSender" scrollable fullscreen>
-          <NewClientSender :is-visible="showEditSender" :is-edit="true" @close="showEditSender=false" :sender-client="client"></NewClientSender>
+          <NewClientSender
+            :is-visible="showEditSender"
+            :is-edit="true"
+            @close="showEditSender=false"
+            :sender-client="client"
+          ></NewClientSender>
        </v-dialog>

-        <v-toolbar color="primary xxxdarken-1 text-truncate elevation-0" dark>
-          <v-icon color="white">cloud_upload</v-icon>
-          <v-toolbar-title class="text-truncate font-weight-light">{{client.name}}</v-toolbar-title>
+        <v-toolbar color="primary xxxdarken-1 text-truncate elevation-0" dark height="70">
+          <v-btn fab small color="white" @click.native="startUpload()">
+            <v-icon color="primary">cloud_upload</v-icon>
+          </v-btn>
+
+          <v-toolbar-title class="text-truncate font-weight-light ml-3">{{client.name}}</v-toolbar-title>
          <v-spacer></v-spacer>
-          <v-btn icon @click.native="selectObjects">
-            <v-icon>gps_fixed</v-icon>
-          </v-btn>
-          <v-btn
-            icon
-            @click.native="startProcess(`${client.account.RestApi.replace('api','#')}streams/${client.streamId}`)"
-            target="_blank"
-          >
-            <v-icon>open_in_new</v-icon>
-          </v-btn>
+
+          <!-- EDIT -->
+          <v-tooltip bottom>
+            <template v-slot:activator="{ on }">
+              <v-btn small icon @click.native="showEditSender=true">
+                <v-icon small>edit</v-icon>
+              </v-btn>
+            </template>
+            <span>Edit Sender</span>
+          </v-tooltip>
+
+          <!-- SELECT OBJECTS -->
+          <v-tooltip bottom>
+            <template v-slot:activator="{ on }">
+              <v-btn small icon @click.native="selectObjects">
+                <v-icon small>gps_fixed</v-icon>
+              </v-btn>
+            </template>
+            <span>Show objects</span>
+          </v-tooltip>
+
+          <!-- OPEN IN BROSWER -->
+          <v-tooltip bottom>
+            <template v-slot:activator="{ on }">
+              <v-btn
+                icon
+                small
+                @click.native="startProcess(`${client.account.RestApi.replace('api','#')}streams/${client.streamId}`)"
+                target="_blank"
+              >
+                <v-icon small>open_in_new</v-icon>
+              </v-btn>
+            </template>
+            <span>Open stream in web browser</span>
+          </v-tooltip>
+
+          <!-- DELETE -->
+          <v-tooltip bottom>
+            <template v-slot:activator="{ on }">
+              <v-btn small icon @click.native="deleteClient">
+                <v-icon small>delete</v-icon>
+              </v-btn>
+            </template>
+            <span>Delete Sender</span>
+          </v-tooltip>
        </v-toolbar>
        <v-card-text class="caption">
          <span>
@@ -51,15 +94,15 @@
        </v-card-text>
        <!-- <v-card-text class="caption text--lighten-3">{{client.message}}</v-card-text> -->
        <v-card-actions>
-          <v-btn :flat="!client.expired" @click.native="startUpload()" color="primary">
+          <!-- <v-btn :flat="!client.expired" @click.native="startUpload()" color="primary">
            Push
            <v-icon small right>cloud_upload</v-icon>
          </v-btn>

          <v-btn :flat="!client.expired" @click.native="showEditSender=true">
-            Edit sender
+            Edit
            <v-icon small right>edit</v-icon>
-          </v-btn>
+          </v-btn>-->

          <!-- <v-btn
            small
@@ -82,9 +125,9 @@
          <span class="caption grey--text">{{$store.state.selectionCount}} selected objects</span>

          <v-spacer></v-spacer>
-          <v-btn small flat outline icon color="error" @click.native="deleteClient">
+          <!-- <v-btn small flat outline icon color="error" @click.native="deleteClient">
            <v-icon small>delete</v-icon>
-          </v-btn>
+          </v-btn>-->
        </v-card-actions>
        <v-alert
          v-model="client.expired"
@@ -1,12 +1,13 @@
 <template>
  <v-card>
-    <v-toolbar card dark color="secondary">
+    <v-toolbar dark flat color="secondary">
      <v-btn icon dark @click="$emit('close')">
        <v-icon>close</v-icon>
      </v-btn>
      <v-toolbar-title class="text-truncate font-weight-light">Add a new receiver</v-toolbar-title>
    </v-toolbar>
-    <v-card-text class="pa-5">
+    <v-card-text>
+       <div class="ma-5">
      <v-layout row wrap align-center>
        <v-flex xs12>
          <p class="headline font-weight-light">Account</p>
@@ -67,9 +68,11 @@
        >Create Receiver</v-btn>
      </v-layout>
      <v-alert
-        value="true"
+        :value="true"
        type="info"
+        class="mt-5"
      >If the stream contains objects that cannot be converted to Revit, they will not be visible in any way.</v-alert>
+      </div>
    </v-card-text>
  </v-card>
 </template>
@@ -1,72 +1,76 @@
 <template>
  <v-card>
-    <v-toolbar card dark color="primary">
+    <v-toolbar flat dark color="primary">
      <v-btn icon dark @click="$emit('close')">
        <v-icon>close</v-icon>
      </v-btn>
      <v-toolbar-title v-if="isEdit" class="text-truncate font-weight-light">Edit sender</v-toolbar-title>
      <v-toolbar-title v-else class="text-truncate font-weight-light">Add a new sender</v-toolbar-title>
    </v-toolbar>
-    <v-card-text class="pa-5">
-      <v-layout row wrap align-center>
-        <v-flex xs12>
-          <p class="headline font-weight-light">Account</p>
-          <p class="caption">We first need to know which speckle server the data is going to go to.</p>
-          <v-overflow-btn
-            :disabled="isEdit"
-            :items="$store.state.accounts"
-            label="Account"
-            editable
-            solo
-            v-model="selectedAccount"
-            item-text="fullName"
-            return-object
-          ></v-overflow-btn>
-        </v-flex>
-      </v-layout>
-      <v-layout row wrap align-center v-if="selectedAccount">
-        <v-flex xs12>
-          <p class="headline font-weight-light">Stream Name</p>
-          <p class="caption">Something meaningful would do, like 'walls-final-final-2'.</p>
-          <v-text-field label="walls-final-final-2" single-line solo v-model="newStreamName"></v-text-field>
-        </v-flex>
-        <v-flex xs12>
-          <p class="headline font-weight-light">Objects</p>
-          <p class="caption">Finally, what do you want to send?</p>
-          <v-tabs>
-            <v-tab>Selection</v-tab>
-            <v-tab>Category</v-tab>
-            <v-tab>Family</v-tab>
-          </v-tabs>
-        </v-flex>
-      </v-layout>
-      <v-layout row wrap align-center>
-        <v-flex
-          xs12
-          class="text-xs-left"
-          v-if="!selectedAccount || !selectedAccount.validated"
-        >Could not access that server (is it online?) or no server selected.</v-flex>
-      </v-layout>
-      <br />
-      <v-layout row wrap align-center>
-        <!-- <v-spacer></v-spacer> -->
-        <v-btn
-          v-if="isEdit"
-          block
-          color="primary"
-          :ripple="false"
-          :disabled="!validated"
-          @click.native="updateSender()"
-        >Update Sender</v-btn>
-        <v-btn
-          v-else
-          block
-          color="primary"
-          :ripple="false"
-          :disabled="!validated"
-          @click.native="addSender()"
-        >Create Sender</v-btn>
-      </v-layout>
+    <v-card-text>
+      <div class="ma-5">
+        <v-layout row wrap align-center>
+          <v-flex xs12>
+            <p class="headline font-weight-light">Account</p>
+            <p
+              class="caption"
+            >We first need to know which speckle server the data is going to go to.</p>
+            <v-overflow-btn
+              :disabled="isEdit"
+              :items="$store.state.accounts"
+              label="Account"
+              editable
+              solo
+              v-model="selectedAccount"
+              item-text="fullName"
+              return-object
+            ></v-overflow-btn>
+          </v-flex>
+        </v-layout>
+        <v-layout row wrap align-center v-if="selectedAccount">
+          <v-flex xs12>
+            <p class="headline font-weight-light">Stream Name</p>
+            <p class="caption">Something meaningful would do, like 'walls-final-final-2'.</p>
+            <v-text-field label="walls-final-final-2" single-line solo v-model="newStreamName"></v-text-field>
+          </v-flex>
+          <v-flex xs12>
+            <p class="headline font-weight-light">Objects</p>
+            <p class="caption">Finally, what do you want to send?</p>
+            <v-tabs>
+              <v-tab>Selection</v-tab>
+              <v-tab>Category</v-tab>
+              <v-tab>Family</v-tab>
+            </v-tabs>
+          </v-flex>
+        </v-layout>
+        <v-layout row wrap align-center>
+          <v-flex
+            xs12
+            class="text-xs-left"
+            v-if="!selectedAccount || !selectedAccount.validated"
+          >Could not access that server (is it online?) or no server selected.</v-flex>
+        </v-layout>
+        <br />
+        <v-layout row wrap align-center>
+          <!-- <v-spacer></v-spacer> -->
+          <v-btn
+            v-if="isEdit"
+            block
+            color="primary"
+            :ripple="false"
+            :disabled="!validated"
+            @click.native="updateSender()"
+          >Update Sender</v-btn>
+          <v-btn
+            v-else
+            block
+            color="primary"
+            :ripple="false"
+            :disabled="!validated"
+            @click.native="addSender()"
+          >Create Sender</v-btn>
+        </v-layout>
+      </div>
    </v-card-text>
  </v-card>
 </template>
@@ -80,6 +84,7 @@ export default {
  },
  watch: {
    isVisible(val) {
+      console.log(this.$store.state.filters)
      if (val) {
        if (this.isEdit) {

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import './plugins/vuetify'
+import vuetify from './plugins/vuetify'
 import App from './App.vue'
 import router from './router'
 import store from './store'
@@ -35,5 +35,6 @@ window.Store = store
 window.app = new Vue( {
  router,
  store,
+  vuetify,
  render: h => h( App )
 } ).$mount( '#app' )
@@ -2,8 +2,12 @@ import Vue from 'vue'
 import Vuetify from 'vuetify'
 import 'vuetify/dist/vuetify.min.css'

-Vue.use(Vuetify, {
-    theme: {
+Vue.use(Vuetify)
+
+export default new Vuetify({
+  theme: {
+    themes: {
+      light: {
        primary: '#0080FF',
        secondary: '#26c2f2',
        accent: '#82B1FF',
@@ -11,6 +15,10 @@ Vue.use(Vuetify, {
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FFC107'
-    },
+      }
+    }
+  },
+  icons: {
    iconfont: 'md',
-})
+  }
+})