Merge remote-tracking branch 'upstream/develop' into masto-register-app-secret

* upstream/develop:
  Apply suggestion to src/services/entity_normalizer/entity_normalizer.service.js
  i18n/Update Japanese translation
  render modal at the root level using portal
  install portal vue
  Small improve of the who to follow panel layout
  Fix/Small fix in the who to follow page
  remove console spam
  i18n
  wire up user.description with masto api data
  i18n/Add Japanese with kanji (2)
  move drowdown menu to popper
  notification controls: redesign entirely
  entity normalizer: collapse data.pleroma if blocks
  wire up notification settings
  do not miss statusnet_profile_url of mentions
  Translation to Hebrew of everything other than theme_helpers and style.
  Translate up to settings.
  mastoapi login works

12 files changed, 153 insertions, 83 deletions

diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
index 7621fb20..3da543de 100644
--- a/src/components/dialog_modal/dialog_modal.vue
+++ b/src/components/dialog_modal/dialog_modal.vue
@@ -62,6 +62,7 @@
 
     .title {
       margin-bottom: 0;
+      text-align: center;
     }
   }
 
@@ -80,6 +81,7 @@
     background-color: var(--lightBg, $fallback--lightBg);
     border-top: 1px solid $fallback--bg;
     border-top: 1px solid var(--bg, $fallback--bg);
+    display: flex;
     justify-content: flex-end;
 
     button {
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index ef11138d..a761d313 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -13,7 +13,7 @@
     }"
   >
     <div class="popper-wrapper">
-      <div class="dropdown-menu"> 
+      <div class="dropdown-menu">
         <button class="dropdown-item dropdown-item-icon" @click.prevent="pinStatus" v-if="!status.pinned && canPin">
           <i class="icon-pin"></i><span>{{$t("status.pin")}}</span>
         </button>
@@ -35,6 +35,7 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../popper/popper.scss';
 
 .icon-ellipsis {
   cursor: pointer;
diff --git a/src/components/interactions/interactions.vue b/src/components/interactions/interactions.vue
index 5a204ca7..38b2670d 100644
--- a/src/components/interactions/interactions.vue
+++ b/src/components/interactions/interactions.vue
@@ -2,7 +2,7 @@
   <div class="panel panel-default">
     <div class="panel-heading">
       <div class="title">
-        Interactions
+        {{ $t("nav.interactions") }}
       </div>
     </div>
     <tab-switcher
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index 3f58af2c..9f7877c6 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -26,7 +26,7 @@
       },
 
       languageNames () {
-        return _.map(this.languageCodes, ISO6391.getName)
+        return _.map(this.languageCodes, this.getLanguageName)
       },
 
       language: {
@@ -36,6 +36,17 @@
           this.$i18n.locale = val
         }
       }
+    },
+
+    methods: {
+      getLanguageName (code) {
+        const specialLanguageNames = {
+          'ja': 'Japanese (やさしいにほんご)',
+          'ja_pedantic': 'Japanese (日本語)',
+          'zh': 'Chinese (简体中文)'
+        }
+        return specialLanguageNames[code] || ISO6391.getName(code)
+      }
     }
   }
 </script>
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 90707ce7..dcac440a 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -29,7 +29,7 @@
         </a>
       </div>
       <div class="mobile-notifications" @scroll="onScroll">
-        <Notifications ref="notifications" noHeading="true"/>
+        <Notifications ref="notifications" :noHeading="true"/>
       </div>
     </div>
     <SideDrawer ref="sideDrawer" :logout="logout"/>
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index c9e3fc78..6a5e8cc0 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -65,18 +65,20 @@
       {{ $t('user_card.admin_menu.moderation') }}
     </button>
   </Popper>
-  <DialogModal v-if="showDeleteUserDialog" :onCancel='deleteUserDialog.bind(this, false)'>
-    <span slot="header">{{ $t('user_card.admin_menu.delete_user') }}</span>
-    <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
-    <span slot="footer">
-      <button @click='deleteUserDialog(false)'>
-        {{ $t('general.cancel') }}
-      </button>
-      <button class="danger" @click='deleteUser()'>
-        {{ $t('user_card.admin_menu.delete_user') }}
-      </button>
-    </span>
-  </DialogModal>
+  <portal to="modal">
+    <DialogModal v-if="showDeleteUserDialog" :onCancel='deleteUserDialog.bind(this, false)'>
+      <template slot="header">{{ $t('user_card.admin_menu.delete_user') }}</template>
+      <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
+      <template slot="footer">
+        <button class="btn btn-default" @click='deleteUserDialog(false)'>
+          {{ $t('general.cancel') }}
+        </button>
+        <button class="btn btn-default danger" @click='deleteUser()'>
+          {{ $t('user_card.admin_menu.delete_user') }}
+        </button>
+      </template>
+    </DialogModal>
+  </portal>
 </div>
 </template>
 
@@ -86,64 +88,6 @@
 @import '../../_variables.scss';
 @import '../popper/popper.scss';
 
-.dropdown-menu {
-  display: block;
-  padding: .5rem 0;
-  font-size: 1rem;
-  text-align: left;
-  list-style: none;
-  max-width: 100vw;
-  z-index: 10;
-  box-shadow: 1px 1px 4px rgba(0,0,0,.6);
-  box-shadow: var(--panelShadow);
-  border: none;
-  border-radius: $fallback--btnRadius;
-  border-radius: var(--btnRadius, $fallback--btnRadius);
-  background-color: $fallback--bg;
-  background-color: var(--bg, $fallback--bg);
-
-  .dropdown-divider {
-    height: 0;
-    margin: .5rem 0;
-    overflow: hidden;
-    border-top: 1px solid $fallback--border;
-    border-top: 1px solid var(--border, $fallback--border);
-  }
-
-  .dropdown-item {
-    line-height: 21px;
-    margin-right: 5px;
-    overflow: auto;
-    display: block;
-    padding: .25rem 1.0rem .25rem 1.5rem;
-    clear: both;
-    font-weight: 400;
-    text-align: inherit;
-    white-space: normal;
-    border: none;
-    border-radius: 0px;
-    background-color: transparent;
-    box-shadow: none;
-    width: 100%;
-    height: 100%;
-
-    &-icon {
-      padding-left: 0.5rem;
-
-      i {
-        margin-right: 0.25rem;
-      }
-    }
-
-    &:hover {
-      // TODO: improve the look on breeze themes
-      background-color: $fallback--fg;
-      background-color: var(--btn, $fallback--fg);
-      box-shadow: none;
-    }
-  }
-}
-
 .menu-checkbox {
   float: right;
   min-width: 22px;
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 8c97eb04..6c4054fd 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -35,7 +35,6 @@ const Notifications = {
       return unseenNotificationsFromStore(this.$store)
     },
     visibleNotifications () {
-      console.log(this.filterMode)
       return visibleNotificationsFromStore(this.$store, this.filterMode)
     },
     unseenCount () {
diff --git a/src/components/popper/popper.scss b/src/components/popper/popper.scss
index 0c30d625..cfc5c8e7 100644
--- a/src/components/popper/popper.scss
+++ b/src/components/popper/popper.scss
@@ -68,3 +68,60 @@
   margin-right: 0;
 }
 
+.dropdown-menu {
+  display: block;
+  padding: .5rem 0;
+  font-size: 1rem;
+  text-align: left;
+  list-style: none;
+  max-width: 100vw;
+  z-index: 10;
+  box-shadow: 1px 1px 4px rgba(0,0,0,.6);
+  box-shadow: var(--panelShadow);
+  border: none;
+  border-radius: $fallback--btnRadius;
+  border-radius: var(--btnRadius, $fallback--btnRadius);
+  background-color: $fallback--bg;
+  background-color: var(--bg, $fallback--bg);
+
+  .dropdown-divider {
+    height: 0;
+    margin: .5rem 0;
+    overflow: hidden;
+    border-top: 1px solid $fallback--border;
+    border-top: 1px solid var(--border, $fallback--border);
+  }
+
+  .dropdown-item {
+    line-height: 21px;
+    margin-right: 5px;
+    overflow: auto;
+    display: block;
+    padding: .25rem 1.0rem .25rem 1.5rem;
+    clear: both;
+    font-weight: 400;
+    text-align: inherit;
+    white-space: normal;
+    border: none;
+    border-radius: 0px;
+    background-color: transparent;
+    box-shadow: none;
+    width: 100%;
+    height: 100%;
+
+    &-icon {
+      padding-left: 0.5rem;
+
+      i {
+        margin-right: 0.25rem;
+      }
+    }
+
+    &:hover {
+      // TODO: improve the look on breeze themes
+      background-color: $fallback--fg;
+      background-color: var(--btn, $fallback--fg);
+      box-shadow: none;
+    }
+  }
+}
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 2418450c..ae36e5e8 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -55,7 +55,8 @@ const UserSettings = {
       changePasswordInputs: [ '', '', '' ],
       changedPassword: false,
       changePasswordError: false,
-      activeTab: 'profile'
+      activeTab: 'profile',
+      notificationSettings: this.$store.state.users.currentUser.notification_settings
     }
   },
   created () {
@@ -128,6 +129,10 @@ const UserSettings = {
             this.$store.commit('setCurrentUser', user)
           })
     },
+    updateNotificationSettings () {
+      this.$store.state.api.backendInteractor
+        .updateNotificationSettings({ settings: this.notificationSettings })
+    },
     changeVis (visibility) {
       this.newDefaultScope = visibility
     },
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 2cb8b37a..15a5428c 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -44,6 +44,7 @@
                 <scope-selector
                   :showAll="true"
                   :userDefault="newDefaultScope"
+                  :initialScope="newDefaultScope"
                   :onScopeChange="changeVis"/>
               </div>
             </div>
@@ -167,6 +168,43 @@
           </div>
         </div>
 
+        <div :label="$t('settings.notifications')" v-if="pleromaBackend">
+          <div class="setting-item">
+            <div class="select-multiple">
+              <span class="label">{{$t('settings.notification_setting')}}</span>
+              <ul class="option-list">
+                <li>
+                  <input type="checkbox" id="notification-setting-follows" v-model="notificationSettings.follows">
+                  <label for="notification-setting-follows">
+                  {{$t('settings.notification_setting_follows')}}
+                  </label>
+                </li>
+                <li>
+                  <input type="checkbox" id="notification-setting-followers" v-model="notificationSettings.followers">
+                  <label for="notification-setting-followers">
+                  {{$t('settings.notification_setting_followers')}}
+                  </label>
+                </li>
+                <li>
+                  <input type="checkbox" id="notification-setting-non-follows" v-model="notificationSettings.non_follows">
+                  <label for="notification-setting-non-follows">
+                  {{$t('settings.notification_setting_non_follows')}}
+                  </label>
+                </li>
+                <li>
+                  <input type="checkbox" id="notification-setting-non-followers" v-model="notificationSettings.non_followers">
+                  <label for="notification-setting-non-followers">
+                  {{$t('settings.notification_setting_non_followers')}}
+                  </label>
+                </li>
+              </ul>
+            </div>
+            <p>{{$t('settings.notification_mutes')}}</p>
+            <p>{{$t('settings.notification_blocks')}}</p>
+            <button class="btn btn-default" @click="updateNotificationSettings">{{$t('general.submit')}}</button>
+          </div>
+        </div>
+
         <div :label="$t('settings.data_import_export_tab')" v-if="pleromaBackend">
           <div class="setting-item">
             <h2>{{$t('settings.follow_import')}}</h2>
diff --git a/src/components/who_to_follow/who_to_follow.js b/src/components/who_to_follow/who_to_follow.js
index be0b8827..7ae602a2 100644
--- a/src/components/who_to_follow/who_to_follow.js
+++ b/src/components/who_to_follow/who_to_follow.js
@@ -20,7 +20,8 @@ const WhoToFollow = {
           id: 0,
           name: i.display_name,
           screen_name: i.acct,
-          profile_image_url: i.avatar || '/images/avi.png'
+          profile_image_url: i.avatar || '/images/avi.png',
+          profile_image_url_original: i.avatar || '/images/avi.png'
         }
         this.users.push(user)
 
diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.vue b/src/components/who_to_follow_panel/who_to_follow_panel.vue
index 25e3a9f6..74e82789 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.vue
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.vue
@@ -6,14 +6,18 @@
           {{$t('who_to_follow.who_to_follow')}}
         </div>
       </div>
-      <div class="panel-body who-to-follow">
-        <span v-for="user in usersToFollow">
+      <div class="who-to-follow">
+        <p v-for="user in usersToFollow" class="who-to-follow-items">
           <img v-bind:src="user.img" />
             <router-link v-bind:to="userProfileLink(user.id, user.name)">
               {{user.name}}
             </router-link><br />
-        </span>
-        <img v-bind:src="$store.state.instance.logo"> <router-link :to="{ name: 'who-to-follow' }">{{$t('who_to_follow.more')}}</router-link>
+        </p>
+        <p class="who-to-follow-more">
+          <router-link :to="{ name: 'who-to-follow' }">
+            {{$t('who_to_follow.more')}}
+          </router-link>
+        </p>
       </div>
     </div>
   </div>
@@ -30,11 +34,19 @@
     height: 32px;
   }
   .who-to-follow {
-    padding: 0.5em 1em 0.5em 1em;
+    padding: 0em 1em;
     margin: 0px;
-    line-height: 40px;
+  }
+  .who-to-follow-items {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    padding: 0px;
+    margin: 1em 0em;
+  }
+  .who-to-follow-more {
+    padding: 0px;
+    margin: 1em 0em;
+    text-align: center;
   }
 </style>