From 7ab3957b2f6b5cb21979cc5111fe1b6885ebfbff Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Tue, 28 Jan 2020 16:56:45 -0300
Subject: [PATCH] Adds option to display view mode options inline.

---
 .../theme-search/pages/theme-items-page.vue   | 20 +++++++++++++++++--
 src/views/theme-search/theme-search.vue       | 12 +++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/views/theme-search/pages/theme-items-page.vue b/src/views/theme-search/pages/theme-items-page.vue
index 34d67d5d1..9cb50a7b4 100644
--- a/src/views/theme-search/pages/theme-items-page.vue
+++ b/src/views/theme-search/pages/theme-items-page.vue
@@ -232,11 +232,12 @@
                     </label>
                     <label 
                             class="label is-hidden-widescreen"
-                            style="margin-right: -10px;">
+                            :style="{ marginRight: showInlineViewModeOptions ? '' : '-10px'}">
                         {{ $i18n.get('label_view_on') + ':&nbsp; ' }}
                     </label>
                     <b-dropdown
                             @change="onChangeViewMode($event)"
+                            :inline="showInlineViewModeOptions"
                             :mobile-modal="true"
                             position="is-bottom-left"
                             :aria-label="$i18n.get('label_view_mode')"
@@ -265,9 +266,24 @@
                                 v-if="showFullscreenWithViewModes || (registeredViewModes[viewModeOption] != undefined && registeredViewModes[viewModeOption].full_screen == false)"
                                 aria-role="listitem">
                             <span 
+                                    v-if="!showInlineViewModeOptions"
                                     class="gray-icon"
                                     v-html="registeredViewModes[viewModeOption].icon"/>
-                            <span>{{ registeredViewModes[viewModeOption].label }}</span>
+                            <span 
+                                    v-else 
+                                    v-tooltip="{
+                                        delay: {
+                                            show: 500,
+                                            hide: 300,
+                                        },
+                                        content: registeredViewModes[viewModeOption].label,
+                                        autoHide: false,
+                                        placement: 'auto-start',
+                                        classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : '']
+                                    }"
+                                    class="gray-icon"
+                                    v-html="registeredViewModes[viewModeOption].icon"/>
+                            <span v-if="!showInlineViewModeOptions">{{ registeredViewModes[viewModeOption].label }}</span>
                         </b-dropdown-item>
                     </b-dropdown>
                 </b-field>
diff --git a/src/views/theme-search/theme-search.vue b/src/views/theme-search/theme-search.vue
index 366ed826c..f4eaf3efd 100644
--- a/src/views/theme-search/theme-search.vue
+++ b/src/views/theme-search/theme-search.vue
@@ -95,6 +95,18 @@ export default {
         .autocomplete .dropdown-trigger .button .icon {
             align-items: center;
         }
+        .dropdown.is-inline .dropdown-content {
+            display: flex;
+            border: none;
+
+            .dropdown-item {
+                padding: 0.125rem 0.5rem !important;
+
+                .gray-icon {
+                    padding: 0;
+                }
+            }
+        }
         .b-radio.radio {
 
             input[type="radio"] + .check {