Frontend: RTL alignment fixes (#1220)

* RTL alignment fixes

* Fix lint

Co-authored-by: Stephen Brown II <Stephen.Brown2@gmail.com>

Co-authored-by: Stephen Brown II <Stephen.Brown2@gmail.com>

frontend/src/component/navigation.vue

@@ -85,7 +85,7 @@
 
           <v-list-tile :to="{name: 'browse', query: { q: 'mono:true quality:3 photo:true' }}" :exact="true" class="nav-monochrome" @click.stop="">
             <v-list-tile-content>
-              <v-list-tile-title>
+              <v-list-tile-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
                 <translate>Monochrome</translate>
               </v-list-tile-title>
             </v-list-tile-content>
@@ -94,7 +94,7 @@
           <v-list-tile :to="{name: 'browse', query: { q: 'panorama:true' }}" :exact="true" class="nav-panoramas"
                        @click.stop="">
             <v-list-tile-content>
-              <v-list-tile-title>
+              <v-list-tile-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
                 <translate>Panoramas</translate>
               </v-list-tile-title>
             </v-list-tile-content>
@@ -102,7 +102,7 @@
 
           <v-list-tile :to="{name: 'photos', query: { q: 'stack:true' }}" :exact="true" class="nav-stacks" @click.stop="">
             <v-list-tile-content>
-              <v-list-tile-title>
+              <v-list-tile-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
                 <translate>Stacks</translate>
               </v-list-tile-title>
             </v-list-tile-content>
@@ -110,7 +110,7 @@
 
           <v-list-tile :to="{name: 'photos', query: { q: 'scan:true' }}" :exact="true" class="nav-scans" @click.stop="">
             <v-list-tile-content>
-              <v-list-tile-title>
+              <v-list-tile-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
                 <translate>Scans</translate>
               </v-list-tile-title>
             </v-list-tile-content>
@@ -119,7 +119,7 @@
           <v-list-tile v-if="$config.feature('review')" to="/review" class="nav-review"
                        @click.stop="">
             <v-list-tile-content>
-              <v-list-tile-title>
+              <v-list-tile-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
                 <translate>Review</translate>
                 <span v-show="config.count.review > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.review }}</span>
               </v-list-tile-title>
@@ -128,7 +128,7 @@
 
           <v-list-tile v-show="$config.feature('archive')" to="/archive" class="nav-archive" @click.stop="">
             <v-list-tile-content>
-              <v-list-tile-title>
+              <v-list-tile-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
                 <translate>Archive</translate>
               </v-list-tile-title>
             </v-list-tile-content>
@@ -141,7 +141,7 @@
           </v-list-tile-action>
 
           <v-list-tile-content>
-            <v-list-tile-title>
+            <v-list-tile-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
               <translate key="Albums">Albums</translate>
             </v-list-tile-title>
           </v-list-tile-content>
@@ -161,7 +161,7 @@
 
           <v-list-tile to="/unsorted" class="nav-unsorted">
             <v-list-tile-content>
-              <v-list-tile-title>
+              <v-list-tile-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
                 <translate key="Unsorted">Unsorted</translate>
               </v-list-tile-title>
             </v-list-tile-content>
@@ -251,7 +251,7 @@
 
           <v-list-tile to="/states" class="nav-states" @click.stop="">
             <v-list-tile-content>
-              <v-list-tile-title>
+              <v-list-tile-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
                 <translate key="States">States</translate>
                 <span v-show="config.count.states > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.states }}</span>
               </v-list-tile-title>
@@ -325,7 +325,7 @@
 
           <v-list-tile v-show="$config.feature('files')" to="/library/files" class="nav-originals" @click.stop="">
             <v-list-tile-content>
-              <v-list-tile-title>
+              <v-list-tile-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
                 <translate key="Originals">Originals</translate>
                 <span v-show="config.count.files > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.files }}</span>
               </v-list-tile-title>
@@ -334,7 +334,7 @@
 
           <v-list-tile to="/library/hidden" class="nav-hidden" @click.stop="">
             <v-list-tile-content>
-              <v-list-tile-title>
+              <v-list-tile-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
                 <translate key="Hidden">Hidden</translate>
                 <span v-show="config.count.hidden > 0" :class="`nav-count ${rtl ? '--rtl' : ''}`">{{ config.count.hidden }}</span>
               </v-list-tile-title>
@@ -343,7 +343,7 @@
 
           <v-list-tile to="/library/errors" class="nav-errors" @click.stop="">
             <v-list-tile-content>
-              <v-list-tile-title>
+              <v-list-tile-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
                 <translate key="Errors">Errors</translate>
               </v-list-tile-title>
             </v-list-tile-content>
@@ -376,7 +376,7 @@
 
             <v-list-tile :to="{ name: 'about' }" :exact="true" class="nav-about" @click.stop="">
               <v-list-tile-content>
-                <v-list-tile-title>
+                <v-list-tile-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
                   <translate>About</translate>
                 </v-list-tile-title>
               </v-list-tile-content>
@@ -385,7 +385,7 @@
             <v-list-tile v-show="!isPublic && auth" :to="{ name: 'feedback' }" :exact="true" class="nav-feedback"
                          @click.stop="">
               <v-list-tile-content>
-                <v-list-tile-title>
+                <v-list-tile-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
                   <translate>Feedback</translate>
                 </v-list-tile-title>
               </v-list-tile-content>
@@ -393,7 +393,7 @@
 
             <v-list-tile :to="{ name: 'license' }" :exact="true" class="nav-license" @click.stop="">
               <v-list-tile-content>
-                <v-list-tile-title>
+                <v-list-tile-title :class="`menu-item ${rtl ? '--rtl' : ''}`">
                   <translate key="License">License</translate>
                 </v-list-tile-title>
               </v-list-tile-content>

frontend/src/component/notify.vue

@@ -5,9 +5,9 @@
       :color="color"
       :timeout="0"
       :class="textColor"
-      :bottom="true"
+      :bottom="true" 
   >
-    {{ text }}
+    <span :dir="!rtl ? 'let' : 'rtl'">{{ text }}</span>
     <v-btn
         :class="textColor + ' pr-0'"
         icon
@@ -33,6 +33,7 @@ export default {
       lastMessageId: 1,
       lastMessage: '',
       subscriptionId: '',
+      rtl: this.$rtl,
     };
   },
   created() {

frontend/src/component/photo/list.vue

@@ -134,17 +134,19 @@ export default {
 
     let showName = this.filter.order === 'name';
 
+    const align = !this.$rtl ? 'left' : 'right';
     return {
       config: this.$config.values,
       notFoundMessage: m,
       'selected': [],
       'listColumns': [
         {text: '', value: '', align: 'center', class: 'p-col-select', sortable: false},
-        {text: this.$gettext('Title'), value: 'Title', sortable: false},
-        {text: this.$gettext('Taken'), class: 'hidden-xs-only', value: 'TakenAt', sortable: false},
-        {text: this.$gettext('Camera'), class: 'hidden-sm-and-down', value: 'CameraModel', sortable: false},
+        {text: this.$gettext('Title'), align, value: 'Title', sortable: false},
+        {text: this.$gettext('Taken'), align, class: 'hidden-xs-only', value: 'TakenAt', sortable: false},
+        {text: this.$gettext('Camera'), align, class: 'hidden-sm-and-down', value: 'CameraModel', sortable: false},
         {
           text: showName ? this.$gettext('Name') : this.$gettext('Location'),
+          align,
           class: 'hidden-xs-only',
           value: showName ? 'FileName' : 'PlaceLabel',
           sortable: false

frontend/src/css/navigation.css

@@ -22,6 +22,11 @@
     text-align: left;
 }
 
+#p-navigation .menu-item.--rtl {
+    /* Margin title from right 72px, the calc is the 72px minus the original "v-list-tile" right margin 16px */
+    margin-right: calc(72px - 16px);
+}
+
 .v-list__group__header .v-list__group__header__append-icon {
     padding-left: 8px !important;
 }

frontend/src/dialog/photo/details.vue

@@ -384,7 +384,7 @@
                 ></v-textarea>
               </v-flex>
 
-              <v-flex v-if="!disabled" xs12 text-xs-right class="pt-3">
+              <v-flex v-if="!disabled" xs12 :text-xs-right="!rtl" :text-xs-left="rtl" class="pt-3">
                 <v-btn depressed color="secondary-light" class="action-close"
                        @click.stop="close">
                   <translate>Close</translate>
@@ -436,6 +436,7 @@ export default {
       utcTime: "",
       localTime: "",
       textRule: v => v.length <= this.$config.get('clip') || this.$gettext("Text too long"),
+      rtl: this.$rtl,
     };
   },
   computed: {

frontend/src/dialog/photo/edit.vue

@@ -12,11 +12,13 @@
         <v-spacer></v-spacer>
         <v-toolbar-items v-if="selection.length > 1">
           <v-btn icon :disabled="selected < 1" class="action-previous" @click.stop="prev">
-            <v-icon>navigate_before</v-icon>
+            <v-icon v-if="!rtl">navigate_before</v-icon>
+            <v-icon v-else>navigate_next</v-icon>
           </v-btn>
 
           <v-btn icon :disabled="selected >= selection.length - 1" class="action-next" @click.stop="next">
-            <v-icon>navigate_next</v-icon>
+            <v-icon v-if="!rtl">navigate_next</v-icon>
+            <v-icon v-else>navigate_before</v-icon>
           </v-btn>
         </v-toolbar-items>
       </v-toolbar>
@@ -99,6 +101,7 @@ export default {
       items: [],
       readonly: this.$config.get("readonly"),
       active: this.tab,
+       rtl: this.$rtl,
     };
   },
   computed: {

frontend/src/dialog/share.vue

@@ -8,7 +8,7 @@
               <translate :translate-params="{name: model.modelName()}">Share %{name}</translate>
             </h3>
           </v-flex>
-          <v-flex xs3 text-xs-right>
+          <v-flex xs3 :text-xs-right="!rtl" :text-xs-left="rtl">
             <v-btn icon flat dark color="secondary-dark" class="ma-0 action-add-link" :title="$gettext('Add Link')"
                    @click.stop="add">
               <v-icon>add_link</v-icon>
@@ -21,7 +21,7 @@
           <v-expansion-panel-content v-for="(link, index) in links" :key="index"
                                      class="pa-0 elevation-0 secondary mb-1">
             <template #header>
-              <button class="text-xs-left action-url ml-0 mt-0 mb-0 pa-0 mr-2" style="user-select: none;"
+              <button :class="`text-xs-${!rtl ? 'left' : 'right'} action-url ml-0 mt-0 mb-0 pa-0 mr-2`" style="user-select: none;"
                       @click.stop="copyUrl(link)">
                 <v-icon size="16" class="pr-1">link</v-icon>
                 /s/<strong v-if="link.Token" style="font-weight: 500;">{{ link.getToken() }}</strong><span
@@ -81,13 +81,13 @@
                                 @click:append="showPassword = !showPassword"
                         ></v-text-field>
                     </v-flex -->
-                    <v-flex xs6 text-xs-left class="pa-2">
+                    <v-flex xs6 :text-xs-left="!rtl" :text-xs-right="rtl" class="pa-2">
                       <v-btn small icon flat color="remove" class="ma-0 action-delete"
                              :title="$gettext('Delete')" @click.stop.exact="remove(index)">
                         <v-icon>delete</v-icon>
                       </v-btn>
                     </v-flex>
-                    <v-flex xs6 text-xs-right class="pa-2">
+                    <v-flex xs6 :text-xs-right="!rtl" :text-xs-left="rtl" class="pa-2">
                       <v-btn small depressed dark color="primary-button" class="ma-0 action-save"
                              @click.stop.exact="update(link)">
                         <translate>Save</translate>
@@ -100,7 +100,7 @@
           </v-expansion-panel-content>
         </v-expansion-panel>
 
-        <v-container fluid text-xs-left class="pb-0 pt-3 pr-0 pl-0 caption">
+        <v-container fluid :text-xs-left="!rtl" :text-xs-right="!rtl" class="pb-0 pt-3 pr-0 pl-0 caption">
           <translate :translate-params="{name: model.modelName()}">People you share a link with will be able to view public contents.</translate>
           <translate>A click will copy it to your clipboard.</translate>
           <translate>Any private photos and videos remain private and won't be shared.</translate>
@@ -115,7 +115,7 @@
               <translate>WebDAV Upload</translate>
             </v-btn>
           </v-flex>
-          <v-flex xs6 text-xs-right>
+          <v-flex xs6 :text-xs-right="!rtl" :text-xs-left="rtl">
             <v-btn depressed color="secondary-light" class="action-close"
                    @click.stop="confirm">
               <translate>Close</translate>
@@ -150,7 +150,8 @@ export default {
         pass: this.$gettext("Password"),
         cancel: this.$gettext("Cancel"),
         confirm: this.$gettext("Done"),
-      }
+      },
+      rtl: this.$rtl,
     };
   },
   watch: {

frontend/src/dialog/upload.vue

@@ -10,7 +10,7 @@
           <translate key="Upload">Upload</translate>
         </v-toolbar-title>
       </v-toolbar>
-      <v-container grid-list-xs text-xs-left fluid>
+      <v-container grid-list-xs :text-xs-left="!rtl" :text-xs-right="!rtl" fluid>
         <v-form ref="form" class="p-photo-upload" lazy-validation dense @submit.prevent="submit">
           <input ref="upload" type="file" multiple class="d-none input-upload" @change.stop="upload()">