phonegap / phonegap-roadmap

Upcoming milestones and projects for PhoneGap
4 stars 6 forks source link

Spectrum theme for Topcoat #147

Open mwbrooks opened 7 years ago

mwbrooks commented 7 years ago

Description

This is a proof-of-concept using the Topcoat framework to add a lightweight CSS implementation that is functional framework agnostic.

Follow

mwbrooks commented 7 years ago

@GarthDB anything to link, show, report, etc?

mwbrooks commented 7 years ago

@GarthDB perhaps we can create a private discuss topic if we're concerned about open discussion?

GarthDB commented 7 years ago

So my first thing I'm fixing is the telemetry tests. I currently have the loading test working again in a more stable way than before. I'm currently implementing the scrolling smoothness test then we can automate them.

GarthDB commented 7 years ago

Here's a recording of the page loading speed benchmark tool - http://recordit.co/OX8sBXSnIm

GarthDB commented 7 years ago

Here's a new recording with a scroll speed performance analysis and benchmark added http://recordit.co/p2NsaXY7Eq

GarthDB commented 7 years ago

Sample output image

GarthDB commented 7 years ago

To fix some conflicting issues between tests, I rearchitected the tool to use plugins.

GarthDB commented 7 years ago

And published them to npm.

GarthDB commented 7 years ago

Going to publish a blog post describing the project and how to use it.

mwbrooks commented 7 years ago

@jahoni would like to do an inventory of Spectrum and how many will translate over to mobile (at a first look).

@GarthDB and @jahoni are going to meet up this week around it.

mwbrooks commented 7 years ago

We are working openly with other Adobe teams around this UI work. Tommy and Garth are making good progress on it.

mwbrooks commented 7 years ago

Build process is updated and we're now looking into React (component) integration. This work will enable integration with any JS framework and using React as the use-case.

mwbrooks commented 7 years ago

Workin towards consuming / using Spectrum CSS for the Topcoat theme.

mwbrooks commented 7 years ago

Spectrum CSS will be adopting Topdoc.

stevengill commented 7 years ago

@GarthDB still meeting with spectrum folks regularly. They are implementing topdoc. They are thinking of switching over to topcoat.

GarthDB commented 7 years ago

Implemented spectrum button into preact storybook - started on select and tab-bar. spectrum-button

mwbrooks commented 7 years ago

@GarthDB

GarthDB commented 7 years ago

Tab Bar: image

GarthDB commented 7 years ago

kmjpz8deru

mwbrooks commented 7 years ago

Officially we're going to publish this as topcoat-adobe-ui-theme (Github and npm) based on a discussion with the Spectrum team.

mwbrooks commented 7 years ago

@GarthDB

GarthDB commented 7 years ago

published https://www.npmjs.com/package/adobe-mobile-ui added combobox

image

GarthDB commented 7 years ago

Updated Navigation Bar image

Updated Combobox image

Updated Tab Bar image

GarthDB commented 7 years ago

Updated Combobox with some recommendations from @jahoni image

GarthDB commented 7 years ago

If you want to preview the html components, take a look here -

http://phonegap.com/adobe-mobile-ui/

mwbrooks commented 7 years ago

There is one component remaining to be implemented (indeterminate progress bar).