Frontend: Improve RTL rendering

Signed-off-by: Michael Mayer <michael@photoprism.app>
photoprism · Dec 13, 2022 · 3a1293d · 3a1293d
1 parent a2ab1fd
commit 3a1293d
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 12 deletions.
diff --git a/frontend/src/component/navigation.vue b/frontend/src/component/navigation.vue
@@ -490,26 +490,26 @@
           </v-list-group>
         </template>
 
-        <v-list-tile v-show="!auth" :to="{ name: 'login' }" class="nav-login" @click.stop="">
-          <v-list-tile-action :title="$gettext('Login')">
-            <v-icon>lock</v-icon>
+        <v-list-tile v-show="isAdmin && !isPublic && !isDemo && !isSponsor" :to="{ name: 'upgrade' }" class="nav-upgrade" @click.stop="">
+          <v-list-tile-action :title="$gettext('Upgrade')">
+            <v-icon>diamond</v-icon>
           </v-list-tile-action>
 
           <v-list-tile-content>
             <v-list-tile-title>
-              <translate key="Login">Login</translate>
+              <translate key="Upgrade">Upgrade</translate>
             </v-list-tile-title>
           </v-list-tile-content>
         </v-list-tile>
 
-        <v-list-tile v-show="isAdmin && !isPublic && !isDemo && !isSponsor" :to="{ name: 'upgrade' }" class="nav-upgrade" @click.stop="">
-          <v-list-tile-action :title="$gettext('Upgrade')">
-            <v-icon>diamond</v-icon>
+        <v-list-tile v-show="!auth" :to="{ name: 'login' }" class="nav-login" @click.stop="">
+          <v-list-tile-action :title="$gettext('Login')">
+            <v-icon>lock</v-icon>
           </v-list-tile-action>
 
           <v-list-tile-content>
             <v-list-tile-title>
-              <translate key="Upgrade">Upgrade</translate>
+              <translate key="Login">Login</translate>
             </v-list-tile-title>
           </v-list-tile-content>
         </v-list-tile>

diff --git a/frontend/src/page/connect.vue b/frontend/src/page/connect.vue
@@ -2,7 +2,9 @@
   <div class="p-page p-page-upgrade">
     <v-toolbar flat color="secondary" :dense="$vuetify.breakpoint.smAndDown">
       <v-toolbar-title>
-        <a href="https://link.photoprism.app/membership" target="_blank"><translate>Upgrade</translate></a> <v-icon>navigate_next</v-icon>
+        <translate>Upgrade</translate>
+        <v-icon v-if="rtl">navigate_before</v-icon>
+        <v-icon v-else>navigate_next</v-icon>
         <span v-if="busy">
           <translate>Busy, please wait…</translate>
         </span>
@@ -95,15 +97,17 @@
                  :disabled="busy"
                  @click.stop="upgrade">
             <translate>Proceed</translate>
-            <v-icon :right="!rtl" :left="rtl" dark>navigate_next</v-icon>
+            <v-icon v-if="rtl" left dark>navigate_before</v-icon>
+            <v-icon v-else right dark>navigate_next</v-icon>
           </v-btn>
           <v-btn v-else color="primary-button" :block="$vuetify.breakpoint.xsOnly"
                  class="white--text ml-0"
                  depressed
                  :disabled="busy || form.token.length !== tokenMask.length"
                  @click.stop="activate">
             <translate>Activate</translate>
-            <v-icon :right="!rtl" :left="rtl" dark>navigate_next</v-icon>
+            <v-icon v-if="rtl" left dark>navigate_before</v-icon>
+            <v-icon v-else right dark>navigate_next</v-icon>
           </v-btn>
         </v-flex>
         <v-flex xs12 class="px-2 pt-3 pb-0">
@@ -141,6 +145,7 @@
                  :disabled="busy"
                  @click.stop="compare">
             <translate>Compare Editions</translate>
+            <v-icon :right="!rtl" :left="rtl" dark>compare_arrows</v-icon>
           </v-btn>
         </v-flex>
       </v-layout>

diff --git a/frontend/src/page/login.vue b/frontend/src/page/login.vue
@@ -57,7 +57,8 @@
                            :block="$vuetify.breakpoint.xsOnly"
                            class="white--text action-confirm ra-6 py-2 px-3" @click.stop.prevent="login">
                       <translate>Sign in</translate>
-                      <v-icon dark>navigate_next</v-icon>
+                      <v-icon v-if="rtl" left dark>navigate_before</v-icon>
+                      <v-icon v-else right dark>navigate_next</v-icon>
                     </v-btn>
                   </div>
                 </v-flex>