Upgrading to Hybrid mode by myfrom · Pull Request #68 · Zecat/paper-stepper

myfrom · 2017-06-04T16:52:51Z

Resolves #67

I've gone through some steps of upgrading elements to Hybrid mode so they work in Polymer 1 (>1.9) and 2.0

~~The element is now pretty functional but some styles don't get applied and I'm not sure why. Please help. 😧~~

It'd also be needed to move animations to standard Web Animations API instead of neon-animations as they got deprecated.

I also would suggest to do some more testing on it before publishing, I'm not good at testing 😖.

Updated dependencies for Hybrid mode Changed content to slot and @apply(--mixin) to @apply --mixin Updated bower.json Upgrading to Hybrid mode Upgrading to Hybrid mode

Zecat · 2017-06-18T22:24:20Z

Hy, for your style problems you also have change var(--var1, --var-2) to var(--var1, var(--var2)), hope it helps!

myfrom · 2017-07-14T17:54:18Z

Sorry for late response. Thanks for advice! But seems like you have already implemented hybrid mode so I think you can now close this PR.

thetaPC · 2017-07-18T18:12:05Z

paper-stepper.html

 <link rel="import" href="animations/fade-in-slide-from-left-animation.html">
 <link rel="import" href="animations/fade-out-slide-left-animation.html">
 <link rel="import" href="paper-step.html">
+<link rel="import" href="../bower_components/neon-animation/web-animation.html">


Replace:
<link rel="import" href="../bower_components/neon-animation/web-animation.html">
with:
<link rel="import" href="../neon-animation/web-animations.html">
It complains that the path doesn't exist and it also lacks the s at the end of animations.

WillHutt · 2017-07-18T19:03:42Z

@myfrom With the changes @thetaPC recommended and @Zecat said for the styles it solves the issue. Would heavily recommend trying to get your branch pushed for the hybrid mode as it is better then the current one imo. The style changes need to be done in the step-label-shared-styles.html.

myfrom · 2017-07-18T19:06:45Z

Thanks for suggestions, everyone! I'm gonna work on it tomorrow.

WillHutt · 2017-07-18T19:06:53Z

step-label-shared-styles.html

+        @apply --layout-flex;
      }
      #textWrapper {
        color: var(--paper-step-disabled-label-text-color, --paper-grey-400);


#textWrapper {
color: var(--paper-step-disabled-label-text-color, var(--paper-grey-400));

WillHutt · 2017-07-18T19:07:41Z

step-label-shared-styles.html

@@ -50,8 +50,8 @@
        border-radius: 50%;
        color: var(--paper-step-badge-color, --dark-theme-text-color);


border-radius: 50%;
color: var(--paper-step-badge-color, var(--dark-theme-text-color));

thetaPC · 2017-07-18T20:37:12Z

Also add this
"iron-menu-behavior": "PolymerElements/iron-menu-behavior#^2.0.0"
in bower.json
It also complains without it.

Very excited to getting this version of the hybrid completed. The current one is still a prototype and lacks a few components.

myfrom · 2017-07-19T15:48:42Z

Sorry for breaking my promise but I won't be able to push it today 😞
I'm going on a trip tomorrow morning and will try to push it as soon as I get stable internet tomorrow.
Sorry once again

Link also has the correct file name.

After bower install, the site couldn't find iron-menu-behavior. I had to install it seperately to get it working. However, I'm still new to the bower.json. So I'm not sure if where I placed it is the best.

Updated the styles

Fixed dependencies

myfrom · 2017-07-20T19:18:37Z

OK, so I merged all PRs to my code (Huge thanks for them!) but the vertical option doesn't seem to work I'm looking into it right now

thetaPC · 2017-07-20T20:39:39Z

Awesome!
I did notice when using the browser's device emulator (Chrome and Firefox), not all the default phones would work.

rjcorwin · 2017-08-29T19:51:12Z

Is this PR better than the current state of things?

thetaPC · 2017-08-30T07:37:58Z

@rjsteinert I will say that myfrom's version is way better than the original. I ended up using it for my internship. They were really pleased with it and we were using Polymer 2.

myfrom · 2017-09-03T18:46:57Z

So a little update: I have checked a bit on my local machine and I found out that both mine and Zecat's hybrid version (Polymer-2 or hybrid-modular-prototype respectively) seems to work the same. However, there are huge code changes in Zecat's version (at least on diffs) as opposed to my approach with minimal changes. I think this could be safely merged to master now without breaking anything and having great compatibility with other PRs. Could you tell what do you think about it, @Zecat?

thetaPC · 2021-07-16T16:30:28Z

It's been many years since then. Have we considered closing out this PR due to inactivity?

Zecat and others added 3 commits June 4, 2017 16:37

v2.0-beta.5

221815a

Updated dependencies for Hybrid mode Changed content to slot and @apply(--mixin) to @apply --mixin Updated bower.json Upgrading to Hybrid mode Upgrading to Hybrid mode

Upgrading to Hybrid mode

5894c99

Importing Web Animations polyfill

b28b43d

myfrom changed the title ~~[DON'T MERGE] Upgrading to Hybrid mode (#67)~~ [DON'T MERGE][Help needed] Upgrading to Hybrid mode (#67) Jun 4, 2017

myfrom changed the title ~~[DON'T MERGE][Help needed] Upgrading to Hybrid mode (#67)~~ [DON'T MERGE][Help needed] Upgrading to Hybrid mode Jun 4, 2017

thetaPC reviewed Jul 18, 2017

View reviewed changes

WillHutt reviewed Jul 18, 2017

View reviewed changes

Maria Loza and others added 5 commits July 19, 2017 14:28

Link now points to the appropriate destination upon bower install.

84f3743

Link also has the correct file name.

Added iron-menu-behavior component.

c73ff74

After bower install, the site couldn't find iron-menu-behavior. I had to install it seperately to get it working. However, I'm still new to the bower.json. So I'm not sure if where I placed it is the best.

Updated the styles

57e75e4

Merge pull request #3 from IceCube1333/Style-Changes

19513f8

Updated the styles

Merge pull request #2 from thetaPC/dependency

6535f39

Fixed dependencies

myfrom changed the title ~~[DON'T MERGE][Help needed] Upgrading to Hybrid mode~~ Upgrading to Hybrid mode Sep 3, 2017

		@@ -50,8 +50,8 @@
		border-radius: 50%;
		color: var(--paper-step-badge-color, --dark-theme-text-color);

Conversation

myfrom commented Jun 4, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Zecat commented Jun 18, 2017

Uh oh!

myfrom commented Jul 14, 2017

Uh oh!

thetaPC Jul 18, 2017

Choose a reason for hiding this comment

Uh oh!

WillHutt commented Jul 18, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

myfrom commented Jul 18, 2017

Uh oh!

WillHutt Jul 18, 2017

Choose a reason for hiding this comment

Uh oh!

WillHutt Jul 18, 2017

Choose a reason for hiding this comment

Uh oh!

thetaPC commented Jul 18, 2017

Uh oh!

myfrom commented Jul 19, 2017

Uh oh!

myfrom commented Jul 20, 2017

Uh oh!

thetaPC commented Jul 20, 2017

Uh oh!

rjcorwin commented Aug 29, 2017

Uh oh!

thetaPC commented Aug 30, 2017

Uh oh!

myfrom commented Sep 3, 2017

Uh oh!

thetaPC commented Jul 16, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

myfrom commented Jun 4, 2017 •

edited

Loading

WillHutt commented Jul 18, 2017 •

edited

Loading