Merge branch 'move-public-share-logo-and-made-compatible-with-mobile' into 'develop'

Moved publicly shared logo and made compatible with mobile

See merge request bramw/baserow!1002

premium/web-frontend/modules/baserow_premium/components/views/kanban/KanbanViewHeader.vue

@@ -67,14 +67,6 @@
         @update-cover-image-field="updateCoverImageField"
       ></ViewFieldsContext>
     </li>
-    <li
-      class="
-        header__filter-item header__filter-item--right
-        margin-top-1 margin-right-1
-      "
-    >
-      <BaserowLogo v-if="view.show_logo && isPublic" />
-    </li>
   </ul>
 </template>
 
@@ -85,11 +77,10 @@ import { notifyIf } from '@baserow/modules/core/utils/error'
 import ViewFieldsContext from '@baserow/modules/database/components/view/ViewFieldsContext'
 import KanbanViewStackedBy from '@baserow_premium/components/views/kanban/KanbanViewStackedBy'
 import kanbanViewHelper from '@baserow_premium/mixins/kanbanViewHelper'
-import BaserowLogo from '@baserow/modules/core/components/BaserowLogo'
 
 export default {
   name: 'KanbanViewHeader',
-  components: { BaserowLogo, KanbanViewStackedBy, ViewFieldsContext },
+  components: { KanbanViewStackedBy, ViewFieldsContext },
   mixins: [kanbanViewHelper],
   props: {
     database: {
@@ -125,9 +116,6 @@ export default {
     ...mapState({
       tableLoading: (state) => state.table.loading,
     }),
-    ...mapGetters({
-      isPublic: 'page/view/public/getIsPublic',
-    }),
   },
   beforeCreate() {
     this.$options.computed = {

web-frontend/modules/core/assets/scss/components/header.scss

@@ -125,6 +125,18 @@
   }
 }
 
+.header__filter-logo {
+  display: flex;
+  align-items: center;
+
+  @include fixed-height(32px, 13px);
+
+  .header--overflow & {
+    width: 16px;
+    overflow: hidden;
+  }
+}
+
 .header--overflow .header__filter-name {
   &:not(.header__filter-name--forced) {
     display: none;

web-frontend/modules/database/components/table/Table.vue

@@ -7,6 +7,9 @@
     >
       <div v-show="tableLoading" class="header__loading"></div>
       <ul v-if="!tableLoading" class="header__filter">
+        <li v-if="showLogo" class="header__filter-item">
+          <BaserowLogo class="header__filter-logo" />
+        </li>
         <li class="header__filter-item header__filter-item--grids">
           <a
             ref="viewsSelectToggle"
@@ -158,6 +161,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import ResizeObserver from 'resize-observer-polyfill'
 
 import { RefreshCancelledError } from '@baserow/modules/core/errors'
@@ -170,6 +174,7 @@ import ViewDecoratorMenu from '@baserow/modules/database/components/view/ViewDec
 import ViewSearch from '@baserow/modules/database/components/view/ViewSearch'
 import EditableViewName from '@baserow/modules/database/components/view/EditableViewName'
 import ShareViewLink from '@baserow/modules/database/components/view/ShareViewLink'
+import BaserowLogo from '@baserow/modules/core/components/BaserowLogo'
 
 /**
  * This page component is the skeleton for a table. Depending on the selected view it
@@ -177,6 +182,7 @@ import ShareViewLink from '@baserow/modules/database/components/view/ShareViewLi
  */
 export default {
   components: {
+    BaserowLogo,
     ShareViewLink,
     EditableViewName,
     ViewsContext,
@@ -268,6 +274,12 @@ export default {
           .some((deco) => deco.isCompatible(this.view))
       )
     },
+    showLogo() {
+      return this.view.show_logo && this.isPublic
+    },
+    ...mapGetters({
+      isPublic: 'page/view/public/getIsPublic',
+    }),
   },
   watch: {
     tableLoading(value) {

web-frontend/modules/database/components/view/gallery/GalleryViewHeader.vue

@@ -31,14 +31,6 @@
         @update-cover-image-field="updateCoverImageField"
       ></ViewFieldsContext>
     </li>
-    <li
-      class="
-        header__filter-item header__filter-item--right
-        margin-top-1 margin-right-1
-      "
-    >
-      <BaserowLogo v-if="view.show_logo && isPublic" />
-    </li>
     <li class="header__filter-item">
       <ViewSearch
         :view="view"
@@ -57,11 +49,10 @@ import { mapGetters, mapState } from 'vuex'
 import { notifyIf } from '@baserow/modules/core/utils/error'
 import ViewFieldsContext from '@baserow/modules/database/components/view/ViewFieldsContext'
 import ViewSearch from '@baserow/modules/database/components/view/ViewSearch'
-import BaserowLogo from '@baserow/modules/core/components/BaserowLogo'
 
 export default {
   name: 'GalleryViewHeader',
-  components: { BaserowLogo, ViewFieldsContext, ViewSearch },
+  components: { ViewFieldsContext, ViewSearch },
   props: {
     database: {
       type: Object,
@@ -92,9 +83,6 @@ export default {
     ...mapState({
       tableLoading: (state) => state.table.loading,
     }),
-    ...mapGetters({
-      isPublic: 'page/view/public/getIsPublic',
-    }),
   },
   beforeCreate() {
     this.$options.computed = {

web-frontend/modules/database/components/view/grid/GridViewHeader.vue

@@ -8,15 +8,7 @@
         :store-prefix="storePrefix"
       ></GridViewHide>
     </li>
-    <li
-      class="
-        header__filter-item header__filter-item--right
-        margin-top-1 margin-right-1
-      "
-    >
-      <BaserowLogo v-if="view.show_logo && isPublic" />
-    </li>
-    <li class="header__filter-item">
+    <li class="header__filter-item header__filter-item--right">
       <ViewSearch
         :view="view"
         :fields="fields"
@@ -28,15 +20,14 @@
 </template>
 
 <script>
-import { mapGetters, mapState } from 'vuex'
+import { mapState } from 'vuex'
 
 import GridViewHide from '@baserow/modules/database/components/view/grid/GridViewHide'
 import ViewSearch from '@baserow/modules/database/components/view/ViewSearch'
-import BaserowLogo from '@baserow/modules/core/components/BaserowLogo'
 
 export default {
   name: 'GridViewHeader',
-  components: { BaserowLogo, GridViewHide, ViewSearch },
+  components: { GridViewHide, ViewSearch },
   props: {
     view: {
       type: Object,
@@ -59,9 +50,6 @@ export default {
     ...mapState({
       tableLoading: (state) => state.table.loading,
     }),
-    ...mapGetters({
-      isPublic: 'page/view/public/getIsPublic',
-    }),
     fieldsAllowedToBeHidden() {
       return this.fields.filter((field) => !field.primary)
     },

web-frontend/test/unit/database/__snapshots__/publicView.spec.js.snap

@@ -45,6 +45,23 @@ exports[`Public View Page Tests Can see a publicly shared grid view 1`] = `
         <ul
           class="header__filter"
         >
+          <li
+            class="header__filter-item"
+          >
+            <a
+              class="header__filter-logo"
+              href="https://baserow.io"
+              target="_blank"
+              title="Baserow - open source no-code database tool and Airtable alternative"
+            >
+              <img
+                alt="Baserow - open source no-code database tool and Airtable alternative"
+                height="14"
+                src="@baserow/modules/core/static/img/logo.svg"
+              />
+            </a>
+          </li>
+           
           <li
             class="header__filter-item header__filter-item--grids"
           >
@@ -147,26 +164,7 @@ exports[`Public View Page Tests Can see a publicly shared grid view 1`] = `
           </li>
            
           <li
-            class="
-      header__filter-item header__filter-item--right
-      margin-top-1 margin-right-1
-    "
-          >
-            <a
-              href="https://baserow.io"
-              target="_blank"
-              title="Baserow - open source no-code database tool and Airtable alternative"
-            >
-              <img
-                alt="Baserow - open source no-code database tool and Airtable alternative"
-                height="14"
-                src="@baserow/modules/core/static/img/logo.svg"
-              />
-            </a>
-          </li>
-           
-          <li
-            class="header__filter-item"
+            class="header__filter-item header__filter-item--right"
           >
             <div>
               <a