Add open my notes button and improve layout #1169

AndBible · Jul 12, 2021 · bf60dd0 · bf60dd0
1 parent 3443f8e
commit bf60dd0
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/app/bibleview-js/src/components/AmbiguousActionButtons.vue b/app/bibleview-js/src/components/AmbiguousActionButtons.vue
@@ -17,7 +17,7 @@
 
 <template>
   <div v-if="verseInfo">
-    <div :class="{horizontal: !vertical, vertical}">
+    <div :class="{hasActions, horizontal: !vertical, vertical}">
       <div class="large-action" @click="addBookmark">
         <FontAwesomeLayers>
           <FontAwesomeIcon icon="bookmark"/>
@@ -32,6 +32,10 @@
         </FontAwesomeLayers>
         <div class="title">{{ vertical ? strings.verseNoteLong: strings.verseNote }}</div>
       </div>
+      <div class="large-action" @click="openMyNotes">
+        <FontAwesomeIcon icon="file-alt"/>
+        <div class="title">{{ strings.verseMyNotes }}</div>
+      </div>
       <div class="large-action" @click="share">
         <FontAwesomeIcon icon="share-alt"/>
         <div class="title">{{ vertical? strings.verseShareLong: strings.verseShare }}</div>
@@ -58,6 +62,7 @@ export default {
       default: null,
     },
     vertical: {type: Boolean, default: false},
+    hasActions: {type: Boolean, default: false},
   },
   components: {
     FontAwesomeIcon, FontAwesomeLayers,
@@ -129,8 +134,9 @@ export default {
   }
   padding-bottom: 0.5em;
   .horizontal & {
-    padding-top: 10px;
-    padding-bottom: 0;
+    .hasActions & {
+      padding-bottom: 5px;
+    }
   }
 }
 .horizontal {

diff --git a/app/bibleview-js/src/components/modals/AmbiguousSelection.vue b/app/bibleview-js/src/components/modals/AmbiguousSelection.vue
@@ -30,7 +30,7 @@
     </template>
 
     <div class="buttons">
-      <AmbiguousActionButtons v-if="noActions" :verse-info="verseInfo" @close="cancelled"/>
+      <AmbiguousActionButtons :has-actions="!noActions" :verse-info="verseInfo" @close="cancelled"/>
       <template v-for="(s, index) of selections" :key="index">
         <template v-if="!s.options.bookmarkId">
           <button class="button light" @click.stop="selected(s)">
@@ -44,7 +44,6 @@
           @selected="selected(s)"
         />
       </template>
-      <AmbiguousActionButtons v-if="!noActions" :verse-info="verseInfo" @close="cancelled"/>
     </div>
     <template #title>
       <template v-if="verseInfo">