feat: ios highlights, remove obsolete support, single color photo browser

Author: nolimits4web

kitchen-sink/core/pages/photo-browser.html

@@ -32,15 +32,7 @@
           <a class="button button-fill button-round" @click=${openPage}>Page</a>
         </div>
       </div>
-      <div class="block block-strong inset">
-        <p>Photo Browser supports 2 default themes - default Light (like in previous examples) and Dark theme. Here is a
-          Dark theme examples:</p>
-        <div class="grid grid-cols-3 grid-gap">
-          <a class="button button-fill button-round" @click=${openStandaloneDark}>Standalone</a>
-          <a class="button button-fill button-round" @click=${openPopupDark}>Popup</a>
-          <a class="button button-fill button-round" @click=${openPageDark}>Page</a>
-        </div>
-      </div>
+
     </div>
   </div>
 </template>
@@ -73,9 +65,6 @@
     let standalone;
     let popup;
     let page;
-    let standaloneDark;
-    let popupDark;
-    let pageDark;
 
     const openStandalone = () => {
       standalone.open();
@@ -86,15 +75,6 @@
     const openPage = () => {
       page.open();
     }
-    const openStandaloneDark = () => {
-      standaloneDark.open();
-    }
-    const openPopupDark = () => {
-      popupDark.open();
-    }
-    const openPageDark = () => {
-      pageDark.open();
-    }
     $on('pageInit', () => {
       // Create PBs when page init
       standalone = $f7.photoBrowser.create({
@@ -112,33 +92,12 @@
         type: 'page',
         backLinkText: 'Back',
       });
-      standaloneDark = $f7.photoBrowser.create({
-        photos: photos,
-        thumbs: thumbs,
-        theme: 'dark',
-      });
-      popupDark = $f7.photoBrowser.create({
-        photos: photos,
-        thumbs: thumbs,
-        type: 'popup',
-        theme: 'dark',
-      });
-      pageDark = $f7.photoBrowser.create({
-        photos: photos,
-        thumbs: thumbs,
-        type: 'page',
-        backLinkText: 'Back',
-        theme: 'dark',
-      });
     });
     $on('pageBeforeRemove', () => {
       // Destroy PBs on page remove
       standalone.destroy();
       popup.destroy();
       page.destroy();
-      standaloneDark.destroy();
-      popupDark.destroy();
-      pageDark.destroy();
     });
 
     return $render;

src/core/components/autocomplete/autocomplete-ios.less

@@ -6,4 +6,20 @@
       margin-bottom: 12px;
     }
   }
+  .searchbar-input-wrap .autocomplete-dropdown {
+    .ios-glass();
+    margin-top: 16px;
+    border-radius: 22px;
+    .autocomplete-dropdown-inner {
+      padding-top: 0;
+    }
+    li:first-child {
+      position: relative;
+      overflow: hidden;
+      border-radius: 22px 22px 0 0;
+    }
+    li:last-child {
+      border-radius: 0 0 22px 22px;
+    }
+  }
 }

src/core/components/calendar/calendar-class.js

@@ -2,7 +2,6 @@ import { extend, nextTick, deleteProps } from '../../shared/utils.js';
 import Framework7Class from '../../shared/class.js';
 import $ from '../../shared/dom7.js';
 import { getDevice } from '../../shared/get-device.js';
-import { getSupport } from '../../shared/get-support.js';
 /** @jsx $jsx */
 import $jsx from '../../shared/$jsx.js';
 
@@ -330,9 +329,7 @@ class Calendar extends Framework7Class {
       }
 
       const passiveListener =
-        app.touchEvents.start === 'touchstart' && getSupport().passiveListener
-          ? { passive: true, capture: false }
-          : false;
+        app.touchEvents.start === 'touchstart' ? { passive: true, capture: false } : false;
       // Selectors clicks
       $el.find('.calendar-prev-month-button').on('click', onPrevMonthClick);
       $el.find('.calendar-next-month-button').on('click', onNextMonthClick);

src/core/components/calendar/calendar-ios.less

@@ -27,6 +27,9 @@
       }
     }
   }
+  .calendar-popover .toolbar {
+    overflow: visible;
+  }
   .calendar-modal {
     .ios-glass-backdrop();
   }

src/core/components/color-picker/modules/hs-spectrum.js

@@ -1,6 +1,5 @@
 import $ from '../../../shared/dom7.js';
 import { colorHsbToHsl } from '../../../shared/utils.js';
-import { getSupport } from '../../../shared/get-support.js';
 /** @jsx $jsx */
 import $jsx from '../../../shared/$jsx.js';
 
@@ -92,9 +91,7 @@ export default {
     }
 
     const passiveListener =
-      app.touchEvents.start === 'touchstart' && getSupport().passiveListener
-        ? { passive: true, capture: false }
-        : false;
+      app.touchEvents.start === 'touchstart' ? { passive: true, capture: false } : false;
 
     self.$el.on(app.touchEvents.start, handleTouchStart, passiveListener);
     app.on('touchmove:active', handleTouchMove);

src/core/components/color-picker/modules/sb-spectrum.js

@@ -1,5 +1,4 @@
 import $ from '../../../shared/dom7.js';
-import { getSupport } from '../../../shared/get-support.js';
 /** @jsx $jsx */
 import $jsx from '../../../shared/$jsx.js';
 
@@ -91,9 +90,7 @@ export default {
     }
 
     const passiveListener =
-      app.touchEvents.start === 'touchstart' && getSupport().passiveListener
-        ? { passive: true, capture: false }
-        : false;
+      app.touchEvents.start === 'touchstart' ? { passive: true, capture: false } : false;
 
     self.$el.on(app.touchEvents.start, handleTouchStart, passiveListener);
     app.on('touchmove:active', handleTouchMove);

src/core/components/color-picker/modules/wheel.js

@@ -1,5 +1,4 @@
 import $ from '../../../shared/dom7.js';
-import { getSupport } from '../../../shared/get-support.js';
 /** @jsx $jsx */
 import $jsx from '../../../shared/$jsx.js';
 
@@ -139,9 +138,7 @@ export default {
     }
 
     const passiveListener =
-      app.touchEvents.start === 'touchstart' && getSupport().passiveListener
-        ? { passive: true, capture: false }
-        : false;
+      app.touchEvents.start === 'touchstart' ? { passive: true, capture: false } : false;
 
     self.$el.on(app.touchEvents.start, handleTouchStart, passiveListener);
     app.on('touchmove:active', handleTouchMove);

src/core/components/list-index/list-index-class.js

@@ -1,7 +1,6 @@
 import $ from '../../shared/dom7.js';
 import { extend, deleteProps } from '../../shared/utils.js';
 import Framework7Class from '../../shared/class.js';
-import { getSupport } from '../../shared/get-support.js';
 
 class ListIndex extends Framework7Class {
   constructor(app, params = {}) {
@@ -184,7 +183,7 @@ class ListIndex extends Framework7Class {
         $labelEl = undefined;
       }
     }
-    const passiveListener = getSupport().passiveListener ? { passive: true } : false;
+    const passiveListener = { passive: true };
     index.attachEvents = function attachEvents() {
       $el.parents('.tab').on('tab:show', handleResize);
       $el.parents('.page').on('page:reinit', handleResize);

src/core/components/messagebar/messagebar-ios.less

@@ -17,6 +17,9 @@
     border: 1px solid var(--f7-messagebar-attachments-border-color);
     border-bottom: none;
   }
+  .messagebar-area {
+    border-radius: var(--f7-messagebar-textarea-border-radius);
+  }
   .messagebar-attachments-visible {
     .messagebar-area {
       background: var(--f7-messagebar-textarea-bg-color);

src/core/components/panel/resizable-panel.js

@@ -1,10 +1,8 @@
 import $ from '../../shared/dom7.js';
 import { extend, nextFrame } from '../../shared/utils.js';
-import { getSupport } from '../../shared/get-support.js';
 
 function resizablePanel(panel) {
   const app = panel.app;
-  const support = getSupport();
   if (panel.resizableInitialized) return;
   extend(panel, {
     resizable: true,
@@ -159,7 +157,7 @@ function resizablePanel(panel) {
   $el.addClass('panel-resizable');
 
   // Add Events
-  const passive = support.passiveListener ? { passive: true } : false;
+  const passive = { passive: true };
 
   panel.$el.on(app.touchEvents.start, '.panel-resize-handler', handleTouchStart, passive);
   app.on('touchmove:active', handleTouchMove);