Framework 4.3.0 Released 🌈

Announcements
1

New update arrived:

Full changelog:

  • Core
    • Color Picker - all new modular Color Picker component :tada:
    • Auto Dark Theme
      • Now it can be set automatically based on user system color scheme preference (where supported). To enable autoDarkTheme: true must be passed to app init parameters
      • New app.enableAutoDarkTheme() to enable this feature manually (where supported)
      • New app.disableAutoDarkTheme() to disable this feature manually
    • Panel
      • Now side panels can be resizable :confetti_ball:. Requires panel-resizable class on panel element to enable
    • Device
      • New prefersColorScheme() that returns dark or light where supported, or undefined where not supported
    • Cards
      • Fixed issue whith “jumpy” layout when expandable card closes on iOS
    • Navbar
      • New navbar:hide and navbar:show events when navbar hidden/shown
      • New navbar:collapse and navbar:expand events when navbar collapsed/expanded to large title navbar
    • Popover
      • New closeOnEscape parameter to allow to close it when ESC keyboard key pressed (disabled by default)
      • New backdropEl parameter to pass custom backdrop element
      • Now it won’t be closed on backdrop click if onscreen keyboard opened (requires cordova keyboard plugin)
      • Now it will be repositioned when onscreen keyboard opens and closes (requires cordova keyboard plugin)
      • Reworked/tweaked positioning in MD theme
    • Popup
      • New closeOnEscape parameter to allow to close it when ESC keyboard key pressed (disabled by default)
      • New backdropEl parameter to pass custom backdrop element
      • Now it won’t be closed on backdrop click if onscreen keyboard opened (requires cordova keyboard plugin)
    • Actions
      • New closeOnEscape parameter to allow to close it when ESC keyboard key pressed (disabled by default)
      • New backdropEl parameter to pass custom backdrop element
      • Now it won’t be closed on backdrop click if onscreen keyboard opened (requires cordova keyboard plugin)
    • Sheet
      • New closeOnEscape parameter to allow to close it when ESC keyboard key pressed (disabled by default)
      • New backdropEl parameter to pass custom backdrop element
      • Now it won’t be closed on backdrop click if onscreen keyboard opened (requires cordova keyboard plugin)
      • Now it can be opened from top (instead of bottom) by adding sheet-modal-top class to sheet modal element
    • Stepper
      • Reworked RTL layout to be in same direction as in LTR
    • Request
      • Now it automatically set Accept: 'application/json' header when dataType: 'json' parameter passed
    • Touch
      • Fixed issue with not-removed touch-ripple with very fast clicks or multi-touch
    • Utils
      • New utils.colorHsbToHsl(h, s, b) method to convert HSB(V) color to HSL color
      • New utils.colorHslToHsb(h, s, l) method to convert HSL color to HSB(V) color
  • Phenome
    • Panel
      • New resizable prop to enable resizable panel
    • Navbar
      • New navbar:hide/navbarHide and navbar:show/navbarShow events when navbar hidden/shown
      • New navbar:collapse/navbarCollapse and navbar:expand/navbarExpand events when navbar collapsed/expanded to large title navbar
    • Popover
      • Added backdrop prop to enable/disable backdrop
      • New closeOnEscape prop to allow to close it when ESC keyboard key pressed (disabled by default)
      • New backdropEl prop to pass custom backdrop element
    • Popup
      • New closeOnEscape prop to allow to close it when ESC keyboard key pressed (disabled by default)
      • New backdropEl prop to pass custom backdrop element
    • Actions
      • Added backdrop prop to enable/disable backdrop
      • New closeOnEscape prop to allow to close it when ESC keyboard key pressed (disabled by default)
      • New backdropEl prop to pass custom backdrop element
    • Sheet
      • New closeOnEscape prop to allow to close it when ESC keyboard key pressed (disabled by default)
      • New backdropEl prop to pass custom backdrop element
      • New position prop, can be top or bottom (default) to define how to open Sheet
      • New top prop, alias for position="top"
      • New bottom prop, alias for position="bottom"
    • ListInput / Input
      • Now it accepts special type colorpicker to open color picker on focus
      • New prop colorPickerParams to specify color picker params for colorpicker type
    • SwipeoutButton
      • New confirmTitle prop to set confirm dialog title
  • Lots of minor fixes and improvements
8 Likes
2

Thanks for this beautifull Color Picker!!! :+1::rainbow::tada::tada::tada:

3

Color Picker штука крутая, но ни разу она мне не понадобилась, хотя еще с 1.0 пишу :frowning:

На мой взгляд еще крайне нужны методы по смене темы вручную, даже это нужнее, чем автосмена. Я делаю так:

setLayoutTheme : function (type) {
            if (type != 'light') {
                this.statusbar.setTextColor('white');
                this.statusbar.setBackgroundColor('#1B1B1B');
            } else {
                this.statusbar.setTextColor('black');
                this.statusbar.setBackgroundColor('');
            }
            this.root.removeClass('theme-dark theme-light').addClass('theme-' + type);
        },
1 Like
4

c CSS vars это делается легко, например вот

5

Чтобы поменять тему нужно добавить / удалить нужный класс, примерно также делает 4.3.0 https://github.com/framework7io/framework7/blob/ba42f15984aec9e605bcfca5b9189686b6ff450c/src/core/components/app/app-class.js#L153 при чем тут CSS-переменные?

Мой пример еще меняет цвет statusbar под Кордовой

6

Про смену тёмное и светлой темы да, меняем класс и всё готово, но вот если цвета динамические/настраиваемые то проще менять глобальные переменные цвета