Various UI stuff (mainly implement mookup)

Fix lint Disable modern mode Fixes UI fixes Fixes Ignore .po~ files Fixes Fix homepage Fixes Fixes Mix format Fix tests Fix tests (yeah…) Signed-off-by: Thomas Citharel <tcit@tcit.fr>
2019-04-03 17:29:03 +02:00
parent 2dcd65ea78
commit da2a0593ca
66 changed files with 14247 additions and 15872 deletions
--- a/js/src/components/Event/DateCalendarIcon.vue
+++ b/js/src/components/Event/DateCalendarIcon.vue
@@ -1,18 +1,18 @@
 <template>
-    <span class="container">
+    <time class="container" :datetime="dateObj.getUTCSeconds()">
        <span class="month">{{ month }}</span>
        <span class="day">{{ day }}</span>
-    </span>
+    </time>
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
-export default class DateComponent extends Vue {
+export default class DateCalendarIcon extends Vue {
  @Prop({ required: true }) date!: string;

  get dateObj() {
-      return new Date(this.$props.date);
+    return new Date(this.$props.date);
  }

  get month() {
@@ -26,22 +26,27 @@ export default class DateComponent extends Vue {
 </script>

 <style lang="scss" scoped>
-  .container {
-    display: inline-flex;
-    padding: 2px 0;
-    width: 40px;
-    background: #fff;
+  time.container {
+    background: #f6f7f8;
+    border: 1px solid rgba(46,62,72,.12);
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    /*height: 50px;*/
+    width: 48px;
+    padding: 8px;
+    text-align: center;

    span {
-      flex: 0;
-      flex-direction: column;
-      text-align: center;
+      display: block;

      &.month {
        color: #fa3e3e;
        padding: 2px 0;
        font-size: 12px;
        line-height: 12px;
+        text-transform: uppercase;
      }

      &.day {
--- a/js/src/components/Event/EventCard.vue
+++ b/js/src/components/Event/EventCard.vue
@@ -1,61 +1,124 @@
 <template>
-  <div class="card">
+  <router-link class="card" :to="{ name: 'Event', params: { uuid: event.uuid } }">
    <div class="card-image" v-if="!event.image">
      <figure class="image is-16by9">
        <img src="https://picsum.photos/g/400/225/?random">
      </figure>
    </div>
-    <div class="card-content">
-      <div class="content">
-        <router-link :to="{ name: 'Event', params:{ uuid: event.uuid } }">
-          <h2 class="title">{{ event.title }}</h2>
-        </router-link>
-        <DateComponent v-if="!options.hideDate" :date="event.beginsOn" />
-      </div>
-      <div v-if="!options.hideDetails">
-        <div v-if="event.participants.length > 0 &&
-        options.loggedPerson &&
-        event.participants[0].actor.id === options.loggedPerson.id">
-          <b-tag type="is-info"><translate>Organizer</translate></b-tag>
-        </div>
-        <div v-else-if="event.participants.length === 1">
-          <translate
-                  :translate-params="{name: event.participants[0].actor.preferredUsername}"
-          >%{name} organizes this event</translate>
-        </div>
-        <div v-else>
-          <span v-for="participant in event.participants" :key="participant.actor.uuid">
-            {{ participant.actor.preferredUsername }}
-            <span v-if="participant.role === ParticipantRole.CREATOR">(organizer)</span>,
-            <!-- <translate
-              :translate-params="{name: participant.actor.preferredUsername}"
-            >&nbsp;%{name} is in,</translate>-->
-          </span>
-        </div>
+    <div class="content">
+      <div class="title-wrapper">
+        <div class="date-component">
+          <date-calendar-icon v-if="!mergedOptions.hideDate" :date="event.beginsOn" />
+        </div>
+        <h2 class="title" ref="title">{{ event.title }}</h2>
      </div>
+      <span>
+        <span v-if="event.physicalAddress && event.physicalAddress.locality">{{ event.physicalAddress.locality }} - </span>
+        <span v-if="actorDisplayName && actorDisplayName !== '@'">{{ actorDisplayName }}</span>
+      </span>
    </div>
-  </div>
+<!--    <div v-if="!mergedOptions.hideDetails" class="details">-->
+<!--      <div v-if="event.participants.length > 0 &&-->
+<!--      mergedOptions.loggedPerson &&-->
+<!--      event.participants[0].actor.id === mergedOptions.loggedPerson.id">-->
+<!--        <b-tag type="is-info"><translate>Organizer</translate></b-tag>-->
+<!--      </div>-->
+<!--      <div v-else-if="event.participants.length === 1">-->
+<!--        <translate-->
+<!--                :translate-params="{name: event.participants[0].actor.preferredUsername}"-->
+<!--        >%{name} organizes this event</translate>-->
+<!--      </div>-->
+<!--      <div v-else>-->
+<!--        <span v-for="participant in event.participants" :key="participant.actor.uuid">-->
+<!--          {{ participant.actor.preferredUsername }}-->
+<!--          <span v-if="participant.role === ParticipantRole.CREATOR">(organizer)</span>,-->
+<!--          &lt;!&ndash; <translate-->
+<!--            :translate-params="{name: participant.actor.preferredUsername}"-->
+<!--          >&nbsp;%{name} is in,</translate>&ndash;&gt;-->
+<!--        </span>-->
+<!--      </div>-->
+    </router-link>
 </template>

 <script lang="ts">
 import { IEvent, ParticipantRole } from '@/types/event.model';
 import { Component, Prop, Vue } from 'vue-property-decorator';
-import DateComponent from '@/components/Event/Date.vue';
+import DateCalendarIcon from '@/components/Event/DateCalendarIcon.vue';
+import { IActor, IPerson, Person } from '@/types/actor.model';
+const lineClamp = require('line-clamp');
+
+export interface IEventCardOptions {
+  hideDate: boolean;
+  loggedPerson: IPerson | boolean;
+  hideDetails: boolean;
+  organizerActor: IActor | null;
+}

@Component({
  components: {
-    DateComponent,
+    DateCalendarIcon,
    EventCard,
  },
+  mounted() {
+    lineClamp(this.$refs.title, 3);
+  },
 })
 export default class EventCard extends Vue {
  @Prop({ required: true }) event!: IEvent;
-  @Prop({ default() { return { hideDate: false, loggedPerson: false, hideDetails: false }; } }) options!: object;
+  @Prop({ required: false }) options!: IEventCardOptions;

-  data() {
-    return {
-      ParticipantRole,
-    };
+  ParticipantRole = ParticipantRole;
+
+  defaultOptions: IEventCardOptions = {
+    hideDate: false,
+    loggedPerson: false,
+    hideDetails: false,
+    organizerActor: null,
+  };
+
+  get mergedOptions(): IEventCardOptions {
+    return { ...this.defaultOptions, ...this.options };
  }
+
+  get actorDisplayName() {
+    const actor = Object.assign(new Person(), this.event.organizerActor || this.mergedOptions.organizerActor);
+    return actor.displayName();
+  }
+
 }
 </script>
+
+<style lang="scss">
+  @import "../../variables";
+
+  a.card {
+    border: none;
+    background: $secondary;
+
+    div.card-image {
+      background: $secondary;
+    }
+
+    div.content {
+      padding: 5px;
+      background: $secondary;
+
+      div.title-wrapper {
+        display: flex;
+
+        div.date-component {
+          flex: 0;
+          margin-right: 16px;
+        }
+
+        .title {
+          font-weight: 400;
+          line-height: 1em;
+          font-size: 1.6em;
+          padding-bottom: 5px;
+        }
+      }
+    }
+  }
+
+</style>
--- a/js/src/components/Event/EventFullDate.vue
+++ b/js/src/components/Event/EventFullDate.vue
@@ -0,0 +1,36 @@
+<template>
+    <translate
+            v-if="!endsOn"
+           :translate-params="{date: formatDate(beginsOn), time: formatTime(beginsOn)}"
+    >The %{ date } at %{ time }</translate>
+    <translate
+            v-else-if="isSameDay()"
+            :translate-params="{date: formatDate(beginsOn), startTime: formatTime(beginsOn), endTime: formatTime(endsOn)}"
+    >The %{ date } from %{ startTime } to %{ endTime }</translate>
+    <translate
+            v-else-if="endsOn"
+            :translate-params="{startDate: formatDate(beginsOn), startTime: formatTime(beginsOn), endDate: formatDate(endsOn), endTime: formatTime(endsOn)}"
+    >From the %{ startDate } at %{ startTime } to the %{ endDate } at %{ endTime }</translate>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component
+export default class EventFullDate extends Vue {
+  @Prop({ required: true }) beginsOn!: string;
+  @Prop({ required: false }) endsOn!: string;
+
+  formatDate(value) {
+    return value ? new Date(value).toLocaleString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) : null;
+  }
+
+  formatTime(value) {
+    return value ? new Date(value).toLocaleTimeString(undefined, { hour: 'numeric', minute: 'numeric' }) : null;
+  }
+
+  isSameDay() {
+    const sameDay = ((new Date(this.beginsOn)).toDateString()) === ((new Date(this.endsOn)).toDateString());
+    return this.endsOn && sameDay;
+  }
+}
+</script>
--- a/js/src/components/Footer.vue
+++ b/js/src/components/Footer.vue
@@ -0,0 +1,60 @@
+<template>
+    <footer class="footer">
+        <mobilizon-logo :invert="true" class="logo" />
+        <img src="../assets/footer.png" :alt="$gettext('World map')" />
+        <ul>
+            <li><router-link :to="{ name: 'About'}"><translate>About</translate></router-link></li>
+            <li><router-link :to="{ name: 'Licence'}"><translate>License</translate></router-link></li>
+            <li><router-link :to="{ name: 'Legal'}"><translate>Legal</translate></router-link></li>
+        </ul>
+        <div class="content has-text-centered">
+            <span
+                    v-translate="{
+            date: new Date().getFullYear(),
+            }"
+            >© The Mobilizon Contributors %{date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks</span>
+        </div>
+    </footer>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import Logo from './Logo.vue';
+
+@Component({
+  components: {
+    'mobilizon-logo': Logo,
+  },
+})
+export default class Footer extends Vue {
+}
+</script>
+<style lang="scss" scoped>
+    @import "../variables.scss";
+
+    footer.footer {
+        color: $secondary;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .logo {
+            flex: 1;
+        }
+
+        div.content {
+            flex: 1;
+        }
+
+        ul li {
+            display: inline-flex;
+            margin: auto 5px;
+
+            a {
+                color: #eee;
+                font-size: 1.5rem;
+                text-decoration: underline;
+                text-decoration-color: $secondary;
+            }
+        }
+    }
+</style>
--- a/js/src/components/Group/GroupCard.vue
+++ b/js/src/components/Group/GroupCard.vue
@@ -7,11 +7,11 @@
    </div>
    <div class="card-content">
      <div class="content">
-        <router-link :to="{ name: 'Group', params:{ uuid: group.uuid } }">
-          <h2 class="title">{{ group.name ? group.name : group.preferredUsername }}</h2>
+        <router-link :to="{ name: RouteName.GROUP, params:{ preferredUsername: group.preferredUsername } }">
+          <h2 class="title">{{ group.displayName() }}</h2>
        </router-link>
      </div>
-      <div v-if="!hideDetails">
+      <div>
        <p>{{ group.summary }}</p>
      </div>
    </div>
@@ -20,11 +20,13 @@

 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
-import { IGroup } from '../../types/actor.model';
+import { Group } from '@/types/actor.model';
+import { RouteName } from '@/router';

@Component
 export default class GroupCard extends Vue {
-  @Prop({ required: true }) group!: IGroup;
-  @Prop({ default: false }) hideDetails!: boolean;
+  @Prop({ required: true }) group!: Group;
+
+  RouteName = RouteName;
 }
 </script>
--- a/js/src/components/Logo.vue
+++ b/js/src/components/Logo.vue
@@ -0,0 +1,32 @@
+<template>
+    <span class="logo" v-bind:class="{ invert }">M<span class="accent">o</span>b<span class="accent">ı</span>l<span class="accent">ı</span>z<span class="accent">o</span>n</span>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component
+export default class Logo extends Vue {
+  @Prop({ type: Boolean, required: false, default: false }) invert!: boolean;
+}
+</script>
+<style lang="scss" scoped>
+    @import "../variables.scss";
+    @import "~typeface-signika/index.css";
+
+    .logo {
+        font-size: 3.5em;
+        color: $primary;
+        font-weight: 400;
+        font-family: Signika,serif;
+
+        &.invert {
+            color: $secondary;
+        }
+
+        span.accent::after {
+            content: "̇"; // U+0307
+            color: #fff;
+        }
+    }
+</style>
--- a/js/src/components/Map.vue
+++ b/js/src/components/Map.vue
@@ -1,8 +1,9 @@
 <template>
-    <div style="height: 100%; width: 100%">
+    <div class="map-container">
        <l-map
-                :zoom="16"
-                style="height: 80%; width: 100%"
+                :zoom="mergedOptions.zoom"
+                :style="`height: ${mergedOptions.height}; width: ${mergedOptions.width}`"
+                class="leaflet-map"
                :center="[lat, lon]"
        >
            <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>
@@ -22,9 +23,16 @@ import { LMap, LTileLayer, LMarker, LPopup } from 'vue2-leaflet';
@Component({
  components: { LTileLayer, LMap, LMarker, LPopup },
 })
-export default class Event extends Vue {
+export default class Map extends Vue {
  @Prop({ type: String, required: true }) coords!: string;
  @Prop({ type: String, required: false }) popup!: string;
+  @Prop({ type: Object, required: false }) options!: object;
+
+  defaultOptions: object = {
+    zoom: 15,
+    height: '100%',
+    width: '100%',
+  };

  mounted() {
    // this part resolve an issue where the markers would not appear
@@ -38,7 +46,21 @@ export default class Event extends Vue {
    });
  }

+  get mergedOptions(): object {
+    return { ...this.defaultOptions, ...this.options };
+  }
+
  get lat() { return this.$props.coords.split(';')[0]; }
  get lon() { return this.$props.coords.split(';')[1]; }
 }
 </script>
+<style lang="scss" scoped>
+    div.map-container {
+        height: 100%;
+        width: 100%;
+
+        .leaflet-map {
+            z-index: 20;
+        }
+    }
+</style>
--- a/js/src/components/NavBar.vue
+++ b/js/src/components/NavBar.vue
@@ -1,43 +1,56 @@
 <template>
  <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>
+    <div class="container">
+      <div class="navbar-brand">
+        <router-link class="navbar-item" :to="{ name: 'Home' }"><logo /></router-link>

-      <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.isLoggedIn && config && config.registrationsOpen" :to="{ name: 'Register' }">
-            <strong>
-              <translate>Sign up</translate>
-            </strong>
-          </router-link>
-          <router-link class="button is-light" v-if="!currentUser.isLoggedIn" :to="{ name: 'Login' }">
-            <translate>Log in</translate>
-          </router-link>
-          <router-link
-            class="button is-light"
-            v-if="currentUser.isLoggedIn && loggedPerson"
-            :to="{ name: 'Profile', params: { name: loggedPerson.preferredUsername} }"
-          >
-            <figure class="image is-24x24">
-              <img :src="loggedPerson.avatarUrl">
-            </figure>
-            <span>{{ loggedPerson.preferredUsername }}</span>
-          </router-link>
+        <a
+          role="button"
+          class="navbar-burger burger"
+          aria-label="menu"
+          aria-expanded="false"
+          data-target="navbarBasicExample"
+          @click="showNavbar = !showNavbar" :class="{ 'is-active': showNavbar }"
+        >
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+        </a>
+      </div>
+      <div class="navbar-menu" :class="{ 'is-active': showNavbar }">
+        <div class="navbar-end">
+          <div class="navbar-item">
+            <search-field />
+          </div>
+          <div class="navbar-item" v-if="!currentUser.isLoggedIn">
+            <div class="buttons">
+              <router-link class="button is-primary" v-if="config && config.registrationsOpen" :to="{ name: 'Register' }">
+                <strong>
+                  <translate>Sign up</translate>
+                </strong>
+              </router-link>
+              <router-link class="button is-primary" :to="{ name: 'Login' }">
+                <translate>Log in</translate>
+              </router-link>
+            </div>
+          </div>
+          <div class="navbar-item has-dropdown is-hoverable" v-else>
+              <router-link
+                      class="navbar-link"
+                      v-if="currentUser.isLoggedIn && loggedPerson"
+                      :to="{ name: 'Profile', params: { name: loggedPerson.preferredUsername} }"
+              >
+                <figure class="image is-24x24">
+                  <img :src="loggedPerson.avatarUrl">
+                </figure>
+                <span>{{ loggedPerson.preferredUsername }}</span>
+              </router-link>

-          <span v-if="currentUser.isLoggedIn" class="button" v-on:click="logout()">Log out</span>
+            <div class="navbar-dropdown">
+              <a class="navbar-item"><translate>My account</translate></a>
+              <a class="navbar-item" v-on:click="logout()"><translate>Log out</translate></a>
+            </div>
+          </div>
        </div>
      </div>
    </div>
@@ -46,30 +59,19 @@

 <script lang="ts">
 import { Component, Vue, Watch } from 'vue-property-decorator';
-import { SEARCH } from '@/graphql/search';
 import { CURRENT_USER_CLIENT, UPDATE_CURRENT_USER_CLIENT } from '@/graphql/user';
 import { onLogout } from '@/vue-apollo';
 import { deleteUserData } from '@/utils/auth';
 import { LOGGED_PERSON } from '@/graphql/actor';
-import { IActor, IPerson } from '@/types/actor.model';
-import { RouteName } from '@/router';
+import { IPerson } from '@/types/actor.model';
 import { CONFIG } from '@/graphql/config';
 import { IConfig } from '@/types/config.model';
-import { ICurrentUser } from '@/types/current-user.model'
+import { ICurrentUser } from '@/types/current-user.model';
+import Logo from '@/components/Logo.vue';
+import SearchField from '@/components/SearchField.vue';

@Component({
  apollo: {
-    search: {
-      query: SEARCH,
-      variables() {
-        return {
-          searchText: this.searchText,
-        };
-      },
-      skip() {
-        return !this.searchText;
-      },
-    },
    currentUser: {
      query: CURRENT_USER_CLIENT,
    },
@@ -77,35 +79,20 @@ import { ICurrentUser } from '@/types/current-user.model'
      query: CONFIG,
    },
  },
+  components: {
+    Logo,
+    SearchField,
+  },
 })
 export default class NavBar extends Vue {
  notifications = [
    { header: 'Coucou' },
    { title: "T'as une notification", subtitle: 'Et elle est cool' },
  ];
-  model = null;
-  search: any[] = [];
-  searchText: string | null = null;
-  searchSelect = null;
  loggedPerson: IPerson | null = null;
  config!: IConfig;
  currentUser!: ICurrentUser;
-
-  get items() {
-    return this.search.map(searchEntry => {
-      switch (searchEntry.__typename) {
-        case 'Actor':
-          searchEntry.label =
-            searchEntry.preferredUsername +
-            (searchEntry.domain === null ? '' : `@${searchEntry.domain}`);
-          break;
-        case 'Event':
-          searchEntry.label = searchEntry.title;
-          break;
-      }
-      return searchEntry;
-    });
-  }
+  showNavbar: boolean = false;

  @Watch('currentUser')
  async onCurrentUserChanged() {
@@ -121,34 +108,6 @@ export default class NavBar extends Vue {
    }
  }

-  @Watch('model')
-  onModelChanged(val) {
-    switch (val.__typename) {
-      case 'Event':
-        this.$router.push({ name: RouteName.EVENT, params: { uuid: val.uuid } });
-        break;
-
-      case 'Actor':
-        this.$router.push({
-          name: RouteName.PROFILE,
-          params: { name: this.usernameWithDomain(val) },
-        });
-        break;
-    }
-  }
-
-  usernameWithDomain(actor: IActor) {
-    return (
-      actor.preferredUsername +
-      (actor.domain === null ? '' : `@${actor.domain}`)
-    );
-  }
-
-  enter() {
-    console.log('enter');
-    this.$apollo.queries['search'].refetch();
-  }
-
  async logout() {
    await this.$apollo.mutate({
      mutation: UPDATE_CURRENT_USER_CLIENT,
@@ -161,9 +120,16 @@ export default class NavBar extends Vue {

    deleteUserData();

-    onLogout(this.$apollo)
+    onLogout(this.$apollo);

-    return this.$router.push({ path: '/' })
+    return this.$router.push({ path: '/' });
  }
 }
 </script>
+<style lang="scss" scoped>
+  @import "../variables.scss";
+
+  nav {
+    border-bottom: solid 1px #0a0a0a;
+  }
+</style>
--- a/js/src/components/SearchField.vue
+++ b/js/src/components/SearchField.vue
@@ -0,0 +1,22 @@
+<template>
+    <b-input icon="magnify" type="search" rounded :placeholder="defaultPlaceHolder" v-model="searchText" @keyup.native.enter="enter" />
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { RouteName } from '@/router';
+
+@Component
+export default class SearchField extends Vue {
+  @Prop({ type: String, required: false }) placeholder!: string;
+  searchText: string = '';
+
+  enter() {
+    this.$router.push({ name: RouteName.SEARCH, params: { searchTerm: this.searchText } });
+  }
+
+  get defaultPlaceHolder(): string {
+      // We can't use "this" inside @Prop's default value.
+    return this.placeholder || this.$gettext('Search');
+  }
+}
+</script>