RTL and Hebrew translation (#801)

* Add hebrew front translation

* Add RTL languages supports

* Add backend messages hebrew trasnlation

* Minor fix to better HE translation

* Clean up merge

assets/locales/he/he.po

@@ -0,0 +1,286 @@
+# SOME DESCRIPTIVE TITLE.
+# Copyright (C) YEAR THE PACKAGE'S COPYRIGHT HOLDER
+# This file is distributed under the same license as the PACKAGE package.
+# FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2021-01-03 16:29+0000\n"
+"PO-Revision-Date: 2021-01-03 21:33+0200\n"
+"Language-Team: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: Poedit 2.4.2\n"
+"Last-Translator: \n"
+"Plural-Forms: nplurals=4; plural=(n==1 ? 0 : n==2 ? 1 : n>10 && n%10==0 ? 2 : 3);\n"
+"Language: he\n"
+
+#: messages.go:73
+msgid "Unexpected error, please try again"
+msgstr "שגיאה בלתי צפויה, נסה שוב"
+
+#: messages.go:74
+msgid "Invalid request"
+msgstr "בקשה לא תקינה"
+
+#: messages.go:75
+msgid "Changes could not be saved"
+msgstr "לא ניתן לשמור שינויים"
+
+#: messages.go:76
+msgid "Could not be deleted"
+msgstr "לא ניתן למחיקה"
+
+#: messages.go:77
+#, c-format
+msgid "%s already exists"
+msgstr "%s כבר קיים"
+
+#: messages.go:78 messages.go:81
+msgid "Not found on server, deleted?"
+msgstr "לא נמצא בשרת, למחוק?"
+
+#: messages.go:79
+msgid "File not found"
+msgstr "הקובץ לא נמצא"
+
+#: messages.go:80
+msgid "Selection not found"
+msgstr "הבחירה לא נמצאה"
+
+#: messages.go:82
+msgid "Account not found"
+msgstr "החשבון לא נמצא"
+
+#: messages.go:83
+msgid "User not found"
+msgstr "המשתמש לא נמצא"
+
+#: messages.go:84
+msgid "Label not found"
+msgstr "התווית לא נמצאה"
+
+#: messages.go:85
+msgid "Album not found"
+msgstr "האלבום לא נמצא"
+
+#: messages.go:86
+msgid "Not available in public mode"
+msgstr "לא זמין במצב ציבורי"
+
+#: messages.go:87
+msgid "not available in read-only mode"
+msgstr "לא זמין במצב קריאה בלבד"
+
+#: messages.go:88
+msgid "Please log in and try again"
+msgstr "אנא היכנס ונסה שוב"
+
+#: messages.go:89
+msgid "Upload might be offensive"
+msgstr "ההעלאה עשויה להיות פוגענית"
+
+#: messages.go:90
+msgid "No items selected"
+msgstr "לא נבחרו פריטים"
+
+#: messages.go:91
+msgid "Failed creating file, please check permissions"
+msgstr "יצירת הקובץ נכשלה, אנא בדוק את ההרשאות"
+
+#: messages.go:92
+msgid "Failed creating folder, please check permissions"
+msgstr "יצירת התיקיה נכשלה, אנא בדוק את ההרשאות"
+
+#: messages.go:93
+msgid "Could not connect, please try again"
+msgstr "לא ניתן היה להתחבר, נסה שוב"
+
+#: messages.go:94
+msgid "Invalid password, please try again"
+msgstr "סיסמה לא תקינה, נסה שוב"
+
+#: messages.go:95
+msgid "Feature disabled"
+msgstr "התכונה מושבתת"
+
+#: messages.go:96
+msgid "No labels selected"
+msgstr "לא נבחרו תוויות"
+
+#: messages.go:97
+msgid "No albums selected"
+msgstr "לא נבחרו אלבומים"
+
+#: messages.go:98
+msgid "No files available for download"
+msgstr "אין קבצים זמינים להורדה"
+
+#: messages.go:99
+msgid "Failed to create zip file"
+msgstr "יצירת קובץ ה-zip נכשלה"
+
+#: messages.go:100
+msgid "Invalid credentials"
+msgstr "אישורים לא תקינים"
+
+#: messages.go:101
+msgid "Invalid link"
+msgstr "קישור לא תקין"
+
+#: messages.go:104
+msgid "Changes successfully saved"
+msgstr "השינויים נשמרו בהצלחה"
+
+#: messages.go:105
+msgid "Album created"
+msgstr "האלבום נוצר"
+
+#: messages.go:106
+msgid "Album saved"
+msgstr "האלבום נשמר"
+
+#: messages.go:107
+#, c-format
+msgid "Album %s deleted"
+msgstr "האלבום %s נמחק"
+
+#: messages.go:108
+msgid "Album contents cloned"
+msgstr "תוכן האלבום שוכפל"
+
+#: messages.go:109
+msgid "File removed from stack"
+msgstr "הקובץ הוסר מהאיחוד"
+
+#: messages.go:110
+msgid "File deleted"
+msgstr "הקובץ נמחק"
+
+#: messages.go:111
+#, c-format
+msgid "Selection added to %s"
+msgstr "הבחירה נוספה ל-%s"
+
+#: messages.go:112
+#, c-format
+msgid "One entry added to %s"
+msgstr "רשומה אחת נוספה ל-%s"
+
+#: messages.go:113
+#, c-format
+msgid "%d entries added to %s"
+msgstr "%d רשומות נוספו ל-%s"
+
+#: messages.go:114
+#, c-format
+msgid "One entry removed from %s"
+msgstr "רשומה אחת הוסרה מ-%s"
+
+#: messages.go:115
+#, c-format
+msgid "%d entries removed from %s"
+msgstr "%d רשומות הוסרו מ-%s"
+
+#: messages.go:116
+msgid "Account created"
+msgstr "החשבון נוצר"
+
+#: messages.go:117
+msgid "Account saved"
+msgstr "החשבון נשמר"
+
+#: messages.go:118
+msgid "Account deleted"
+msgstr "החשבון נמחק"
+
+#: messages.go:119
+msgid "Settings saved"
+msgstr "ההגדרות נשמרו"
+
+#: messages.go:120
+msgid "Password changed"
+msgstr "הסיסמא שונתה"
+
+#: messages.go:121
+#, c-format
+msgid "Import completed in %d s"
+msgstr "הייבוא הושלם ב-%d שניות"
+
+#: messages.go:122
+msgid "Import canceled"
+msgstr "הייבוא בוטל"
+
+#: messages.go:123
+#, c-format
+msgid "Indexing completed in %d s"
+msgstr "האינדוקס הושלם ב-%d שניות"
+
+#: messages.go:124
+msgid "Indexing originals..."
+msgstr "מאנדקס קבצי מקור..."
+
+#: messages.go:125
+#, c-format
+msgid "Indexing files in %s"
+msgstr "מאנדקס קבצים תוך %s"
+
+#: messages.go:126
+msgid "Indexing canceled"
+msgstr "יצירת האינדקס בוטלה"
+
+#: messages.go:127
+#, c-format
+msgid "Removed %d files and %d photos"
+msgstr "הוסרו %d קבצים ו-%d תמונות"
+
+#: messages.go:128
+#, c-format
+msgid "Moving files from %s"
+msgstr "מעביר קבצים מ-%s"
+
+#: messages.go:129
+#, c-format
+msgid "Copying files from %s"
+msgstr "מעתיק קבצים מ-%s"
+
+#: messages.go:130
+msgid "Labels deleted"
+msgstr "התוויות נמחקו"
+
+#: messages.go:131
+msgid "Label saved"
+msgstr "התווית נשמרה"
+
+#: messages.go:132
+#, c-format
+msgid "%d files uploaded in %d s"
+msgstr "%d קבצים הועלו תוך %d שניות"
+
+#: messages.go:133
+msgid "Selection approved"
+msgstr "הבחירה אושרה"
+
+#: messages.go:134
+msgid "Selection archived"
+msgstr "הבחירה בארכיון"
+
+#: messages.go:135
+msgid "Selection restored"
+msgstr "הבחירה שוחזרה"
+
+#: messages.go:136
+msgid "Selection marked as private"
+msgstr "הבחירה סומנה כפרטית"
+
+#: messages.go:137
+msgid "Albums deleted"
+msgstr "האלבומים נמחקו"
+
+#: messages.go:138
+#, c-format
+msgid "Zip created in %d s"
+msgstr "ה-ZIP נוצר תוך %d שניות"

assets/locales/messages.pot

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2021-01-02 13:10+0000\n"
+"POT-Creation-Date: 2021-01-03 19:34+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"

frontend/src/app.js

@@ -54,6 +54,7 @@ import VueInfiniteScroll from "vue-infinite-scroll";
 import VueModal from "vue-js-modal";
 import Hls from "hls.js";
 import { $gettext, Mount } from "common/vm";
+import * as options from "options/options";
 
 // Initialize helpers
 const viewer = new Viewer();
@@ -63,6 +64,13 @@ const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/
   navigator.userAgent
 );
 
+Vue.config.language = config.values.settings.ui.language;
+Settings.defaultLocale = Vue.config.language.substring(0, 2);
+
+// Detect if current language required RTL alignment
+const languages = options.Languages();
+const rtl = languages.some((lang) => lang.value === Vue.config.language && lang.rtl);
+
 // HTTP Live Streaming (video support)
 window.Hls = Hls;
 
@@ -77,12 +85,10 @@ Vue.prototype.$socket = Socket;
 Vue.prototype.$config = config;
 Vue.prototype.$clipboard = clipboard;
 Vue.prototype.$isMobile = isMobile;
+Vue.prototype.$rtl = rtl;
 
 // Register Vuetify
-Vue.use(Vuetify, { theme: config.theme });
-
-Vue.config.language = config.values.settings.ui.language;
-Settings.defaultLocale = Vue.config.language.substring(0, 2);
+Vue.use(Vuetify, { rtl, theme: config.theme });
 
 // Register other VueJS plugins
 Vue.use(GetTextPlugin, {

frontend/src/component/album/clipboard.vue

@@ -4,10 +4,11 @@
       <v-speed-dial
           id="t-clipboard" v-model="expanded" fixed
           bottom
-          right
           direction="top"
           transition="slide-y-reverse-transition"
-          class="p-clipboard p-album-clipboard"
+          :right="!rtl"
+          :left="rtl"
+          :class="`p-clipboard ${!rtl ? '--ltr' : '--rtl'} p-album-clipboard`"
       >
         <v-btn
             slot="activator" fab
@@ -111,6 +112,7 @@ export default {
         album: false,
         edit: false,
       },
+      rtl: this.$rtl,
     };
   },
   methods: {

frontend/src/component/file/clipboard.vue

@@ -2,11 +2,13 @@
   <div>
     <v-container fluid class="pa-0" v-if="selection.length > 0">
       <v-speed-dial
-          fixed bottom right
+          fixed bottom
           direction="top"
           v-model="expanded"
           transition="slide-y-reverse-transition"
-          class="p-clipboard p-file-clipboard"
+          :right="!rtl"
+          :left="rtl"
+          :class="`p-clipboard ${!rtl ? '--ltr' : '--rtl'} p-file-clipboard`"
           id="t-clipboard"
       >
         <v-btn
@@ -74,6 +76,7 @@ export default {
         album: false,
         edit: false,
       },
+      rtl: this.$rtl,
     };
   },
   methods: {

frontend/src/component/label/clipboard.vue

@@ -2,11 +2,13 @@
   <div>
     <v-container fluid class="pa-0" v-if="selection.length > 0">
       <v-speed-dial
-          fixed bottom right
+          fixed bottom
           direction="top"
           v-model="expanded"
           transition="slide-y-reverse-transition"
-          class="p-clipboard p-label-clipboard"
+          :right="!rtl"
+          :left="rtl"
+          :class="`p-clipboard ${!rtl ? '--ltr' : '--rtl'} p-label-clipboard`"
           id="t-clipboard"
       >
         <v-btn
@@ -87,6 +89,7 @@ export default {
         album: false,
         edit: false,
       },
+      rtl: this.$rtl,
     };
   },
   methods: {

frontend/src/component/navigation.vue

@@ -28,6 +28,7 @@
         :mini-variant-width="80"
         class="nav-sidebar navigation"
         fixed dark app
+        :right="rtl"
     >
       <v-toolbar flat :dense="$vuetify.breakpoint.smAndDown">
         <v-list class="navigation-home">
@@ -42,7 +43,8 @@
             </v-list-tile-content>
             <v-list-tile-action class="hidden-sm-and-down">
               <v-btn icon class="nav-minimize" @click.stop="isMini = !isMini">
-                <v-icon>chevron_left</v-icon>
+                <v-icon v-if="!rtl">chevron_left</v-icon>
+                <v-icon v-else>chevron_right</v-icon>
               </v-btn>
             </v-list-tile-action>
           </v-list-tile>
@@ -52,7 +54,8 @@
       <v-list class="pt-3">
         <v-list-tile v-if="isMini" class="nav-expand" @click.stop="isMini = !isMini">
           <v-list-tile-action>
-            <v-icon>chevron_right</v-icon>
+            <v-icon v-if="!rtl">chevron_right</v-icon>
+            <v-icon v-else>chevron_left</v-icon>
           </v-list-tile-action>
         </v-list-tile>
 
@@ -73,7 +76,7 @@
             <v-list-tile-content>
               <v-list-tile-title>
                 <translate key="Photos">Photos</translate>
-                <span v-if="config.count.photos > 0" class="nav-count">{{ config.count.photos }}</span>
+                <span v-if="config.count.photos > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.photos }}</span>
               </v-list-tile-title>
             </v-list-tile-content>
           </v-list-tile>
@@ -116,7 +119,7 @@
             <v-list-tile-content>
               <v-list-tile-title>
                 <translate>Review</translate>
-                <span v-show="config.count.review > 0" class="nav-count">{{ config.count.review }}</span>
+                <span v-show="config.count.review > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.review }}</span>
               </v-list-tile-title>
             </v-list-tile-content>
           </v-list-tile>
@@ -147,7 +150,7 @@
             <v-list-tile-content>
               <v-list-tile-title>
                 <translate key="Albums">Albums</translate>
-                <span v-if="config.count.albums > 0" class="nav-count">{{ config.count.albums }}</span>
+                <span v-if="config.count.albums > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.albums }}</span>
               </v-list-tile-title>
             </v-list-tile-content>
           </v-list-tile>
@@ -169,7 +172,7 @@
           <v-list-tile-content>
             <v-list-tile-title>
               <translate key="Favorites">Favorites</translate>
-              <span v-show="config.count.favorites > 0" class="nav-count">{{ config.count.favorites }}</span>
+              <span v-show="config.count.favorites > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.favorites }}</span>
             </v-list-tile-title>
           </v-list-tile-content>
         </v-list-tile>
@@ -182,7 +185,7 @@
           <v-list-tile-content>
             <v-list-tile-title>
               <translate key="Private">Private</translate>
-              <span v-show="config.count.private > 0" class="nav-count">{{ config.count.private }}</span>
+              <span v-show="config.count.private > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.private }}</span>
             </v-list-tile-title>
           </v-list-tile-content>
         </v-list-tile>
@@ -195,7 +198,7 @@
           <v-list-tile-content>
             <v-list-tile-title>
               <translate key="Videos">Videos</translate>
-              <span v-show="config.count.videos > 0" class="nav-count">{{ config.count.videos }}</span>
+              <span v-show="config.count.videos > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.videos }}</span>
             </v-list-tile-title>
           </v-list-tile-content>
         </v-list-tile>
@@ -209,7 +212,7 @@
             <v-list-tile-title>
               <translate key="Calendar">Calendar</translate>
               <span v-show="config.count.months > 0"
-                    class="nav-count">{{ config.count.months }}</span>
+                    :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.months }}</span>
             </v-list-tile-title>
           </v-list-tile-content>
         </v-list-tile>
@@ -224,7 +227,7 @@
             <v-list-tile-title>
               <translate key="Moments">Moments</translate>
               <span v-show="config.count.moments > 0"
-                    class="nav-count">{{ config.count.moments }}</span>
+                    :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.moments }}</span>
             </v-list-tile-title>
           </v-list-tile-content>
         </v-list-tile>
@@ -248,7 +251,7 @@
               <v-list-tile-title>
                 <translate key="Places">Places</translate>
                 <span v-show="config.count.places > 0"
-                      class="nav-count">{{ config.count.places }}</span>
+                      :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.places }}</span>
               </v-list-tile-title>
             </v-list-tile-content>
           </v-list-tile>
@@ -257,7 +260,7 @@
             <v-list-tile-content>
               <v-list-tile-title>
                 <translate key="States">States</translate>
-                <span v-show="config.count.states > 0" class="nav-count">{{ config.count.states }}</span>
+                <span v-show="config.count.states > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.states }}</span>
               </v-list-tile-title>
             </v-list-tile-content>
           </v-list-tile>
@@ -272,7 +275,7 @@
             <v-list-tile-title>
               <translate key="Labels">Labels</translate>
               <span v-show="config.count.labels > 0"
-                    class="nav-count">{{ config.count.labels }}</span>
+                    :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.labels }}</span>
             </v-list-tile-title>
           </v-list-tile-content>
         </v-list-tile>
@@ -286,7 +289,7 @@
             <v-list-tile-title>
               <translate key="Folders">Folders</translate>
               <span v-show="config.count.folders > 0"
-                    class="nav-count">{{ config.count.folders }}</span>
+                    :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.folders }}</span>
             </v-list-tile-title>
           </v-list-tile-content>
         </v-list-tile>
@@ -316,7 +319,7 @@
             <v-list-tile-content>
               <v-list-tile-title>
                 <translate key="Originals">Originals</translate>
-                <span v-show="config.count.files > 0" class="nav-count">{{ config.count.files }}</span>
+                <span v-show="config.count.files > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.files }}</span>
               </v-list-tile-title>
             </v-list-tile-content>
           </v-list-tile>
@@ -325,7 +328,7 @@
             <v-list-tile-content>
               <v-list-tile-title>
                 <translate key="Hidden">Hidden</translate>
-                <span v-show="config.count.hidden > 0" class="nav-count">{{ config.count.hidden }}</span>
+                <span v-show="config.count.hidden > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.hidden }}</span>
               </v-list-tile-title>
             </v-list-tile-content>
           </v-list-tile>
@@ -464,6 +467,7 @@ export default {
         selection: [],
         index: 0,
       },
+      rtl: this.$rtl,
     };
   },
   computed: {

frontend/src/component/photo/clipboard.vue

@@ -4,10 +4,11 @@
       <v-speed-dial
           id="t-clipboard" v-model="expanded" fixed
           bottom
-          right
           direction="top"
           transition="slide-y-reverse-transition"
-          class="p-clipboard p-photo-clipboard"
+          :right="!rtl"
+          :left="rtl"
+          :class="`p-clipboard ${!rtl ? '--ltr' : '--rtl'} p-photo-clipboard`"
       >
         <v-btn
             slot="activator" fab
@@ -159,6 +160,7 @@ export default {
         album: false,
         share: false,
       },
+      rtl: this.$rtl,
     };
   },
   methods: {

frontend/src/css/navigation.css

@@ -17,6 +17,11 @@
     text-align: right;
 }
 
+#p-navigation .nav-count.--rtl {
+    right: 80px;
+    text-align: left;
+}
+
 .v-list__group__header .v-list__group__header__append-icon {
     padding-left: 8px !important;
 }

frontend/src/css/photos.css

@@ -87,11 +87,16 @@
     top: 12px;
 }
 
-#photoprism .p-clipboard {
+#photoprism .p-clipboard.--ltr {
     right: 8px;
     bottom: 12px;
 }
 
+#photoprism .p-clipboard.--rtl {
+    left: 8px;
+    bottom: 12px;
+}
+
 #photoprism .p-clipboard .v-btn.v-btn--disabled:not(.v-btn--icon):not(.v-btn--flat):not(.v-btn--outline) {
     background-color: rgba(100, 100, 100, 0.5) !important;
 }

frontend/src/dialog/upload.vue

@@ -77,7 +77,7 @@
                 @click.stop="uploadDialog()"
             >
               <translate key="Upload">Upload</translate>
-              <v-icon right dark>cloud_upload</v-icon>
+              <v-icon :right="!rtl" :left="rtl"  dark>cloud_upload</v-icon>
             </v-btn>
           </v-container>
         </v-form>
@@ -112,6 +112,7 @@ export default {
       started: 0,
       review: this.$config.feature("review"),
       safe: !this.$config.get("uploadNSFW"),
+      rtl: this.$rtl,
     };
   },
   watch: {

frontend/src/options/options.js

@@ -96,6 +96,12 @@ export const Languages = () => [
     translated: $gettext("French"),
     value: "fr",
   },
+  {
+    text: "עברית",
+    translated: $gettext("Hebrew"),
+    value: "he",
+    rtl: true
+  },
   {
     text: "हिन्दी",
     translated: $gettext("Hindi"),

frontend/src/pages/about/feedback.vue

@@ -70,7 +70,7 @@
                  :disabled="!form.Category || !form.Message || !form.UserEmail"
                  @click.stop="send">
             <translate>Send</translate>
-            <v-icon right dark>send</v-icon>
+            <v-icon :right="!rtl" :left="rtl" dark>send</v-icon>
           </v-btn>
         </v-flex>
 
@@ -101,7 +101,8 @@ export default {
         UserEmail: "",
         UserAgent: navigator.userAgent,
         UserLocales: navigator.language,
-      }
+      },
+      rtl: this.$rtl,
     };
   },
   methods: {

frontend/src/pages/library.vue

@@ -12,7 +12,7 @@
              @click="changePath(item.path)">
         <v-icon v-if="$vuetify.breakpoint.smAndDown" :title="item.label">{{ item.icon }}</v-icon>
         <template v-else>
-          <v-icon :size="18" left>{{ item.icon }}</v-icon> {{ item.label }}
+          <v-icon :size="18" :left="!rtl" :right="rtl">{{ item.icon }}</v-icon> {{ item.label }}
         </template>
       </v-tab>
 
@@ -107,6 +107,7 @@ export default {
       config: config,
       readonly: isReadOnly,
       active: active,
+      rtl: this.$rtl,
     };
   },
   methods: {

frontend/src/pages/library/import.vue

@@ -73,7 +73,7 @@
                @click.stop="showUpload()"
         >
           <translate>Upload</translate>
-          <v-icon right dark>cloud_upload</v-icon>
+          <v-icon :right="!rtl" :left="rtl" dark>cloud_upload</v-icon>
         </v-btn>
 
         <v-btn
@@ -84,7 +84,7 @@
             @click.stop="startImport()"
         >
           <translate>Import</translate>
-          <v-icon right dark>update</v-icon>
+          <v-icon :right="!rtl" :left="rtl" dark>sync</v-icon>
         </v-btn>
       </v-container>
     </v-form>
@@ -117,6 +117,7 @@ export default {
       source: null,
       root: root,
       dirs: [root],
+      rtl: this.$rtl,
     };
   },
   created() {

frontend/src/pages/library/index.vue

@@ -66,7 +66,7 @@
             @click.stop="startIndexing()"
         >
           <translate>Start</translate>
-          <v-icon right dark>update</v-icon>
+          <v-icon :right="!rtl" :left="rtl" dark>update</v-icon>
         </v-btn>
 
         <v-alert
@@ -115,6 +115,7 @@ export default {
       source: null,
       root: root,
       dirs: [root],
+      rtl: this.$rtl,
     };
   },
   created() {

frontend/src/pages/login.vue

@@ -40,7 +40,7 @@
                      :disabled="loading || !this.password || !this.username"
                      @click.stop="login">
                 <translate>Sign in</translate>
-                <v-icon right dark>login</v-icon>
+                <v-icon :right="!rtl" :left="rtl" dark>login</v-icon>
               </v-btn>
             </v-flex>
           </v-layout>
@@ -62,6 +62,7 @@ export default {
       username: "admin",
       password: "",
       nextUrl: this.$route.params.nextUrl ? this.$route.params.nextUrl : "/",
+      rtl: this.$rtl,
     };
   },
   methods: {

frontend/src/pages/settings.vue

@@ -13,7 +13,7 @@
              @click="changePath(item.path)">
         <v-icon v-if="$vuetify.breakpoint.smAndDown" :title="item.label">{{ item.icon }}</v-icon>
         <template v-else>
-          <v-icon :size="18" left>{{ item.icon }}</v-icon> {{ item.label }}
+          <v-icon :size="18" :left="!rtl" :right="rtl">{{ item.icon }}</v-icon> {{ item.label }}
         </template>
       </v-tab>
 
@@ -128,6 +128,7 @@ export default {
       public: isPublic,
       readonly: this.$config.get("readonly"),
       active: active,
+      rtl: this.$rtl,
     };
   },
   methods: {

frontend/src/pages/settings/account.vue

@@ -58,7 +58,7 @@
                      class="action-confirm white--text ma-0"
                      @click.stop="confirm">
                 <translate>Change</translate>
-                <v-icon right dark>keyboard_return</v-icon>
+                <v-icon :right="!rtl" :left="rtl" dark>keyboard_return</v-icon>
               </v-btn>
             </v-flex>
           </v-layout>
@@ -83,6 +83,7 @@ export default {
       newPassword: "",
       confirmPassword: "",
       busy: false,
+      rtl: this.$rtl,
     };
   },
   methods: {

frontend/src/pages/settings/sync.vue

@@ -69,7 +69,7 @@
                depressed
                @click.stop="add">
           <translate>Add Server</translate>
-          <v-icon right dark>add</v-icon>
+          <v-icon :right="!rtl" :left="rtl" dark>add</v-icon>
         </v-btn>
       </v-form>
     </v-container>
@@ -122,6 +122,7 @@ export default {
         },
         {text: '', value: '', sortable: false, class: 'hidden-xs-only', align: 'right'},
       ],
+      rtl: this.$rtl,
     };
   },
   created() {