move definitions for timeline header buttons to Panel.scss, now called

rightside buttons

6 files changed, 41 insertions, 60 deletions

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 61832566..3752e3c1 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -20,10 +20,12 @@
       <QuickFilterSettings
         v-if="!collapsable"
         :conversation="true"
+        class="rightside-button"
       />
       <QuickViewSettings
         v-if="!collapsable"
         :conversation="true"
+        class="rightside-button"
       />
     </div>
     <div class="conversation-body panel-body">
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 245e3f47..f71f9b76 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -29,27 +29,6 @@
       }
     }
   }
-
-  .timeline-header-button {
-    align-self: stretch;
-    text-align: center;
-    width: var(--__panel-heading-height);
-    height: var(--__panel-heading-height);
-    margin: calc(-1 * var(--panel-heading-height-padding)) 0;
-    margin-right: calc(-1 * var(--__panel-heading-gap));
-
-    > button {
-      box-sizing: border-box;
-      padding: calc(1 * var(--panel-heading-height-padding)) 0;
-      height: 100%;
-      width: 100%;
-      text-align: center;
-
-      svg {
-        font-size: 1.2em;
-      }
-    }
-  }
 }
 
 .notification {
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 22f67e65..3f4b1b42 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -21,7 +21,7 @@
             >{{ unseenCount }}</span>
           </div>
           <div
-            class="timeline-header-button"
+            class="rightside-button"
             v-if="showScrollTop"
           >
             <button
@@ -46,7 +46,7 @@
           >
             {{ $t('notifications.read') }}
           </button>
-          <NotificationFilters class="timeline-header-button" />
+          <NotificationFilters class="rightside-button" />
         </div>
         <div class="panel-body">
           <div
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index f5dbb639..900bdad3 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -13,38 +13,6 @@
     background-color: var(--cGreen);
   }
 
-  .timeline-header-button {
-    align-self: stretch;
-    text-align: center;
-    width: var(--__panel-heading-height);
-    height: var(--__panel-heading-height);
-    margin: calc(-1 * var(--panel-heading-height-padding)) 0;
-    margin-right: calc(-1 * var(--__panel-heading-gap));
-
-    > button {
-      box-sizing: border-box;
-      padding: calc(1 * var(--panel-heading-height-padding)) 0;
-      height: 100%;
-      width: 100%;
-      text-align: center;
-
-      svg {
-        font-size: 1.2em;
-      }
-    }
-  }
-
-  .timeline-header-icon {
-    align-self: stretch;
-    text-align: center;
-    width: var(--__panel-heading-height);
-    margin-right: calc(-1 * var(--__panel-heading-gap));
-
-    svg {
-      font-size: 1.2em;
-    }
-  }
-
   .loadmore-button {
     position: relative
   }
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 15d097e8..77480345 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -6,7 +6,7 @@
         :timeline-name="timelineName"
       />
       <div
-        class="timeline-header-button"
+        class="rightside-button"
         v-if="showScrollTop && !embedded"
       >
         <button
@@ -25,7 +25,7 @@
       </div>
       <template v-if="mobileLayout && !embedded">
         <div
-          class="timeline-header-button"
+          class="rightside-button"
           v-if="showLoadButton"
         >
           <button
@@ -41,7 +41,7 @@
         </div>
         <div
           v-else-if="!embedded"
-          class="loadmore-text faint veryfaint timeline-header-icon"
+          class="loadmore-text faint veryfaint rightside-icon"
           @click.prevent
         >
           <FAIcon
@@ -66,8 +66,8 @@
           {{ $t('timeline.up_to_date') }}
         </div>
       </template>
-      <QuickFilterSettings v-if="!embedded" class="timeline-header-button"/>
-      <QuickViewSettings v-if="!embedded" class="timeline-header-button"/>
+      <QuickFilterSettings v-if="!embedded" class="rightside-button"/>
+      <QuickViewSettings v-if="!embedded" class="rightside-button"/>
     </div>
     <div :class="classes.body">
       <div
diff --git a/src/panel.scss b/src/panel.scss
index b5ef67e9..a53e47c6 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -196,6 +196,38 @@
       }
     }
   }
+
+  .rightside-button {
+    align-self: stretch;
+    text-align: center;
+    width: var(--__panel-heading-height);
+    height: var(--__panel-heading-height);
+    margin: calc(-1 * var(--panel-heading-height-padding)) 0;
+    margin-right: calc(-1 * var(--__panel-heading-gap));
+
+    > button {
+      box-sizing: border-box;
+      padding: calc(1 * var(--panel-heading-height-padding)) 0;
+      height: 100%;
+      width: 100%;
+      text-align: center;
+
+      svg {
+        font-size: 1.2em;
+      }
+    }
+  }
+
+  .rightside-icon {
+    align-self: stretch;
+    text-align: center;
+    width: var(--__panel-heading-height);
+    margin-right: calc(-1 * var(--__panel-heading-gap));
+
+    svg {
+      font-size: 1.2em;
+    }
+  }
 }
 
 .panel-footer {