Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[core] the countdown slide template #45

Closed
peterpeterparker opened this issue Jan 25, 2019 · 25 comments

Comments

@peterpeterparker
Copy link
Contributor

commented Jan 25, 2019

Description

I thought it would be cool to implement a countdown template. It could be useful when people display a template before all the talks at a meetup, like "it begin at 19:00" or "it begin 00:15 minutes"

For example idea is to create a new type of slide:

<deckgo-slide-countdown until="Friday at 7pm">
     <h1 slot="title">My presentation start at</h1>
</deckgo-slide-countdown>

Which renders a slide with a counter until it begins

My presentation start at
           07:00

or

My presentation start in
           12:14min

Tech info

This feature is something to implement in the core component as a new slide.

Get started

Interested to get involved and to try to implement this new template? Ping me if you have any questions or need help to get started, David (@peterpeterparker or twitter.com/daviddalbusco) 😃

@peterpeterparker peterpeterparker changed the title The countdown template [core] The countdown slide template Jul 25, 2019

@peterpeterparker peterpeterparker changed the title [core] The countdown slide template [core] the countdown slide template Jul 25, 2019

@gauravmahto

This comment has been minimized.

Copy link
Contributor

commented Jul 28, 2019

@peterpeterparker I would like to contribute. Could you please guide me?
P.S. Your article on dev.to inspired me to contribute.

@peterpeterparker

This comment has been minimized.

Copy link
Contributor Author

commented Jul 28, 2019

@gauravmahto excellent 👍

sure I could and I think we should also use the learning to create a small documentation to explain how additional templates could be created, that would be neat

Furthermore the above description, what information are you missing to get started?

@gauravmahto

This comment has been minimized.

Copy link
Contributor

commented Jul 28, 2019

@peterpeterparker Thanks! I was crawling through the sources and it looks like I would have to use stencil to create the required web component?
By documentation, you mean to create some markdown file which will explain something like creating a basic 'Hello world!' core component?

@peterpeterparker

This comment has been minimized.

Copy link
Contributor Author

commented Jul 28, 2019

Yes, all our frontend apps and web components are developed with StencilJS

It's what I meant yes, but I could take care of the documentation, no worries about that

@gauravmahto

This comment has been minimized.

Copy link
Contributor

commented Jul 28, 2019

OK. Cool!
I'll start to look into this. If I need any further help, I guess I would ping you?

@peterpeterparker

This comment has been minimized.

Copy link
Contributor Author

commented Jul 28, 2019

Sure 👍

@gauravmahto

This comment has been minimized.

Copy link
Contributor

commented Jul 29, 2019

@peterpeterparker Hey, I'm done with the initial work on the countdown slide. How would you like to review my changes? Should I create a pull request?

@peterpeterparker

This comment has been minimized.

Copy link
Contributor Author

commented Jul 29, 2019

Cool!

A PR sounds fine to me. If it's a very first draft I should review, you could also ping me with an url to your fork. As you rather like :)

@gauravmahto

This comment has been minimized.

Copy link
Contributor

commented Jul 29, 2019

Great. Since, this is a draft version, sharing the link sounds fine to me.

gauravmahto@0c1be2d

@peterpeterparker

This comment has been minimized.

Copy link
Contributor Author

commented Jul 29, 2019

@gauravmahto haha looks cool and despite my small description, you exactly understood my idea 👍

only one important thing, which I may have mentioned way earlier, sorry for that, could you remove gsap or the lato reference please?

as much as possible, our components should remain agnostic. it makes the things a bit more challenging I'm agree, but that's the cool part of it.

maybe instead of this we could simply display a text, that would be enough for a first version and add some CSS4 variables to let user styles it. but I'm open to any other any idea which doesn't include a reference on a third party library.

if you would not have time, no worries, I'm already super happy with your contribution. I could take over and replace the display, but of course if you have time, that's super!

@gauravmahto

This comment has been minimized.

Copy link
Contributor

commented Jul 30, 2019

@peterpeterparker Let me see what I can do. Also, what kind of CSS4 vars should be added? I guess vars for background and foreground would be sufficient? Also, most probably I'll be looking into this during the weekend.

@peterpeterparker

This comment has been minimized.

Copy link
Contributor Author

commented Jul 30, 2019

@gauravmahto probably background, foreground and maybe font-size?

we could always add more variables, no need to add to much at the startup

coolio

@gauravmahto

This comment has been minimized.

Copy link
Contributor

commented Aug 3, 2019

@peterpeterparker Hey, Hi. I've removed the gsap module and added the CSS custom properties for font-size, clock face background and foreground colours.
Should I create a pull request? Here is the link for comparison master...gauravmahto:master

@peterpeterparker

This comment has been minimized.

Copy link
Contributor Author

commented Aug 3, 2019

@gauravmahto wow super cool 👍

sure go for a PR 🚀

p.s.: I'm off for the day in a couple of minutes, will try to review the PR tomorrow or begin of next week. Thx a lot

@gauravmahto

This comment has been minimized.

Copy link
Contributor

commented Aug 3, 2019

Thanks! Here is the PR - #216

BTW, wishing you a nice weekend. :)

@peterpeterparker

This comment has been minimized.

Copy link
Contributor Author

commented Aug 3, 2019

@gauravmahto you too! thx for the PR 👍

@peterpeterparker

This comment has been minimized.

Copy link
Contributor Author

commented Aug 3, 2019

@gauravmahto before I have a look/merge your PR. could you rebase/sync it with master? that would help for the review, thx.

@gauravmahto

This comment has been minimized.

Copy link
Contributor

commented Aug 3, 2019

@peterpeterparker I think I have already done the rebase. Or maybe I'm mistaken?

@peterpeterparker

This comment has been minimized.

Copy link
Contributor Author

commented Aug 3, 2019

@gauravmahto look like not. for example it push outdated modifications in README or package.json (the component highlight-code has been updated with new features in master)

monorepo...

@gauravmahto

This comment has been minimized.

Copy link
Contributor

commented Aug 3, 2019

Ohh, now I see that, let me take care of that.

@gauravmahto

This comment has been minimized.

Copy link
Contributor

commented Aug 3, 2019

There was something odd with my repo. So, I've created another PR and closed the other one.

@peterpeterparker

This comment has been minimized.

Copy link
Contributor Author

commented Aug 3, 2019

Thx a lot for the effort! Will have a look as told above.

Happy weekend

peterpeterparker added a commit that referenced this issue Aug 4, 2019

@peterpeterparker

This comment has been minimized.

Copy link
Contributor Author

commented Aug 4, 2019

Thx you for the PR @gauravmahto, I've now merged it 😃👍

After merge I allowed my self to make several changes, I hope you don't mind. Summarized these are the following:

  • Simplified the layout which has for effect to have less CSS. Used a grid and centered the countdown. I also added some more CSS variables as I was already there

  • I converted the "Hours", "Minutes" and "Seconds" text to slots as you might want to display there in another languages

  • I added some missing slots (background, actions and notes) which are default slots of the core and renamed the package and component file name. Exactly the kind of thing I should document to help contributors to create their own templates, thx for pointing this out ;)

  • Refactored the code and notably the render function to avoid to have multiples times the same one and also converted some methods to promises

  • Maybe the most important change: instead of parsing (innerHTML = ...) the values to display I converted the mHours, mMinutes and mSeconds to state. It gives the advantages to avoid repaint problem (using innterHtml values might get lost) and also has for side effect to shorten the code

@gauravmahto

This comment has been minimized.

Copy link
Contributor

commented Aug 4, 2019

@peterpeterparker Thanks! for taking care of the issues. :)
P.S. This was my very first Stencil project. Having said that, I'll take a look into what you've changed which would really help me better understand the contracts.

@peterpeterparker

This comment has been minimized.

Copy link
Contributor Author

commented Aug 4, 2019

@gauravmahto thx for the positive feedback, really happy to hear that and it's super cool that this feature makes you then discover stencil 😃

peterpeterparker added a commit that referenced this issue Aug 4, 2019

peterpeterparker added a commit that referenced this issue Aug 4, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.