feat(QScrollArea): Remove now obsolete prop "force-on-mobile" (it's on by default); Add "dark" prop

Author: rstoenescu

ui/dev/src/pages/components/scroll-area.vue

@@ -2,10 +2,10 @@
   <div class="q-layout-padding">
     <q-toggle v-model="horizontal" label="Horizontal" />
     <q-toggle v-model="customStyle" label="Custom style" />
-    <q-toggle v-model="forceOnMobile" label="Force on mobile" />
     <q-checkbox v-model="alwaysVisible" toggle-indeterminate label="Always visible" />
 
     <div style="height: 300px;" />
+
     <q-scroll-area
       ref="scroll"
       style="width: 400px; height: 500px;"
@@ -14,12 +14,29 @@
       :visible="alwaysVisible"
       :bar-style="customStyle === true ? customBarStyle : void 0"
       :thumb-style="customStyle === true ? customThumbStyle : void 0"
-      :force-on-mobile="forceOnMobile"
     >
       <div :class="{ 'flex no-wrap' : horizontal }">
         <div style="margin-top: 150px" />
         <div style="margin-bottom: 25px" :style="horizontal ? 'width: 160px' : ''" v-for="n in number" :key="n">
-          {{ n }} Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <q-btn>Click</q-btn>
+          {{ n }} Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          <q-btn label="Click" color="primary" />
+        </div>
+      </div>
+    </q-scroll-area>
+
+    <q-scroll-area
+      ref="scroll"
+      style="width: 400px; height: 500px;"
+      class="bg-dark text-white q-mt-lg"
+      :horizontal="horizontal"
+      :visible="alwaysVisible"
+      dark
+    >
+      <div :class="{ 'flex no-wrap' : horizontal }">
+        <div style="margin-top: 150px" />
+        <div style="margin-bottom: 25px" :style="horizontal ? 'width: 160px' : ''" v-for="n in number" :key="n">
+          {{ n }} Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          <q-btn label="Click" color="primary" />
         </div>
       </div>
     </q-scroll-area>
@@ -49,8 +66,7 @@ export default {
       number: 10,
       horizontal: false,
       alwaysVisible: true,
-      customStyle: true,
-      forceOnMobile: false
+      customStyle: true
     }
   },
 

ui/src/components/scroll-area/QScrollArea.js

@@ -8,17 +8,18 @@ import { cache } from '../../utils/vm.js'
 import QResizeObserver from '../resize-observer/QResizeObserver.js'
 import QScrollObserver from '../scroll-observer/QScrollObserver.js'
 import TouchPan from '../../directives/TouchPan.js'
+import DarkMixin from '../../mixins/dark.js'
 
 export default Vue.extend({
   name: 'QScrollArea',
 
+  mixins: [ DarkMixin ],
+
   directives: {
     TouchPan
   },
 
   props: {
-    forceOnMobile: Boolean,
-
     barStyle: [ Array, String, Object ],
     thumbStyle: Object,
     contentStyle: [ Array, String, Object ],
@@ -55,6 +56,11 @@ export default Vue.extend({
   },
 
   computed: {
+    classes () {
+      return 'q-scrollarea' +
+        (this.isDark === true ? ' q-scrollarea--dark' : '')
+    },
+
     thumbHidden () {
       return this.scrollSize <= this.containerSize ||
         (this.active === false && this.hover === false)
@@ -78,7 +84,8 @@ export default Vue.extend({
         this.horizontal === true
           ? {
             left: `${pos}px`,
-            width: `${this.thumbSize}px` }
+            width: `${this.thumbSize}px`
+          }
           : {
             top: `${pos}px`,
             height: `${this.thumbSize}px`
@@ -104,9 +111,7 @@ export default Vue.extend({
     },
 
     containerSize () {
-      return this.horizontal === true
-        ? this.containerWidth
-        : this.containerHeight
+      return this[`container${this.horizontal === true ? 'Width' : 'Height'}`]
     },
 
     dirProps () {
@@ -239,20 +244,8 @@ export default Vue.extend({
   },
 
   render (h) {
-    if (this.forceOnMobile !== true && this.$q.platform.is.desktop !== true) {
-      return h('div', {
-        staticClass: 'q-scrollarea',
-        style: this.contentStyle
-      }, [
-        h('div', {
-          ref: 'target',
-          staticClass: 'scroll relative-position fit'
-        }, slot(this, 'default'))
-      ])
-    }
-
     return h('div', {
-      staticClass: 'q-scrollarea',
+      class: this.classes,
       on: this.visible === null
         ? cache(this, 'desk', {
           mouseenter: () => { this.hover = true },

ui/src/components/scroll-area/QScrollArea.json

@@ -4,6 +4,11 @@
   },
 
   "props": {
+    "dark": {
+      "extends": "dark",
+      "addedIn": "v1.9.0"
+    },
+
     "bar-style": {
       "type": [ "Array", "String", "Object"],
       "desc": "Object with CSS properties and values for styling the custom scrollbar",
@@ -52,13 +57,6 @@
       "type": "Boolean",
       "desc": "Register for horizontal scroll instead of vertical (which is default)",
       "category": "behavior"
-    },
-
-    "force-on-mobile": {
-      "type": "Boolean",
-      "desc": "Use custom scrollbar on mobile too; The scroll area will not benefit from inertial scrolling on mobile",
-      "category": "behavior",
-      "addedIn": "v1.5.11"
     }
   },
 

ui/src/components/scroll-area/QScrollArea.sass

@@ -30,3 +30,6 @@
     &--invisible
       &:hover
         cursor: inherit
+
+  &--dark .q-scrollarea__thumb
+    background: #fff

ui/src/components/scroll-area/QScrollArea.styl

@@ -30,3 +30,6 @@
     &--invisible
       &:hover
         cursor: inherit
+
+  &--dark .q-scrollarea__thumb
+    background: #fff