Framework7 4.2.0 Released! Meet Aurora

nolimits4web · March 20, 2019, 7:32pm

Hey guys! 4.2.0 update arrived with new Aurora desktop theme.

Blog post

Changelog

All new Aurora theme!
Core
- New Appbar component
- Button
  - New button-round-aurora, button-raised-aurora, button-fill-aurora, button-small-aurora, button-large-aurora, button-outline-aurora modifier classes for Aurora theme
- Cards
  - Now it is possible to specify custom expandable card backdrop element with data-backrop-el attribute on card
- Device
  - New device.electron property which is true when app runs in Electron environment
- List Index
  - New auroraItemHeight parameter to specify item height in Aurora theme
- Navbar
  - New auroraCenterTitle parameter (enabled by default) to position title at the center in Aurora theme.
- Panel
  - New app.panel.toggle(side, animate) method to toggle (open or close) specified panel
  - New panel.toggle(animate) method to toggle (open or close) current panel
  - Support for panel-toggle class on links to toggle panels
- Picker
  - New mousewheel parameter (enabled by default) to scroll picker values with mousewheel
  - New updateValuesOnMousewheel parameter (enabled by default) to updates picker and input values during mousewheel scrolling
- Pull To Refresh
  - Added mousewheel support with additional data-ptr-mousewheel="true" attribute on PTR content element
- Searchbar
  - New Inline Searchbar to fit it better within other components. Can be enabled by adding searchbar-inline class to searchbar
- Stepper
  - New stepper-round-aurora, stepper-raised-aurora, stepper-fill-aurora, stepper-small-aurora, stepper-large-aurora modifier classes for Aurora theme
- Toolbar
  - New toolbar-top-aurora and toolbar-bottom-aurora modifier classes for Aurora theme
- Touch
  - Not it is possible to prevent active state bubbling on nested active-state elements with additional prevent-active-state-propagation class on nested active-state element
  - Improved clicks handling with Apple Pencil
- Typography
  - New half-value margin and padding classes: margin-half, margin-left-half, margin-right-half, margin-top-half, margin-bottom-half, margin-horizontal-half, margin-vertical-half, padding-half, padding-left-half, padding-right-half, padding-top-half, padding-bottom-half, padding-horizontal-half, padding-vertical-half
- View / Router
  - Router component’s $theme object now contains boolean aurora property which is true for Aurora theme
  - New Aurora-related parameters: auroraPageLoadDelay, auroraSwipeBack, auroraSwipeBackThreshold, auroraSwipeBackActiveArea, auroraSwipeBackAnimateShadow, auroraSwipeBackAnimateOpacity
  - Fixed VDOM rendering with SVG elements
Phenome
- React and Vue’s component prototype $themeobject now contains boolean aurora property which is true for Aurora theme
- New Appbar component
- Button
  - New Aurora related modifier props: raisedAurora, roundAurora, largeAurora, smallAurora, fillAurora, outlineAurora
- Icon
  - New aurora prop to specify icon for Aurora theme
- Link
  - New iconAurora prop to specify icon for Aurora theme
- ListIndex
  - New auroraItemHeight prop to specify item height in Aurora theme
- Navbar
  - New boolean backLinkForce prop to load and ignore previous page in history
  - New boolean backLinkShowText prop to hide or show back button text. By default disable for MD theme
- Page
  - New ptrMousewheel prop to make PTR work with mousewheel
- Searchbar
  - New inline boolean prop to enable inline searchbar
- Stepper
  - New Aurora related modifier props: raisedAurora, roundAurora, largeAurora, smallAurora, fillAurora
  - New iconAurora prop to specify icon for Aurora theme
- Toolbar
  - New topAurora and bottomAurora boolean props to set Toolbar position for Aurora theme
Lots of minor fixed and improvements

nolimits4web · March 20, 2019, 7:42pm

Max · March 21, 2019, 8:25am

@nolimits4web… awesome! Congrats!

kozmanbalint · March 21, 2019, 9:09am

Brilliant! What an excellent release especially with Aurora!

Alein · March 21, 2019, 1:46pm

Exactly what is needed! This is a big job!
Congratulations and thanks!

spiffyguy · March 22, 2019, 2:56pm

Very exciting! I can’t wait to work on a desktop app with Electron and this framework. Keep up the great work!

tiptronic · March 25, 2019, 9:52am

Now that there is Aurora, it would be nice if there was a Electron boilerplate which includes F7 (F7/Vue, F7/React) and is re-useable

nolimits4web · March 25, 2019, 11:34am

Yes, yes. This is on my list. But the question here is which way of doing it we need to choose here.

Cordova recently added Electron support so I can just add “electron” platform and this is it, and couple new electron based app icons. This is most simple way and it won’t required any additional build steps and workflow changes. So most of config happens in same config.xml file.

But I guess here could be some limitations on Electron main process customization.

So other way is to add standalone Electron project generation, which will not produce any limitations. But it will be one more workflow.

Would be good to hear opinions of someone who tried both pure electron and cordova-electron. Maybe @gpetrov have more experience with them?

gpetrov · March 25, 2019, 11:49am

Well for all desktop apps that we have build with Electron or NWJS - the biggest challenge was always to get the installers and signing right. Also being able to submit to Mac AppStore/Windows App store is always a challenge - specially with NWJS.

Now with Cordova supporting Electron - you get installers out of the box! and also App Store deployments and signing! A developer dream comes true!

See:

github.com

apache/cordova-electron/blob/rel/1.0.2/DOCUMENTATION.md

<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->

# Cordova Electron

This file has been truncated. show original

So now together with the great Framework7 and its Aurora theme, we can finally build full blown desktop apps, with installers and app stores support!

Of course Aurora has still a bit way to go to support more UI controls used more commonly on desktop, like resizable panels, containing toolbars, tabs, gris, forms, with auto sizing properties (more like http://w2ui.com/web/)

But I heard @nolimits4web is already working on this - so we are all set!

tiptronic · March 25, 2019, 12:02pm

WOW - this is great news!! I didn’t know Cordova supports electron! So I will check that first!
I also stumbled across this cli-project:

which looks promising - but it seems cordova-electron sounds even better