Replace Vuetify with Bulma

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

Remove vuetify and add Bulma

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/NavBar.vue

@@ -1,110 +1,56 @@
 <template>
-  <v-toolbar
-    class="blue darken-3"
-    dark
-    app
-    :clipped-left="$vuetify.breakpoint.lgAndUp"
-    fixed
-  >
-    <v-toolbar-title style="width: 300px" class="ml-0 pl-3 white--text">
-      <v-toolbar-side-icon @click.stop="toggleDrawer()"></v-toolbar-side-icon>
-      <router-link :to="{ name: 'Home' }" class="hidden-sm-and-down white--text">Mobilizon
-      </router-link>
-    </v-toolbar-title>
-    <v-autocomplete
-      :loading="$apollo.loading"
-      flat
-      solo-inverted
-      prepend-icon="search"
-      :label="$gettext('Search')"
-      required
-      item-text="label"
-      class="hidden-sm-and-down"
-      :items="items"
-      :search-input.sync="searchText"
-      @keyup.enter="enter"
-      v-model="model"
-      return-object
-    >
-      <template slot="item" slot-scope="data">
-        <!-- <div>{{ data }}</div> -->
-        <v-list-tile v-if="data.item.__typename === 'Event'">
-          <v-list-tile-avatar>
-            <v-icon>event</v-icon>
-          </v-list-tile-avatar>
-          <v-list-tile-content v-text="data.item.label"></v-list-tile-content>
-        </v-list-tile>
-        <v-list-tile v-else-if="data.item.__typename === 'Actor'">
-          <v-list-tile-avatar>
-            <img :src="data.item.avatarUrl" v-if="data.item.avatarUrl">
-            <v-icon v-else>account_circle</v-icon>
-          </v-list-tile-avatar>
-          <v-list-tile-content>
-            <v-list-tile-title v-html="username_with_domain(data.item)"></v-list-tile-title>
-          </v-list-tile-content>
-        </v-list-tile>
-      </template>
-    </v-autocomplete>
-    <v-spacer></v-spacer>
+  <nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
+    <div class="navbar-brand">
+      <router-link class="navbar-item" :to="{ name: 'Home' }">Mobilizon</router-link>
 
-    <span v-if="currentUser.id" @click="logout()">Logout</span>
-
-    <v-menu
-      offset-y
-      :close-on-content-click="false"
-      :nudge-width="200"
-      v-model="notificationMenu"
-      v-if="currentUser.id"
-    >
-      <v-btn icon slot="activator">
-        <v-badge left color="red">
-          <span slot="badge">{{ notifications.length }}</span>
-          <v-icon>notifications</v-icon>
-        </v-badge>
-      </v-btn>
-      <v-card>
-        <v-list two-line>
-          <template v-for="item in notifications">
-            <v-subheader v-if="item.header" v-text="item.header" v-bind:key="item.header"></v-subheader>
-            <v-divider v-else-if="item.divider" v-bind:inset="item.inset" v-bind:key="item.inset"></v-divider>
-            <v-list-tile avatar v-else v-bind:key="item.title">
-              <v-list-tile-content>
-                <v-list-tile-title v-html="item.title"></v-list-tile-title>
-                <v-list-tile-sub-title v-html="item.subtitle"></v-list-tile-sub-title>
-              </v-list-tile-content>
-            </v-list-tile>
-          </template>
-        </v-list>
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn flat @click="notificationMenu = false">
-            <translate>Close</translate>
-          </v-btn>
-          <v-btn color="primary" flat @click="notificationMenu = false">
-            <translate>Save</translate>
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-menu>
-    <v-btn v-if="!currentUser.id" :to="{ name: 'Login' }">
-      <translate>Login</translate>
-    </v-btn>
-  </v-toolbar>
+      <a
+        role="button"
+        class="navbar-burger burger"
+        aria-label="menu"
+        aria-expanded="false"
+        data-target="navbarBasicExample"
+      >
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
+    </div>
+    <div class="navbar-end">
+      <div class="navbar-item">
+        <div class="buttons">
+          <router-link class="button is-primary" v-if="!currentUser.id" :to="{ name: 'Register' }">
+            <strong>
+              <translate>Sign up</translate>
+            </strong>
+          </router-link>
+          <router-link class="button is-light" v-if="!currentUser.id" :to="{ name: 'Login' }">
+            <translate>Log in</translate>
+          </router-link>
+          <router-link
+            class="button is-light"
+            v-if="currentUser.id"
+            :to="{ name: 'Profile', params: { name: loggedPerson.preferredUsername} }"
+          >
+            <figure class="image is-24x24">
+              <img :src="loggedPerson.avatarUrl">
+            </figure>
+            <span>{{ loggedPerson.preferredUsername }}</span>
+          </router-link>
+        </div>
+      </div>
+    </div>
+  </nav>
 </template>
 
-<style>
-  nav.v-toolbar .v-input__slot {
-    margin-bottom: 0;
-  }
-</style>
-
 <script lang="ts">
-  import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
-  import { AUTH_USER_ACTOR } from '@/constants';
-  import { SEARCH } from '@/graphql/search';
-  import { CURRENT_USER_CLIENT } from '@/graphql/user';
-  import { onLogout } from '@/vue-apollo';
-  import { deleteUserData } from '@/utils/auth';
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import { AUTH_USER_ACTOR } from '@/constants';
+import { SEARCH } from '@/graphql/search';
+import { CURRENT_USER_CLIENT } from '@/graphql/user';
+import { onLogout } from '@/vue-apollo';
+import { deleteUserData } from '@/utils/auth';
+import { LOGGED_PERSON } from "@/graphql/actor";
+import { IPerson } from "../types/actor.model";
 
   @Component({
   apollo: {
@@ -121,30 +67,32 @@
     },
     currentUser: {
       query: CURRENT_USER_CLIENT
+    },
+    loggedPerson: {
+      query: LOGGED_PERSON
     }
   },
 })
 export default class NavBar extends Vue {
-  @Prop({ required: true, type: Function }) toggleDrawer!: Function;
-
-  notificationMenu = false;
   notifications = [
-    { header: 'Coucou' },
-    { title: 'T\'as une notification', subtitle: 'Et elle est cool' },
+    { header: "Coucou" },
+    { title: "T'as une notification", subtitle: "Et elle est cool" }
   ];
   model = null;
   search: any[] = [];
   searchText: string | null = null;
   searchSelect = null;
-  actor = localStorage.getItem(AUTH_USER_ACTOR);
+  loggedPerson!: IPerson;
 
   get items() {
     return this.search.map(searchEntry => {
       switch (searchEntry.__typename) {
-        case 'Actor':
-          searchEntry.label = searchEntry.preferredUsername + (searchEntry.domain === null ? '' : `@${searchEntry.domain}`);
+        case "Actor":
+          searchEntry.label =
+            searchEntry.preferredUsername +
+            (searchEntry.domain === null ? "" : `@${searchEntry.domain}`);
           break;
-        case 'Event':
+        case "Event":
           searchEntry.label = searchEntry.title;
           break;
       }
@@ -152,25 +100,31 @@ export default class NavBar extends Vue {
     });
   }
 
-  @Watch('model')
+  @Watch("model")
   onModelChanged(val) {
     switch (val.__typename) {
-      case 'Event':
-        this.$router.push({ name: 'Event', params: { uuid: val.uuid } });
+      case "Event":
+        this.$router.push({ name: "Event", params: { uuid: val.uuid } });
         break;
-      case 'Actor':
-        this.$router.push({ name: 'Account', params: { name: this.username_with_domain(val) } });
+      case "Actor":
+        this.$router.push({
+          name: "Profile",
+          params: { name: this.username_with_domain(val) }
+        });
         break;
     }
   }
 
   username_with_domain(actor) {
-    return actor.preferredUsername + (actor.domain === null ? '' : `@${actor.domain}`);
+    return (
+      actor.preferredUsername +
+      (actor.domain === null ? "" : `@${actor.domain}`)
+    );
   }
 
   enter() {
-    console.log('enter');
-    this.$apollo.queries['search'].refetch();
+    console.log("enter");
+    this.$apollo.queries["search"].refetch();
   }
 
   logout() {