These are chat archives for delta98/ionic-material-design-lite

29th
Jul 2015
Jason Brown
@delta98
Jul 29 2015 06:28
@dciccale that's awesome!
Alberto Gil
@gil13
Jul 29 2015 06:57
Cool @delta98 ! Im trying to use you min.js and your min.css and I get this message "componentHandler is not defined" ('componentHandler.upgradeElement(n[0],"MaterialButton"'), I think i will try with a fresh copy
Jason Brown
@delta98
Jul 29 2015 07:56
@gil13 for the moment you need to include <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script> at the top of your document before the ionic material scripts
for RC-1 that script will be bundled as part of the min.js
Alberto Gil
@gil13
Jul 29 2015 08:14
Thanks @delta98 working great !!
Jason Brown
@delta98
Jul 29 2015 08:14
great, let me know about your experience, there’s still a lot to do
Denis Ciccale
@dciccale
Jul 29 2015 12:00
@delta98 how are you going to manage to include the "spinner" component? ionic has it's own spinner
which renders an svg which is not compatible with the material-design-lite template which are divs
Jason Brown
@delta98
Jul 29 2015 13:23
@dciccale there will be situations like that where the ionic implementation will have to be honored, they also provide an Android/Material type spinner, so that will be set in the platform config by default
in terms of the asthetics as an svg it’s simple to apply a transition animation that will update the colour per rotation
MDL isn’t going to be a complete override of ionic, it will be used as a foundation to ensure common components are inline with MD and can be patched as MDL matures
Denis Ciccale
@dciccale
Jul 29 2015 13:28
ok
Jason Brown
@delta98
Jul 29 2015 13:29
what did you have in mind?
Denis Ciccale
@dciccale
Jul 29 2015 13:30
just wanted to implement the spinner and the progress element from MDL, and i stumble upon that issue
now i'm working on doing the progress element first, which apparently doesn't have that issue
because is not implemented in ionic
i want to learn how is the process of porting an MDL component to this ionic-mdl project
if there is an easier element you want me to integrate into ionic-mdl just tell me
Jason Brown
@delta98
Jul 29 2015 13:35
progress might be a tricky one as it would require a new directive as Ionic doesn’t currently implement progress loaders
I would look at #29 implementing modals
or #30 implement dialogues
Denis Ciccale
@dciccale
Jul 29 2015 13:36
ok will take a look
Jason Brown
@delta98
Jul 29 2015 13:36
only because it’s an existing directive and should be straight forward to bring across
Denis Ciccale
@dciccale
Jul 29 2015 13:37
dialogues are not in ionic neither, right?
can't find them in the docs
Jason Brown
@delta98
Jul 29 2015 13:37
in terms of process, create a branch from master, make sure you include #30 or #29 at the end and push to the repo so the issue will be assigned to you, then you can be the owner of that issue
Denis Ciccale
@dciccale
Jul 29 2015 13:37
ok
i do see modals
Jason Brown
@delta98
Jul 29 2015 13:39
my bad, I’ve grouped them as dialogue, but it’s actually popup and popover
Denis Ciccale
@dciccale
Jul 29 2015 13:40
so basically i have to extend that directive and addClass the MDL classes in the directive element
Jason Brown
@delta98
Jul 29 2015 13:40
I’ve updated issue 30, so popup has confirm, alert etc
Denis Ciccale
@dciccale
Jul 29 2015 13:41
what about the sass file for that? because for the _tabs.scss i see quite a lot of code
Jason Brown
@delta98
Jul 29 2015 13:41
you shouldn’t need to directively change the directive, only the classes
Denis Ciccale
@dciccale
Jul 29 2015 13:41
ah, ok i get it
Jason Brown
@delta98
Jul 29 2015 13:41
we can walk through it together if you’d like?
create the branch following the guidelines on the read me and push up so it’s assigned to you on the tracker
Denis Ciccale
@dciccale
Jul 29 2015 13:42
ok
i push the branch directly into your repo?
is already on my fork
Jason Brown
@delta98
Jul 29 2015 13:46
it should just remain on your fork, tbh I’ve not used waffle.io long
Denis Ciccale
@dciccale
Jul 29 2015 13:47
maybe we can review together that branch directly
Jason Brown
@delta98
Jul 29 2015 13:48
yeah good idea
Denis Ciccale
@dciccale
Jul 29 2015 13:48
so i create a js/directives/popup.js ?
Jason Brown
@delta98
Jul 29 2015 13:48
no you don’t need to create any JS
Denis Ciccale
@dciccale
Jul 29 2015 13:48
ahm
Jason Brown
@delta98
Jul 29 2015 13:48
pop up has css classes which need overriden
bower_components/ionic/scss/_popup.scss
Denis Ciccale
@dciccale
Jul 29 2015 13:49
so i import that into the ionic.material-design-lite.scss
Jason Brown
@delta98
Jul 29 2015 13:49
create a folder in scss dialogues
Denis Ciccale
@dciccale
Jul 29 2015 13:49
and then i create a local _popup.scss
ok
Jason Brown
@delta98
Jul 29 2015 13:50
create a popup.scss file in there
Denis Ciccale
@dciccale
Jul 29 2015 13:50
done
Jason Brown
@delta98
Jul 29 2015 13:51
copy one of the demos and write enough code to call $ionicPopup
Denis Ciccale
@dciccale
Jul 29 2015 13:51
ok
Jason Brown
@delta98
Jul 29 2015 13:52
then what I do is look at the css classes applied to the element, compare that with the GDM spec
so straight away you have .popup-container .popup .popup-body and popup-buttons
take a look at the card example in index.html where there is __action-buttons that’s what I would start with for .popup-buttons
Denis Ciccale
@dciccale
Jul 29 2015 13:56
sorry i can't find any __action-buttons class in index.html
Jason Brown
@delta98
Jul 29 2015 13:57
let me check
Denis Ciccale
@dciccale
Jul 29 2015 13:57
there is item__actions
Jason Brown
@delta98
Jul 29 2015 13:57
sorry, I have no idea where __action-buttons came from
you are right it’s item__actions
Denis Ciccale
@dciccale
Jul 29 2015 14:01
ok i have a working popup demo showing ionicPopup
now i need to style this thing right
Jason Brown
@delta98
Jul 29 2015 14:01
you sure do!
make sure you put .platform-android, .platform-override at the top of your scss file
this makes sure it only affects android and platform overrides
Denis Ciccale
@dciccale
Jul 29 2015 14:02
ok perfect
Jason Brown
@delta98
Jul 29 2015 14:02
then put all of your class overrides inside that
also, if you think it’s work making a note of any of this for others add it to the repo in collaborators.md (it doesn’t exist yet) but I’ll slowly build it up to help get people moving
Denis Ciccale
@dciccale
Jul 29 2015 14:03
i will push what i have so you can take a look
Jason Brown
@delta98
Jul 29 2015 14:03
ok
Denis Ciccale
@dciccale
Jul 29 2015 14:03
and maybe try the demo ok?
Jason Brown
@delta98
Jul 29 2015 14:03
will do
here’s what you should be cross referencing against https://www.google.co.uk/design/spec/components/dialogs.html
ok good reference
Jason Brown
@delta98
Jul 29 2015 14:06
looks good so far, I like that you’ve used Ionic’s example so it will translate well with others
Denis Ciccale
@dciccale
Jul 29 2015 14:06
copy&paste : D
Jason Brown
@delta98
Jul 29 2015 14:06
need to remain this dialogues to dialogs sorry my stupid gramma
Denis Ciccale
@dciccale
Jul 29 2015 14:06
ok haha i didn't noticed neither
Jason Brown
@delta98
Jul 29 2015 14:07
the latter means an open dialogue in conversation.. face palm
Denis Ciccale
@dciccale
Jul 29 2015 14:07
true
in GMD it states that alerts do not need a title, but ionic is forcing a .popup-head element
in this case should i check ionic docs to see if this is configurable?
hide it via css or just leave it there?
Jason Brown
@delta98
Jul 29 2015 14:10
we should look to hide it with css
that way it doesn’t affect iOS users
so display:none - job done
Denis Ciccale
@dciccale
Jul 29 2015 14:11
so with ionic-mdl will be imposing the style over ionic framework
makes sense
Jason Brown
@delta98
Jul 29 2015 14:12
yeah, best to not change functionality unless we absolutely have to and it should never cause a negative impact on the platform
Denis Ciccale
@dciccale
Jul 29 2015 14:12
perfect
Jason Brown
@delta98
Jul 29 2015 14:15
I’ve got to set away from my computer for 15min, back soon
Denis Ciccale
@dciccale
Jul 29 2015 14:15
ok i'll have something when you come back
Jason Brown
@delta98
Jul 29 2015 14:25
back
Denis Ciccale
@dciccale
Jul 29 2015 14:28
i think that a better solution is providing a template
for example, for the alert
because now, i have a default "ok" button which uses a class of "button-positive"
when calling $ionicPopup.alert() i can pass "okType" to modify that class
and following GDM that button needs to be a quiet button like the "flat with ripple" button here http://www.getmdl.io/components/index.html#buttons-section
ah, but replacing the template will affect other platforms
so i better forget it
i will upload what i have
Denis Ciccale
@dciccale
Jul 29 2015 14:35
there is a work in progress from MDL google/material-design-lite#781
or i can override the "button-positive" styles to match the flat button by extending that
Jason Brown
@delta98
Jul 29 2015 14:38
what I would do is use the default button
then when they add button-positive it will apply the clear button styles
by default I mean button-clear
Denis Ciccale
@dciccale
Jul 29 2015 14:39
yes but for applying button-clear class to the alert button you have to provide it through the configuration
when you launch the alert
Jason Brown
@delta98
Jul 29 2015 14:40
ok one sec
so by default it adds button and button-default
override button-default extending the existing button-clear class in _buttons.scss
you might need bring across some of the button-<colour> styles so when they add button-positive through the config it displays correctly
Denis Ciccale
@dciccale
Jul 29 2015 14:44
wait
$ionicPopup.alert() when invoked, by default paints an OK button with button-positive class in it
i want to make sure we talk about th same thing
so i'll extend button-positive with button-clear
Jason Brown
@delta98
Jul 29 2015 14:46
yeah, so anything inside a popup class will use the clear/outlined classes as seen on the index.html demo
Denis Ciccale
@dciccale
Jul 29 2015 14:47
yes
what if i as a developer invoke $ionicPopup.alert() passing other class than button-positive then the button will again look bad
Jason Brown
@delta98
Jul 29 2015 14:49
that’s why you make sure all of the colour classes are implemented
Denis Ciccale
@dciccale
Jul 29 2015 14:49
ok i see that thx
Jason Brown
@delta98
Jul 29 2015 14:50
we can’t stop developers from using different classes, so lets support as many of the ionic defaults as we can
Denis Ciccale
@dciccale
Jul 29 2015 14:50
cool
is not initializing the ripple
weird
Jason Brown
@delta98
Jul 29 2015 14:54
ok, don’t worry about that
so in js/directives/button there is a compile method which initilises the button, push up I’ll take a look at that
Denis Ciccale
@dciccale
Jul 29 2015 14:57
pushed
(to my fork) if you want i can push to yours
looks like i have access now to do so
Jason Brown
@delta98
Jul 29 2015 14:59
yeah I added you as a contributor - push to mine also
Denis Ciccale
@dciccale
Jul 29 2015 15:00
no i can't
Jason Brown
@delta98
Jul 29 2015 15:00
oh ok, I’m currently looking at your fork atm
Denis Ciccale
@dciccale
Jul 29 2015 15:09
i'm pushing again, now it looks quite ok
Jason Brown
@delta98
Jul 29 2015 15:09
cool
Denis Ciccale
@dciccale
Jul 29 2015 15:10
the font needs some retouch
Jason Brown
@delta98
Jul 29 2015 15:10
ok, wouldn’t worry too much I’ve got #13 where I’m doing that
ok there is a quite a few errors coming from the alert boxes
which will explain why ripple isn’t activated
I’l ltake a look
Denis Ciccale
@dciccale
Jul 29 2015 15:13
rly? where
Jason Brown
@delta98
Jul 29 2015 15:13
in dev tools on chrome
Denis Ciccale
@dciccale
Jul 29 2015 15:14
i don't
that's why i ask well, if you can fix it cool
Jason Brown
@delta98
Jul 29 2015 15:24
it’s look good though
error is caused by app default routing
Denis Ciccale
@dciccale
Jul 29 2015 15:24
ok
there is a little thing to comment, some cases do allow a heading, so if i display:none will not be visible never
so i tried using :empty selector, but even if i pass an empty string to ionic, it will render an h3 element inside .popup-head
Jason Brown
@delta98
Jul 29 2015 15:25
hmm good point, I’ve just read that myself
have you added styles for scrolling lists
Denis Ciccale
@dciccale
Jul 29 2015 15:26
i think ionic should handle an empty string as not displaying any header at all
Jason Brown
@delta98
Jul 29 2015 15:27
look how I’ve extended the tabs directive
Denis Ciccale
@dciccale
Jul 29 2015 15:27
no i haven't
Jason Brown
@delta98
Jul 29 2015 15:27
do the same for popup
need to account for scrolling lists as it states in the GMD
Denis Ciccale
@dciccale
Jul 29 2015 15:31
i don't get it
:D
Jason Brown
@delta98
Jul 29 2015 15:31
look at confirmation dialogs and the ringtone example
Denis Ciccale
@dciccale
Jul 29 2015 15:48
i see
that only apply for lists?
Jason Brown
@delta98
Jul 29 2015 15:50
I’m thinking because developers can use their own templates for content that’s then transpiled in the directive, MD shows a scrollable list, so I’m curious whether it’s going to react the same way
that is, with the border when a list is above the item_actions
Jason Brown
@delta98
Jul 29 2015 16:01
also I’ve add @include shadow-16dp(); instead of the manual box shadow there’s a mixin in material-design-lite in bower_components for shadows
Denis Ciccale
@dciccale
Jul 29 2015 17:49
oh great
where did you pushed that?
Jason Brown
@delta98
Jul 29 2015 18:15
I can't push it on your fork, do you mind adding it to your branch? Forget the ripple for the moment add a bug to the issues and we can pick it up at a later point, it's because of the $digest cycle on the directive
I'm not near my laptop atm or I'd do it
Denis Ciccale
@dciccale
Jul 29 2015 18:46
i've added you as collaborator to my fork if you want to push the changes
Jason Brown
@delta98
Jul 29 2015 21:15
thanks