[core] the countdown slide template

peterpeterparker commented 5 years ago

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) 😃

gauravmahto commented 5 years ago

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

peterpeterparker commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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

peterpeterparker commented 5 years ago

Sure 👍

gauravmahto commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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

https://github.com/gauravmahto/deckdeckgo/commit/0c1be2d343bbd9613c9e83edfd17fb0791c30db6

peterpeterparker commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

@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 https://github.com/deckgo/deckdeckgo/compare/master...gauravmahto:master

peterpeterparker commented 5 years ago

@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 commented 5 years ago

Thanks! Here is the PR - https://github.com/deckgo/deckdeckgo/pull/216

BTW, wishing you a nice weekend. :)

peterpeterparker commented 5 years ago

@gauravmahto you too! thx for the PR 👍

peterpeterparker commented 5 years ago

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

gauravmahto commented 5 years ago

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

peterpeterparker commented 5 years ago

@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 commented 5 years ago

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

gauravmahto commented 5 years ago

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

peterpeterparker commented 5 years ago

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

Happy weekend

peterpeterparker commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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

deckgo / deckdeckgo