Merge branch 'ui-improvements' into 'master'

UI improvements

See merge request framasoft/mobilizon!477

js/src/App.vue

@@ -116,6 +116,8 @@ export default class App extends Vue {
 $mdi-font-path: "~@mdi/font/fonts";
 @import "~@mdi/font/scss/materialdesignicons";
 
+@import "common";
+
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 0.5s;

js/src/common.scss

@@ -0,0 +1,28 @@
+a {
+  text-decoration: underline;
+  text-decoration-color: #fea72b;
+  text-decoration-thickness: 2px;
+
+  &.navbar-item,
+  &.dropdown-item,
+  &.card,
+  &.button,
+  &[href="#comments"],
+  &.router-link-active,
+  &.comment-link,
+  &.pagination-link {
+    text-decoration: none;
+  }
+}
+
+input.input {
+  border-color: $input-border-color !important;
+}
+
+.section {
+  padding: 1rem 2rem 4rem;
+}
+
+figure img.is-rounded {
+  border: 1px solid #cdcaea;
+}

js/src/components/Account/ActorCard.vue

@@ -50,6 +50,8 @@ export default class ActorCard extends Vue {
 </style>
 
 <style lang="scss">
+@import "../../variables.scss";
+
 .tooltip {
   display: block !important;
   z-index: 10000;
@@ -135,7 +137,7 @@ export default class ActorCard extends Vue {
     $color: #f9f9f9;
 
     .popover-inner {
-      background: $color;
+      background: lighten($background-color, 65%);
       color: black;
       padding: 24px;
       border-radius: 5px;

js/src/components/Account/PopoverActorCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-popover offset="16" trigger="hover" :class="{ inline }" class="clickable">
+  <v-popover offset="16" trigger="click" :class="{ inline }" class="clickable">
     <slot></slot>
     <template slot="popover" class="popover">
       <actor-card :full="true" :actor="actor" :popover="true" />

js/src/components/Comment/Comment.vue

@@ -1,21 +1,22 @@
 <template>
   <li :class="{ reply: comment.inReplyToComment }">
     <article class="media" :class="{ selected: commentSelected }" :id="commentId">
-      <popover-actor-card :actor="comment.actor" :inline="true" v-if="comment.actor">
+      <popover-actor-card
-        <figure class="media-left" v-if="!comment.deletedAt && comment.actor.avatar">
+        class="media-left"
-          <p class="image is-48x48 is-rounded">
+        :actor="comment.actor"
-            <img :src="comment.actor.avatar.url" alt="" />
+        :inline="true"
-          </p>
+        v-if="comment.actor"
+      >
+        <figure class="image is-48x48" v-if="!comment.deletedAt && comment.actor.avatar">
+          <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
         </figure>
         <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
       </popover-actor-card>
-      <div v-else>
+      <div v-else class="media-left">
-        <figure class="media-left" v-if="!comment.deletedAt && comment.actor.avatar">
+        <figure class="image is-48x48" v-if="!comment.deletedAt && comment.actor.avatar">
-          <p class="image is-48x48 is-rounded">
+          <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
-            <img :src="comment.actor.avatar.url" alt="" />
-          </p>
         </figure>
-        <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
+        <b-icon v-else size="is-large" icon="account-circle" />
       </div>
       <div class="media-content">
         <div class="content">
@@ -325,7 +326,7 @@ form.reply {
   }
 
   strong.organizer {
-    background: $primary;
+    background: $background-color;
     border-radius: 12px;
     color: white;
     padding: 0 6px;

js/src/components/Comment/CommentTree.vue

@@ -17,7 +17,7 @@
             </p>
           </div>
           <div class="send-comment">
-            <b-button native-type="submit" type="is-info">{{ $t("Post a comment") }}</b-button>
+            <b-button native-type="submit" type="is-primary">{{ $t("Post a comment") }}</b-button>
           </div>
         </div>
       </article>

js/src/components/Editor.vue

@@ -581,7 +581,7 @@ $color-white: #eee;
       padding: 12px 6px;
 
       &:focus {
-        border-color: $primary;
+        border-color: $background-color;
         outline: none;
       }
     }

js/src/components/Event/EventCard.vue

@@ -140,6 +140,7 @@ export default class EventCard extends Vue {
 a.card {
   display: block;
   background: $secondary;
+  color: #3c376e;
 
   &:hover {
     // box-shadow: 0 0 5px 0 rgba(0, 0, 0, 1);
@@ -180,8 +181,10 @@ a.card {
       text-overflow: ellipsis;
       overflow: hidden;
       display: block;
-      font-size: 1em;
+      font-size: 0.9em;
       line-height: 1.75em;
+      background-color: #e6e4f4;
+      color: #3c376e;
     }
   }
 
@@ -198,19 +201,21 @@ a.card {
     padding: 0.5rem;
 
     .event-title {
-      font-size: 1.25rem;
+      font-size: 1.2rem;
       line-height: 1.25rem;
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
       min-height: 2.4rem;
+      font-weight: bold;
     }
 
     .event-subtitle {
       font-size: 0.85rem;
       display: inline-flex;
       flex-wrap: wrap;
+      color: #3c376e;
 
       span {
         width: 15rem;

js/src/components/Event/EventListCard.vue

@@ -310,6 +310,10 @@ article.box {
         margin-right: 16px;
       }
 
+      a {
+        text-decoration: none;
+      }
+
       .title {
         display: -webkit-box;
         -webkit-line-clamp: 1;
@@ -322,10 +326,6 @@ article.box {
         margin: auto 0;
       }
     }
-
-    /deep/ progress + .progress-value {
-      color: lighten($primary, 20%) !important;
-    }
   }
 
   .actions {
@@ -345,11 +345,15 @@ article.box {
         /deep/ span:last-child {
           padding-left: 4px;
         }
+
+        &:hover {
+          background: #f5f5f5;
+        }
       }
 
       * {
         font-size: 0.8rem;
-        color: $primary;
+        color: $background-color;
       }
     }
   }

js/src/components/Event/ParticipationTable.vue

@@ -42,10 +42,8 @@
       </b-table-column>
       <b-table-column field="actor.preferredUsername" :label="$t('Participant')" sortable>
         <article class="media">
-          <figure class="media-left" v-if="props.row.actor.avatar">
+          <figure class="media-left image is-48x48" v-if="props.row.actor.avatar">
-            <p class="image is-48x48">
+            <img class="is-rounded" :src="props.row.actor.avatar.url" alt="" />
-              <img :src="props.row.actor.avatar.url" alt="" />
-            </p>
           </figure>
           <b-icon
             class="media-left"

js/src/components/Event/ShareEventModal.vue

@@ -6,6 +6,24 @@
 
     <section class="modal-card-body is-flex" v-if="event">
       <div class="container has-text-centered">
+        <b-notification
+          type="is-warning"
+          v-if="event.visibility !== EventVisibility.PUBLIC"
+          :closable="false"
+        >
+          {{
+            $t(
+              "This event is accessible only through it's link. Be careful where you post this link."
+            )
+          }}
+        </b-notification>
+        <b-notification
+          type="is-danger"
+          v-if="event.status === EventStatus.CANCELLED"
+          :closable="false"
+        >
+          {{ $t("This event has been cancelled.") }}
+        </b-notification>
         <small class="maximumNumberOfPlacesWarning" v-if="!eventCapacityOK">
           {{ $t("All the places have already been taken") }}
         </small>
@@ -38,7 +56,7 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { IEvent } from "../../types/event.model";
+import { IEvent, EventVisibility, EventStatus } from "../../types/event.model";
 // @ts-ignore
 import DiasporaLogo from "../../assets/diaspora-icon.svg?inline";
 
@@ -50,6 +68,10 @@ import DiasporaLogo from "../../assets/diaspora-icon.svg?inline";
 export default class ShareEventModal extends Vue {
   @Prop({ type: Object, required: true }) event!: IEvent;
   @Prop({ type: Boolean, required: false, default: true }) eventCapacityOK!: boolean;
+
+  EventVisibility = EventVisibility;
+  EventStatus = EventStatus;
+
   get twitterShareUrl(): string {
     return `https://twitter.com/intent/tweet?url=${encodeURIComponent(this.event.url)}&text=${
       this.event.title

js/src/components/Logo.vue

@@ -20,7 +20,7 @@ export default class Logo extends Vue {
 @import "../variables.scss";
 
 svg {
-  fill: $primary;
+  fill: $background-color;
 
   &.invert {
     fill: $secondary;

js/src/components/NavBar.vue

@@ -19,7 +19,7 @@
         >{{ $t("My groups") }}</b-navbar-item
       >
       <b-navbar-item tag="span">
-        <b-button tag="router-link" :to="{ name: RouteName.CREATE_EVENT }" type="is-success">{{
+        <b-button tag="router-link" :to="{ name: RouteName.CREATE_EVENT }" type="is-primary">{{
           $t("Create")
         }}</b-button>
       </b-navbar-item>
@@ -220,8 +220,7 @@ export default class NavBar extends Vue {
 
 nav {
   .navbar-item {
-    a.button.is-success {
+    a.button {
-      background: #1e7d97;
       font-weight: bold;
     }
 
@@ -248,10 +247,6 @@ nav {
     img {
       max-height: 2.5em;
     }
-
-    &:hover {
-      background: whitesmoke;
-    }
   }
 
   .navbar-item.has-dropdown a.navbar-link figure {

js/src/components/Resource/FolderItem.vue

@@ -161,7 +161,7 @@ a {
       display: block;
       font-weight: 500;
       margin-bottom: 5px;
-      color: $primary;
+      color: $background-color;
       overflow: hidden;
       text-overflow: ellipsis;
       text-decoration: none;

js/src/components/Settings/SettingMenuItem.vue

@@ -33,7 +33,7 @@ export default class SettingMenuItem extends Vue {
 li.setting-menu-item {
   font-size: 1.05rem;
   background-color: #fff1de;
-  color: $primary;
+  color: $background-color;
   margin: auto;
 
   span {

js/src/components/Settings/SettingMenuSection.vue

@@ -32,7 +32,7 @@ export default class SettingMenuSection extends Vue {
 li {
   font-size: 1.3rem;
   background-color: $secondary;
-  color: $primary;
+  color: $background-color;
   margin: 2px auto;
 
   &.active {

js/src/components/Settings/SettingsMenu.vue

@@ -18,3 +18,8 @@ export default class SettingsMenu extends Vue {
   }
 }
 </script>
+<style lang="scss" scoped>
+/deep/ a {
+  text-decoration: none;
+}
+</style>

js/src/i18n/en_US.json

@@ -645,5 +645,7 @@
   "{moderator} has unsuspended profile {profile}": "{moderator} has unsuspended profile {profile}",
   "{moderator} has deleted user {user}": "{moderator} has deleted user {user}",
   "Change timezone": "Change timezone",
-  "Select a language": "Select a language"
+  "Select a language": "Select a language",
+  "This event is accessible only through it's link. Be careful where you post this link.": "This event is accessible only through it's link. Be careful where you post this link.",
+  "This event has been cancelled.": "This event has been cancelled."
 }

js/src/i18n/fr_FR.json

@@ -668,5 +668,7 @@
   "{moderator} has unsuspended profile {profile}": "{moderator} a annulé la suspension de {profile}",
   "{moderator} has deleted user {user}": "{moderator} a supprimé l'utilisateur·ice {user}",
   "Change timezone": "Changer de fuseau horaire",
-  "Select a language": "Choisissez une langue"
+  "Select a language": "Choisissez une langue",
+  "This event is accessible only through it's link. Be careful where you post this link.": "Cet événement est accessible uniquement à travers son lien. Faites attention où vous le diffusez.",
+  "This event has been cancelled.": "Cet événement a été annulé."
 }

js/src/variables.scss

@@ -1,17 +1,25 @@
 @import "~bulma/sass/utilities/_all";
 
-$primary: #424056;
+$bleuvert: #1e7d97;
+$jaune: #ffd599;
+$violet: #424056;
+
+$primary: $bleuvert;
 $primary-invert: findColorInvert($primary);
 //$secondary: #ffcc85;
-$secondary: #ffd599;
+$secondary: $jaune;
 $secondary-invert: findColorInvert($secondary);
 
+$background-color: $violet;
+
 $success: #0eccaf;
 $success-invert: findColorInvert($success);
 $info: #36bcd4;
 $info-invert: findColorInvert($info);
 $danger: #ff7061;
 $danger-invert: findColorInvert($danger);
+$link: $primary;
+$link-invert: $primary-invert;
 
 $colors: map-merge(
   $colors,
@@ -36,17 +44,21 @@ $colors: map-merge(
       $danger,
       $danger-invert,
     ),
+    "link": (
+      $link,
+      $link-invert,
+    ),
   )
 );
 
 // Navbar
 $navbar-background-color: $secondary;
-$navbar-item-color: $primary;
+$navbar-item-color: $background-color;
 $navbar-height: 4rem;
 
 // Footer
 $footer-padding: 3rem 1.5rem 1rem;
-$footer-background-color: $primary;
+$footer-background-color: $background-color;
 
 $body-background-color: #efeef4;
 $fullhd-enabled: false;
@@ -82,7 +94,6 @@ $subtitle-sup-size: 15px;
   margin: 15px auto 30px;
 }
 
-$accent: #1e7d97;
+$input-border-color: #dbdbdb;
-
+$breadcrumb-item-color: $primary;
-$breadcrumb-item-color: $accent;
 $checkbox-background-color: #fff;

js/src/views/About.vue

@@ -238,17 +238,20 @@ a:not(.button) {
   color: #111;
 }
 
-.hero.is-primary .subtitle {
+.hero.is-primary {
-  padding: 1rem;
+  background: $background-color;
-  display: block;
+  .subtitle {
+    padding: 1rem;
+    display: block;
 
-  span {
+    span {
-    color: lighten($primary, 10%);
+      color: lighten($background-color, 10%);
+    }
   }
 }
 
 .hero.register {
-  background: lighten($primary, 20%);
+  background: lighten($background-color, 20%);
 }
 
 section {

js/src/views/Account/IdentityPickerWrapper.vue

@@ -9,7 +9,7 @@
       <div class="media">
         <div class="media-left">
           <figure class="image is-48x48" v-if="currentIdentity.avatar">
-            <img class="image" :src="currentIdentity.avatar.url" alt="" />
+            <img class="image is-rounded" :src="currentIdentity.avatar.url" alt="" />
           </figure>
           <b-icon v-else size="is-large" icon="account-circle" />
         </div>
@@ -29,12 +29,9 @@
       </div>
     </div>
     <span v-else class="block" @click="isComponentModalActive = true">
-      <img
+      <figure class="image is-48x48" v-if="currentIdentity.avatar">
-        class="image is-48x48"
+        <img class="is-rounded" :src="currentIdentity.avatar.url" alt="" />
-        v-if="currentIdentity.avatar"
+      </figure>
-        :src="currentIdentity.avatar.url"
-        alt=""
-      />
       <b-icon v-else size="is-large" icon="account-circle" />
     </span>
     <b-modal :active.sync="isComponentModalActive" has-modal-card>

js/src/views/Admin/Dashboard.vue

@@ -83,9 +83,9 @@ export default class Dashboard extends Vue {
   line-height: 1.125;
 }
 
-article.tile {
+.tile a,
-  a {
+article.tile a {
-    color: #4a4a4a;
+  color: #4a4a4a;
-  }
+  text-decoration: none;
 }
 </style>

js/src/views/Admin/Follows.vue

@@ -66,10 +66,14 @@ export default class Follows extends Vue {
   relayFollowers: Paginate<IFollower> = { elements: [], total: 0 };
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .tab-item {
   form {
     margin-bottom: 1.5rem;
   }
 }
+
+a {
+  text-decoration: none !important;
+}
 </style>

js/src/views/Admin/Settings.vue

@@ -139,3 +139,13 @@ export default class Settings extends Vue {
   }
 }
 </script>
+<style lang="scss" scoped>
+@import "../../variables.scss";
+
+.notification a {
+  color: $primary !important;
+  text-decoration: underline !important;
+  text-decoration-color: #fea72b !important;
+  text-decoration-thickness: 2px !important;
+}
+</style>

js/src/views/Event/Event.vue

@@ -68,6 +68,15 @@
                   <tag>{{ tag.title }}</tag>
                 </router-link>
               </p>
+              <b-tag type="is-warning" size="is-medium" v-if="event.draft">{{ $t("Draft") }}</b-tag>
+              <span class="event-status" v-if="event.status !== EventStatus.CONFIRMED">
+                <b-tag type="is-warning" v-if="event.status === EventStatus.TENTATIVE">{{
+                  $t("Event to be confirmed")
+                }}</b-tag>
+                <b-tag type="is-danger" v-if="event.status === EventStatus.CANCELLED">{{
+                  $t("Event cancelled")
+                }}</b-tag>
+              </span>
             </div>
             <div class="column is-3-tablet">
               <div>
@@ -138,15 +147,6 @@
                 </div>
               </div>
               <div class="has-text-right">
-                <tag type="is-warning" size="is-medium" v-if="event.draft">{{ $t("Draft") }}</tag>
-                <span class="event-status" v-if="event.status !== EventStatus.CONFIRMED">
-                  <tag type="is-warning" v-if="event.status === EventStatus.TENTATIVE">{{
-                    $t("Event to be confirmed")
-                  }}</tag>
-                  <tag type="is-danger" v-if="event.status === EventStatus.CANCELLED">{{
-                    $t("Event cancelled")
-                  }}</tag>
-                </span>
                 <template class="visibility" v-if="!event.draft">
                   <p v-if="event.visibility === EventVisibility.PUBLIC">
                     {{ $t("Public event") }}
@@ -164,6 +164,7 @@
                 </template>
                 <p>
                   <router-link
+                    class="participations-link"
                     v-if="actorIsOrganizer && event.draft === false"
                     :to="{ name: RouteName.PARTICIPATIONS, params: { eventId: event.uuid } }"
                   >
@@ -224,10 +225,10 @@
                   <b-icon icon="ticket-confirmation-outline" />
                 </p>
                 <b-dropdown position="is-bottom-left" aria-role="list">
-                  <span slot="trigger" role="button">
+                  <b-button slot="trigger" role="button" icon-right="dots-horizontal">
                     Actions
-                    <b-icon icon="dots-horizontal" />
+                    <!-- <b-icon icon="dots-horizontal" /> -->
-                  </span>
+                  </b-button>
                   <b-dropdown-item
                     aria-role="listitem"
                     has-link
@@ -1022,7 +1023,7 @@ export default class Event extends EventMixin {
 @import "../../variables";
 
 .section {
-  padding: 1rem 1.5rem;
+  padding: 1rem 2rem 4rem;
 }
 
 .fade-enter-active,
@@ -1084,6 +1085,9 @@ div.sidebar {
   background: white;
 
   p.tags {
+    a {
+      text-decoration: none;
+    }
     span {
       &.tag {
         margin: 0 2px;
@@ -1229,71 +1233,6 @@ div.sidebar {
   }
 }
 
-.share {
-  border-bottom: solid 1px $primary;
-  border-top: solid 1px $primary;
-
-  .diaspora span svg {
-    height: 2rem;
-    width: 2rem;
-  }
-
-  .columns {
-    & > * {
-      padding: 2rem 0;
-    }
-
-    h3 {
-      display: block;
-      color: $primary;
-      font-size: 3rem;
-      text-decoration: underline;
-      text-decoration-color: $secondary;
-      max-width: 20rem;
-    }
-
-    .column:first-child {
-      h3 {
-        margin: 0 auto 1rem;
-        font-weight: normal;
-      }
-
-      small.maximumNumberOfPlacesWarning {
-        margin: 0 auto 1rem;
-        display: block;
-      }
-    }
-
-    .column:last-child {
-      h3 {
-        margin-right: 0;
-      }
-    }
-
-    .add-to-calendar {
-      display: flex;
-
-      h3 {
-        margin-left: 0;
-        cursor: pointer;
-      }
-
-      img {
-        max-width: 250px;
-      }
-
-      &::before {
-        content: "";
-        background: #b3b3b2;
-        position: absolute;
-        bottom: 25%;
-        height: 40%;
-        width: 1px;
-      }
-    }
-  }
-}
-
 .more-events {
   background: white;
 }
@@ -1310,4 +1249,12 @@ button.dropdown-item {
   padding-right: 1rem;
   text-align: right;
 }
+
+a.participations-link {
+  text-decoration: none;
+}
+
+.event-status .tag {
+  font-size: 1rem;
+}
 </style>

js/src/views/Event/Participants.vue

@@ -331,6 +331,12 @@ export default class Participants extends Vue {
 section {
   padding: 1rem 0;
 }
+
+/deep/ .tabs.is-boxed {
+  a {
+    text-decoration: none;
+  }
+}
 </style>
 <style lang="scss">
 nav.tabs li {

js/src/views/Home.vue

@@ -377,7 +377,6 @@ export default class Home extends Vue {
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
 @import "@/variables.scss";
 
@@ -385,10 +384,6 @@ main > div > .container {
   background: $white;
 }
 
-.section {
-  padding: 1rem 1.5rem;
-}
-
 .search-autocomplete {
   border: 1px solid #dbdbdb;
   color: rgba(0, 0, 0, 0.87);
@@ -429,7 +424,7 @@ section.hero {
   background: lighten($secondary, 20%);
 
   .title {
-    color: $primary;
+    color: $background-color;
   }
 
   .column figure.image img {

js/src/views/Moderation/Logs.vue

@@ -176,4 +176,8 @@ img.image {
   height: 1.5em;
   vertical-align: text-bottom;
 }
+
+a {
+  text-decoration: none;
+}
 </style>

js/src/views/Settings.vue

@@ -182,4 +182,7 @@ export default class Settings extends Vue {
 aside.section {
   padding-top: 1rem;
 }
+.breadcrumb ul li a {
+  text-decoration: none;
+}
 </style>

js/src/views/Settings/Notifications.vue

@@ -141,31 +141,16 @@ export default class Notifications extends Vue {
 @import "../../variables.scss";
 
 .field {
-  .b-checkbox.checkbox {
-    align-items: normal;
-
-    /deep/ & input:checked + .check {
-      background-color: $accent;
-      border-color: $accent;
-    }
-  }
   &:not(:last-child) {
     margin-bottom: 1.5rem;
   }
 
   a.change-timezone {
-    color: $accent;
+    color: $primary;
     text-decoration: underline;
     text-decoration-color: #fea72b;
     text-decoration-thickness: 2px;
     margin-left: 5px;
   }
-  // /deep/ .select select {
-  //   &:active,
-  //   &:focus {
-  //     border-color: $primary;
-  //     box-shadow: 0 0 0 0.125em rgba($primary, 0.25);
-  //   }
-  // }
 }
 </style>

lib/graphql/resolvers/user.ex

@@ -484,6 +484,9 @@ defmodule Mobilizon.GraphQL.Resolvers.User do
     with true <- current_locale != locale,
          {:ok, %User{} = updated_user} <- Users.update_user(user, %{locale: locale}) do
       {:ok, updated_user}
+    else
+      false ->
+        {:ok, user}
     end
   end
 end