Make block refresh UI more intuitive

client/web/compose/src/components/PageBlocks/Configurator.vue

@@ -21,69 +21,73 @@
       active
       :title="$t('general.label.general')"
     >
-      <div class="mh-tab overflow-auto">
-        <b-form-group
-          for="title"
-          :label="$t('general.titleLabel')"
+      <b-row>
+        <b-col
+          cols="12"
         >
-          <b-input-group>
-            <b-form-input
-              id="title"
-              v-model="block.title"
-              type="text"
-              class="form-control"
-              :placeholder="$t('general.titlePlaceholder')"
-            />
-            <b-input-group-append>
-              <page-translator
-                v-if="page"
-                :page="page"
-                :block.sync="block"
-                :disabled="isNew"
-                :highlight-key="`pageBlock.${block.blockID}.title`"
-                button-variant="light"
+          <b-form-group
+            :label="$t('general.titleLabel')"
+          >
+            <b-input-group>
+              <b-form-input
+                id="title"
+                v-model="block.title"
+                :placeholder="$t('general.titlePlaceholder')"
               />
-            </b-input-group-append>
-          </b-input-group>
-        </b-form-group>
+              <b-input-group-append>
+                <page-translator
+                  v-if="page"
+                  :page="page"
+                  :block.sync="block"
+                  :disabled="isNew"
+                  :highlight-key="`pageBlock.${block.blockID}.title`"
+                  button-variant="light"
+                />
+              </b-input-group-append>
+            </b-input-group>
+          </b-form-group>
+        </b-col>
 
-        <b-form-group
-          for="description"
-          :label="$t('general.descriptionLabel')"
+        <b-col
+          cols="12"
         >
-          <b-input-group>
-            <b-form-input
-              id="description"
-              v-model="block.description"
-              type="text"
-              class="form-control"
-              :placeholder="$t('general.descriptionPlaceholder')"
-            />
-            <b-input-group-append>
-              <page-translator
-                v-if="page"
-                :page="page"
-                :block.sync="block"
-                :disabled="isNew"
-                :highlight-key="`pageBlock.${block.blockID}.description`"
-                button-variant="light"
+          <b-form-group
+            :label="$t('general.descriptionLabel')"
+          >
+            <b-input-group>
+              <b-form-textarea
+                id="description"
+                v-model="block.description"
+                :placeholder="$t('general.descriptionPlaceholder')"
               />
-            </b-input-group-append>
-          </b-input-group>
-        </b-form-group>
+              <b-input-group-append>
+                <page-translator
+                  v-if="page"
+                  :page="page"
+                  :block.sync="block"
+                  :disabled="isNew"
+                  :highlight-key="`pageBlock.${block.blockID}.description`"
+                  button-variant="light"
+                />
+              </b-input-group-append>
+            </b-input-group>
+          </b-form-group>
+        </b-col>
 
-        <b-form-group
-          for="color"
-          :label="$t('general.headerStyle')"
+        <b-col
+          cols="12"
+          sm="6"
         >
-          <b-form-select
-            id="color"
-            v-model="block.style.variants.headerText"
-            :options="textVariants"
-          />
-        </b-form-group>
+          <b-form-group
+            :label="$t('general.headerStyle')"
+          >
+            <b-form-select
+              id="color"
+              v-model="block.style.variants.headerText"
+              :options="textVariants"
+            />
+          </b-form-group>
 
-        <b-form-group>
           <b-form-checkbox
             v-model="block.style.wrap.kind"
             value="card"
@@ -92,30 +96,17 @@
           >
             {{ $t('general.wrap') }}
           </b-form-checkbox>
-        </b-form-group>
+        </b-col>
 
-        <b-form-group
-          v-if="block.options.refreshEnabled !== undefined"
-          class="mt-4"
-          :label="$t('general.refresh.label')"
-          :description="$t('general.refresh.description')"
+        <b-col
+          v-if="block.options.showRefresh !== undefined"
+          cols="12"
+          sm="6"
         >
-          <b-col
-            cols="12"
-            sm="3"
-            class="px-0 mb-2"
-          >
-            <b-form-checkbox
-              v-model="block.options.refreshEnabled"
-            >
-              {{ $t('general.refresh.enabled') }}
-            </b-form-checkbox>
-          </b-col>
-
-          <b-col
-            cols="12"
-            sm="3"
-            class="pl-0"
+          <b-form-group
+            :label="$t('general.refresh.auto')"
+            :description="$t('general.refresh.description')"
+            class="mb-1"
           >
             <b-input-group append="s">
               <b-form-input
@@ -126,19 +117,31 @@
                 @blur="updateRefresh"
               />
             </b-input-group>
-          </b-col>
-        </b-form-group>
+          </b-form-group>
+          <b-form-checkbox
+            v-model="block.options.showRefresh"
+            switch
+            class="mb-2"
+          >
+            {{ $t('general.refresh.show') }}
+          </b-form-checkbox>
+        </b-col>
 
-        <b-form-group
+        <b-col
           v-if="block.options.magnifyOption !== undefined"
-          :label="$t('general.magnifyLabel')"
+          cols="12"
+          sm="6"
         >
-          <b-form-select
-            v-model="block.options.magnifyOption"
-            :options="magnifyOptions"
-          />
-        </b-form-group>
-      </div>
+          <b-form-group
+            :label="$t('general.magnifyLabel')"
+          >
+            <b-form-select
+              v-model="block.options.magnifyOption"
+              :options="magnifyOptions"
+            />
+          </b-form-group>
+        </b-col>
+      </b-row>
     </b-tab>
 
     <page-block

client/web/compose/src/components/PageBlocks/Wrap/Card.vue

@@ -29,7 +29,7 @@
               class="ml-auto"
             >
               <font-awesome-icon
-                v-if="block.options.refreshEnabled"
+                v-if="block.options.showRefresh"
                 :icon="['fa', 'sync']"
                 class="h6 text-secondary"
                 role="button"
@@ -49,7 +49,7 @@
 
           <b-card-text
             v-if="block.description"
-            class="text-dark text-truncate mt-1"
+            class="text-dark text-wrap mt-1"
           >
             {{ block.description }}
           </b-card-text>

client/web/compose/src/components/PageBlocks/Wrap/Plain.vue

@@ -27,7 +27,7 @@
               class="ml-auto"
             >
               <font-awesome-icon
-                v-if="block.options.refreshEnabled"
+                v-if="block.options.showRefresh"
                 :icon="['fa', 'sync']"
                 class="h6 text-secondary"
                 role="button"
@@ -47,7 +47,7 @@
 
           <b-card-text
             v-if="block.description"
-            class="text-dark text-truncate mt-1"
+            class="text-dark text-wrap mt-1"
           >
             {{ block.description }}
           </b-card-text>

client/web/compose/src/components/PageBlocks/Wrap/base.vue

@@ -48,14 +48,14 @@ export default {
         this.block.title,
         this.block.description,
         this.block.options.magnifyOption,
-        this.block.options.refreshEnabled,
+        this.block.options.showRefresh,
       ].some(c => !!c)
     },
 
     showOptions () {
       return [
         this.block.options.magnifyOption,
-        this.block.options.refreshEnabled,
+        this.block.options.showRefresh,
       ].some(c => !!c)
     },
   },

client/web/reporter/src/components/Report/Blocks/index.vue

@@ -4,70 +4,43 @@
     v-bind="$props"
     v-on="$listeners"
   >
-    <template
-      #header
+    <split
+      v-if="showDisplayElements"
+      ref="split"
+      :direction="block.layout"
+      :gutter-size="12"
+      class="h-100"
+      @onDragEnd="setDisplayElementSizes"
     >
-      <div
-        v-if="block.title || block.description"
-        class="px-3"
-        style="padding-top: 0.75rem; padding-bottom: 0.75rem;"
+      <split-area
+        v-for="(element, displayElementIndex) in block.elements"
+        :key="displayElementIndex"
+        :size="element.meta.size"
+        :min-size="0"
+        :class="{
+          'overflow-hidden h-100': element.kind !== 'Text',
+          'w-100': block.elements.length === 1,
+        }"
+        class="position-relative"
       >
-        <h5
-          v-if="block.title"
-          class="text-primary text-truncate mb-0"
+        <div
+          v-if="processing"
+          class="d-flex align-items-center justify-content-center h-100"
         >
-          {{ block.title }}
-        </h5>
+          <b-spinner />
+        </div>
 
-        <b-card-text
-          v-if="block.description"
-          class="text-dark text-truncate"
-          :class="{ 'mt-1': block.title }"
-        >
-          {{ block.description }}
-        </b-card-text>
-      </div>
-    </template>
-
-    <template #default>
-      <split
-        v-if="showDisplayElements"
-        ref="split"
-        :direction="block.layout"
-        :gutter-size="12"
-        class="h-100"
-        @onDragEnd="setDisplayElementSizes"
-      >
-        <split-area
-          v-for="(element, displayElementIndex) in block.elements"
-          :key="displayElementIndex"
-          :size="element.meta.size"
-          :min-size="0"
-          :class="{
-            'overflow-hidden h-100': element.kind !== 'Text',
-            'w-100': block.elements.length === 1,
+        <display-element
+          v-else
+          :display-element="element"
+          :labels="{
+            previous: $t('display-element:table.view.previous'),
+            next: $t('display-element:table.view.next'),
           }"
-          class="position-relative"
-        >
-          <div
-            v-if="processing"
-            class="d-flex align-items-center justify-content-center h-100"
-          >
-            <b-spinner />
-          </div>
-
-          <display-element
-            v-else
-            :display-element="element"
-            :labels="{
-              previous: $t('display-element:table.view.previous'),
-              next: $t('display-element:table.view.next'),
-            }"
-            @update="updateDataframes({ displayElementIndex, definition: $event })"
-          />
-        </split-area>
-      </split>
-    </template>
+          @update="updateDataframes({ displayElementIndex, definition: $event })"
+        />
+      </split-area>
+    </split>
   </wrap>
 </template>
 

lib/js/src/compose/types/page-block/calendar/page-block.ts

@@ -36,7 +36,7 @@ class CalendarOptions {
   public header: Partial<CalendarOptionsHeader> = {}
   public locale = 'en-gb'
   public refreshRate = 0
-  public refreshEnabled = false
+  public showRefresh = false
   public magnifyOption = ''
 }
 
@@ -61,7 +61,7 @@ export class PageBlockCalendar extends PageBlock {
     if (!o) return
     Apply(this.options, o, Number, 'refreshRate')
 
-    Apply(this.options, o, Boolean, 'refreshEnabled')
+    Apply(this.options, o, Boolean, 'showRefresh')
 
     Apply(this.options, o, String, 'magnifyOption')
 

lib/js/src/compose/types/page-block/chart.ts

@@ -6,7 +6,7 @@ const kind = 'Chart'
 interface Options {
   chartID: string;
   refreshRate: number;
-  refreshEnabled: boolean;
+  showRefresh: boolean;
   magnifyOption: string;
 }
 
@@ -14,7 +14,7 @@ const defaults: Readonly<Options> = Object.freeze({
   chartID: NoID,
   refreshRate: 0,
   magnifyOption: '',
-  refreshEnabled: false,
+  showRefresh: false,
 })
 
 export class PageBlockChart extends PageBlock {
@@ -32,7 +32,7 @@ export class PageBlockChart extends PageBlock {
 
     Apply(this.options, o, CortezaID, 'chartID')
     Apply(this.options, o, Number, 'refreshRate')
-    Apply(this.options, o, Boolean, 'refreshEnabled')
+    Apply(this.options, o, Boolean, 'showRefresh')
     Apply(this.options, o, String, 'magnifyOption')
   }
 }

lib/js/src/compose/types/page-block/comment.ts

@@ -10,7 +10,7 @@ interface Options {
   referenceField: string;
   sortDirection: string;
   refreshRate: number;
-  refreshEnabled: boolean;
+  showRefresh: boolean;
   magnifyOption: string;
 }
 
@@ -22,7 +22,7 @@ const defaults: Readonly<Options> = Object.freeze({
   sortDirection: '',
   referenceField: '',
   refreshRate: 0,
-  refreshEnabled: false,
+  showRefresh: false,
   magnifyOption: '',
 })
 
@@ -41,7 +41,7 @@ export class PageBlockComment extends PageBlock {
     Apply(this.options, o, CortezaID, 'moduleID')
     Apply(this.options, o, String, 'titleField', 'contentField', 'referenceField', 'filter', 'sortDirection', 'magnifyOption')
     Apply(this.options, o, Number, 'refreshRate')
-    Apply(this.options, o, Boolean, 'refreshEnabled')
+    Apply(this.options, o, Boolean, 'showRefresh')
   }
 }
 

lib/js/src/compose/types/page-block/iframe.ts

@@ -8,7 +8,7 @@ interface Options {
   src: string;
   wrap: PageBlockWrap;
   refreshRate: number;
-  refreshEnabled: boolean;
+  showRefresh: boolean;
   magnifyOption: string;
 }
 
@@ -17,7 +17,7 @@ const defaults: Readonly<Options> = Object.freeze({
   src: '',
   wrap: 'Plain',
   refreshRate: 0,
-  refreshEnabled: false,
+  showRefresh: false,
   magnifyOption: '',
 })
 
@@ -36,7 +36,7 @@ export class PageBlockIFrame extends PageBlock {
 
     Apply(this.options, o, String, 'srcField', 'src', 'wrap', 'magnifyOption')
     Apply(this.options, o, Number, 'refreshRate')
-    Apply(this.options, o, Boolean, 'refreshEnabled')
+    Apply(this.options, o, Boolean, 'showRefresh')
   }
 }
 

lib/js/src/compose/types/page-block/metric.ts

@@ -41,13 +41,13 @@ interface Metric {
 interface Options {
   metrics: Array<Metric>;
   refreshRate: number;
-  refreshEnabled: boolean;
+  showRefresh: boolean;
 }
 
 const defaults: Readonly<Options> = Object.freeze({
   metrics: [],
   refreshRate: 0,
-  refreshEnabled: false,
+  showRefresh: false,
 })
 
 export class PageBlockMetric extends PageBlock {
@@ -63,7 +63,7 @@ export class PageBlockMetric extends PageBlock {
   applyOptions (o?: Partial<Options>): void {
     if (!o) return
     Apply(this.options, o, Number, 'refreshRate')
-    Apply(this.options, o, Boolean, 'refreshEnabled')
+    Apply(this.options, o, Boolean, 'showRefresh')
     if (o.metrics) {
       this.options.metrics = o.metrics
     }

lib/js/src/compose/types/page-block/progress.ts

@@ -34,7 +34,7 @@ interface Options {
   maxValue: ValueOptions;
   display: DisplayOptions;
   refreshRate: number;
-  refreshEnabled: boolean;
+  showRefresh: boolean;
 }
 
 const defaults: Readonly<Options> = Object.freeze({
@@ -71,7 +71,7 @@ const defaults: Readonly<Options> = Object.freeze({
     thresholds: [],
   },
   refreshRate: 0,
-  refreshEnabled: false,
+  showRefresh: false,
 })
 
 export class PageBlockProgress extends PageBlock {
@@ -88,7 +88,7 @@ export class PageBlockProgress extends PageBlock {
     if (!o) return
 
     Apply(this.options, o, Number, 'refreshRate')
-    Apply(this.options, o, Boolean, 'refreshEnabled')
+    Apply(this.options, o, Boolean, 'showRefresh')
 
     if (o.value) {
       this.options.value = { ...this.options.value, ...o.value }

lib/js/src/compose/types/page-block/record-list.ts

@@ -30,7 +30,7 @@ interface Options {
   showTotalCount: boolean;
   showDeletedRecordsOption: boolean;
   refreshRate: number;
-  refreshEnabled: boolean;
+  showRefresh: boolean;
 
   // Record-lines
   editable: boolean;
@@ -94,7 +94,7 @@ const defaults: Readonly<Options> = Object.freeze({
 
   selectionButtons: [],
   refreshRate: 0,
-  refreshEnabled: false,
+  showRefresh: false,
 })
 
 export class PageBlockRecordList extends PageBlock {
@@ -146,7 +146,7 @@ export class PageBlockRecordList extends PageBlock {
       'editable',
       'draggable',
       'linkToParent',
-      'refreshEnabled',
+      'showRefresh',
     )
 
     if (o.selectionButtons) {

lib/js/src/compose/types/page-block/record-organizer.ts

@@ -11,7 +11,7 @@ interface Options {
   groupField: string;
   group: string;
   refreshRate: number;
-  refreshEnabled: boolean;
+  showRefresh: boolean;
 }
 
 const defaults: Readonly<Options> = Object.freeze({
@@ -23,7 +23,7 @@ const defaults: Readonly<Options> = Object.freeze({
   groupField: '',
   group: '',
   refreshRate: 0,
-  refreshEnabled: false,
+  showRefresh: false,
 })
 
 export class PageBlockRecordOrganizer extends PageBlock {
@@ -42,7 +42,7 @@ export class PageBlockRecordOrganizer extends PageBlock {
     Apply(this.options, o, CortezaID, 'moduleID')
     Apply(this.options, o, String, 'labelField', 'descriptionField', 'filter', 'positionField', 'groupField', 'group')
     Apply(this.options, o, Number, 'refreshRate')
-    Apply(this.options, o, Boolean, 'refreshEnabled')
+    Apply(this.options, o, Boolean, 'showRefresh')
   }
 }
 

lib/js/src/compose/types/page-block/record-revisions.ts

@@ -17,7 +17,7 @@ interface Options {
   // referenced fields (records, users) we want to expand
   expRefFields: string[];
   refreshRate: number;
-  refreshEnabled: boolean;
+  showRefresh: boolean;
   magnifyOption: string;
 }
 
@@ -26,7 +26,7 @@ const defaults: Readonly<Options> = Object.freeze({
   displayedFields: [],
   expRefFields: [],
   refreshRate: 0,
-  refreshEnabled: false,
+  showRefresh: false,
   magnifyOption: '',
 })
 
@@ -43,7 +43,7 @@ export class PageBlockRecordRevisions extends PageBlock {
   applyOptions (o?: Partial<Options>): void {
     if (!o) return
 
-    Apply(this.options, o, Boolean, 'preload', 'refreshEnabled')
+    Apply(this.options, o, Boolean, 'preload', 'showRefresh')
     Apply(this.options, o, Number, 'refreshRate')
     Apply(this.options, o, String, 'magnifyOption')
 

lib/js/src/compose/types/page-block/report.ts

@@ -8,7 +8,7 @@ interface Options {
   scenarioID: string;
   elementID: string;
   refreshRate: number;
-  refreshEnabled: boolean;
+  showRefresh: boolean;
   magnifyOption: string;
 }
 
@@ -17,7 +17,7 @@ const defaults: Readonly<Options> = Object.freeze({
   scenarioID: NoID,
   elementID: NoID,
   refreshRate: 0,
-  refreshEnabled: false,
+  showRefresh: false,
   magnifyOption: '',
 })
 
@@ -36,7 +36,7 @@ export class PageBlockReport extends PageBlock {
 
     Apply(this.options, o, CortezaID, 'reportID', 'scenarioID', 'elementID')
     Apply(this.options, o, Number, 'refreshRate')
-    Apply(this.options, o, Boolean, 'refreshEnabled')
+    Apply(this.options, o, Boolean, 'showRefresh')
     Apply(this.options, o, String, 'magnifyOption')
   }
 }

lib/js/src/compose/types/page-block/social-feed.ts

@@ -7,7 +7,7 @@ interface Options {
   fields: unknown[];
   profileSourceField: string;
   profileUrl: string;
-  refreshEnabled: boolean;
+  showRefresh: boolean;
   refreshRate: number;
 }
 
@@ -16,7 +16,7 @@ const defaults: Readonly<Options> = Object.freeze({
   fields: [],
   profileSourceField: '',
   profileUrl: '',
-  refreshEnabled: false,
+  showRefresh: false,
   refreshRate: 0,
 })
 
@@ -36,7 +36,7 @@ export class PageBlockSocialFeed extends PageBlock {
     Apply(this.options, o, CortezaID, 'moduleID')
     Apply(this.options, o, String, 'profileSourceField', 'profileUrl')
     Apply(this.options, o, Number, 'refreshRate')
-    Apply(this.options, o, Boolean, 'refreshEnabled')
+    Apply(this.options, o, Boolean, 'showRefresh')
 
     if (o.fields) {
       this.options.fields = o.fields

locale/en/corteza-webapp-compose/block.yaml

@@ -120,8 +120,9 @@ general:
     fullscreen: Fullscreen
   wrap: Display block as a card
   refresh:
-    enabled: Enabled
     label: Refresh
+    auto: Auto refresh
+    show: Show refresh button
     description: Setting value to 5 seconds or more enables auto-refresh
     rate: seconds
   label: