1
00:00:00,690 --> 00:00:03,890
In the last video we started working on our dashboard component.

2
00:00:03,990 --> 00:00:07,400
So here's the kind of scaffolding for our dashboard right now.

3
00:00:07,560 --> 00:00:11,970
At the end of the section we started up our server and so at this point inside my browser I should see

4
00:00:11,970 --> 00:00:13,890
something that more or less looks like this.

5
00:00:13,890 --> 00:00:19,770
When I go to the slash surveys route remember we are showing the dashboard component whenever the user

6
00:00:19,770 --> 00:00:22,130
goes to slash service.

7
00:00:22,580 --> 00:00:27,240
Now right now we're focusing on making sure that there is this big red button down here with the big

8
00:00:27,240 --> 00:00:33,030
plus on it that a user can click to get some form to pop up on the screen that they can use to create

9
00:00:33,030 --> 00:00:34,390
a new survey.

10
00:00:34,680 --> 00:00:38,810
Now to figure out how to make this big red button and put it down here at the bottom right.

11
00:00:38,910 --> 00:00:43,410
I think that maybe we should take a look at the materialized CSSA documentation and see if they have

12
00:00:43,410 --> 00:00:47,320
any helpers for creating this big red button and showing it down here.

13
00:00:47,340 --> 00:00:54,460
So inside of a new browser tab I'm going to need to navigate to materialize see SS dot com.

14
00:00:54,870 --> 00:00:59,610
Remember that we installed materialized the SS way earlier inside this course and so we have access

15
00:00:59,610 --> 00:01:03,530
to all the components in CSSA that is included inside this project.

16
00:01:03,900 --> 00:01:09,300
In the search bar on the left hand side I'll search for buttons and one of the results that pops up

17
00:01:09,300 --> 00:01:13,660
should be buttons h t m l in this document.

18
00:01:13,700 --> 00:01:20,300
We can go down towards the second section right here and you'll find a section marked as fixed action

19
00:01:20,300 --> 00:01:20,930
button.

20
00:01:21,140 --> 00:01:26,090
So this fix action button will show a button at the bottom right hand side exactly like this one right

21
00:01:26,090 --> 00:01:26,830
here.

22
00:01:27,200 --> 00:01:32,400
You'll notice that when I mouse over this one I get these kind of sub actions popping up.

23
00:01:32,570 --> 00:01:38,720
And so this little section right here this little blurb is what gets all this pop up stuff to appear.

24
00:01:38,720 --> 00:01:44,060
Now we don't want any of the pop up stuff we really just want to have that one singular button.

25
00:01:44,060 --> 00:01:48,770
So if we just use the div that is listed here that will place a button down at the bottom right hand

26
00:01:48,770 --> 00:01:53,090
of the screen and then the anchor tag will show the actual button.

27
00:01:53,090 --> 00:01:57,440
And then the tag will show an actual icon inside of the button.

28
00:01:57,440 --> 00:02:02,150
So we don't need all this other stuff and all the lies because those are the list items that pop up

29
00:02:02,150 --> 00:02:03,000
here.

30
00:02:03,050 --> 00:02:08,240
So I think that we should flip on over to our dashboard component and try placing a div with an anchor

31
00:02:08,240 --> 00:02:08,760
tag.

32
00:02:08,900 --> 00:02:10,760
And then I tag inside of it.

33
00:02:10,790 --> 00:02:11,660
OK.

34
00:02:12,410 --> 00:02:17,350
So flip back over to the dashboard or find the text that just says dashboard.

35
00:02:17,390 --> 00:02:19,340
I think we'll leave this in here for right now.

36
00:02:19,460 --> 00:02:22,580
Just to kind of give ourselves something to work with.

37
00:02:23,120 --> 00:02:29,870
And as a sibling to it a place the div that's going to be used to position the button on the screen.

38
00:02:30,080 --> 00:02:31,530
So I'll give it a class name.

39
00:02:31,530 --> 00:02:35,010
And these are the same class names that we're just reading inside the documentation.

40
00:02:35,090 --> 00:02:44,450
So we're going to get this fixed action DTN inside of here will place an anchor tag hoops anchor tag

41
00:02:45,950 --> 00:02:55,330
and we'll give that a class name of DTN dash floating and DTN dash large and red and then finally inside

42
00:02:55,370 --> 00:03:01,310
of the anchor tag will place in its act which is being used to place the icon and this will give a class

43
00:03:01,310 --> 00:03:02,650
name of material.

44
00:03:02,670 --> 00:03:04,160
Dush icons.

45
00:03:04,550 --> 00:03:10,040
And then to make sure that we show an actual ad icon like an actual Plus something that makes it really

46
00:03:10,040 --> 00:03:14,360
obvious to users that hey if you click on this thing right here you're probably going to add something

47
00:03:14,360 --> 00:03:15,720
to the application.

48
00:03:15,860 --> 00:03:23,390
We will give the e-TAG some text inside of your of at like so now we're going to talk about exactly

49
00:03:23,390 --> 00:03:26,150
where this tag is coming from in just a second.

50
00:03:26,160 --> 00:03:29,810
But I want to make sure that we're going down the right path here first and then we'll come back and

51
00:03:30,070 --> 00:03:32,700
kind of investigate some of this Marka.

52
00:03:33,410 --> 00:03:33,770
OK.

53
00:03:33,770 --> 00:03:36,180
So back inside of our application.

54
00:03:36,200 --> 00:03:38,860
All right well we got a big red button on the bottom.

55
00:03:38,870 --> 00:03:43,330
You'll notice that it has the text add on it which is definitely not what we want.

56
00:03:43,340 --> 00:03:46,920
We want to have a nice looking icon appear on the screen.

57
00:03:47,270 --> 00:03:50,160
So let's talk a little bit about materialized.

58
00:03:50,220 --> 00:03:50,840
Yes.

59
00:03:51,020 --> 00:03:53,390
And the icons that it makes use of.

60
00:03:53,420 --> 00:03:57,440
So I'm really excited about this talk that we're going to have right now about icons because this is

61
00:03:57,470 --> 00:03:59,750
a very common question I get all the time.

62
00:03:59,750 --> 00:04:05,030
Really excited to just clarify things and make sure that it's really clear how icons work with materialize.

63
00:04:05,270 --> 00:04:10,250
So I get to flip back over to the materialized documentation over here and I'm going to do a search

64
00:04:10,250 --> 00:04:12,180
for icons.

65
00:04:12,220 --> 00:04:13,130
So here's icons.

66
00:04:13,140 --> 00:04:16,270
Each team pops up OK.

67
00:04:16,350 --> 00:04:21,320
So we had some very clear documentation here on exactly how this works.

68
00:04:21,390 --> 00:04:27,510
First off in order to use any icons with materialize we have to include this link tag inside of our

69
00:04:27,510 --> 00:04:29,150
root h T.M. file.

70
00:04:29,400 --> 00:04:36,270
So yes we did install the NPM package with materialized DSS but that does not include any icons inside

71
00:04:36,270 --> 00:04:36,890
of it.

72
00:04:36,900 --> 00:04:41,460
So right now we have no access to any icons whatsoever.

73
00:04:41,970 --> 00:04:48,540
After we wire this thing up to our HTL documents we can then place any icon we wish inside of our application

74
00:04:48,930 --> 00:04:53,010
by using an IDE tag with a class of material icons.

75
00:04:53,010 --> 00:04:55,310
Let me zoom in here and make sure it's parts legible.

76
00:04:55,550 --> 00:04:59,840
So as I tag with the class of material icons and then here's the real magic.

77
00:04:59,850 --> 00:05:02,310
This is the part that throws people off big time.

78
00:05:02,400 --> 00:05:04,300
You see the text inside this tag.

79
00:05:04,470 --> 00:05:05,520
It says at.

80
00:05:05,580 --> 00:05:06,250
Right.

81
00:05:06,520 --> 00:05:12,210
Well if we scroll down a little bit you'll find a list of all the different icons that you get access

82
00:05:12,210 --> 00:05:17,760
to with the icon library to show any of these icons inside your application.

83
00:05:17,760 --> 00:05:20,370
You take the word right underneath the icon.

84
00:05:20,400 --> 00:05:25,620
So like info outline and then you place it inside of the tag.

85
00:05:25,980 --> 00:05:32,700
Then when the library loads up it will automatically find all the different tags inside your application.

86
00:05:32,700 --> 00:05:38,640
It will look at the text inside the tag and it will replace that text with the icon that you want to

87
00:05:38,640 --> 00:05:39,320
use.

88
00:05:39,450 --> 00:05:40,560
So that's the magic.

89
00:05:40,560 --> 00:05:43,550
That's how things are just magically working for us.

90
00:05:43,740 --> 00:05:48,550
When this font library loads up any e-tag that has a word inside of it.

91
00:05:48,720 --> 00:05:54,870
If this word corresponds to one of these icons in this list right here it will be automatically replaced

92
00:05:54,900 --> 00:05:56,280
with the icon.

93
00:05:56,700 --> 00:05:59,460
So let's give this a shot let's see how it works.

94
00:05:59,460 --> 00:06:03,200
First off we're going to make sure that we add in the font library.

95
00:06:03,270 --> 00:06:07,270
So I'm going to grab the entire link tag right here or copy it.

96
00:06:07,350 --> 00:06:14,440
Or go back over to my code editor and then inside of our we want to find our html document.

97
00:06:14,460 --> 00:06:17,480
And remember it's inside of our public directory.

98
00:06:17,490 --> 00:06:19,830
Now you might have one inside the build directory as well.

99
00:06:19,850 --> 00:06:24,900
But that is the built version of the app that is not the development version that we are actively working

100
00:06:24,900 --> 00:06:25,750
on right now.

101
00:06:26,020 --> 00:06:30,660
So make sure you find the index H.C. mail file inside of your public directory.

102
00:06:30,660 --> 00:06:36,970
So open it up and then basically anywhere on here like probably beneath the existing tootling tags.

103
00:06:37,260 --> 00:06:40,410
We can test it on this brand new link tag.

104
00:06:40,410 --> 00:06:47,500
So you should see something that says Google API is Icon blah blah blah while all the stuff I look at.

105
00:06:47,550 --> 00:06:49,400
Let's save this.

106
00:06:49,890 --> 00:06:55,930
Now go back over to my code editor or verify that I do have an IDE tag right here.

107
00:06:55,980 --> 00:06:57,640
It has the text add right here.

108
00:06:57,660 --> 00:07:02,670
So I'm going to expect that when the IDE tag is rendered the font library that we just loaded up will

109
00:07:02,670 --> 00:07:06,070
replace the word ad with an ad icon.

110
00:07:06,410 --> 00:07:11,650
So now when we go back over I will manually refresh the document.

111
00:07:11,970 --> 00:07:18,000
And as you can see down here we've got the nice plus symbol inside the button that makes it really obvious

112
00:07:18,000 --> 00:07:18,820
to a user.

113
00:07:18,980 --> 00:07:22,980
Hey if you click on this you'll probably be adding something to the application.

114
00:07:23,280 --> 00:07:28,410
Now just to give you a quick demo we could just as easily come back over here look at our icon list

115
00:07:28,830 --> 00:07:33,440
and say oh well you know what I kind of like this chat bubble outline.

116
00:07:33,450 --> 00:07:36,360
So we will take the exact string right here.

117
00:07:36,360 --> 00:07:37,790
Copy it.

118
00:07:38,070 --> 00:07:39,520
We can find our tag.

119
00:07:39,600 --> 00:07:44,620
Here it is right here and then instead of the word add we can replace it with Ciat bubble outlines so

120
00:07:44,640 --> 00:07:48,530
the exact string that we just saw inside the documentation.

121
00:07:48,540 --> 00:07:55,730
So now we say this and go back over to our out now you're going to see that little shot outline icon.

122
00:07:55,920 --> 00:07:59,620
So in practice using these icons is really straightforward.

123
00:07:59,670 --> 00:08:02,510
It is just understanding the magic that you have.

124
00:08:02,520 --> 00:08:06,370
You've got to put the right word inside the italics to get them to actually show up.

125
00:08:06,900 --> 00:08:07,150
OK.

126
00:08:07,160 --> 00:08:09,490
So obviously we don't really want to chat icon here.

127
00:08:09,540 --> 00:08:14,130
Let's go back and change the word back to ad and we'll use out instead.

128
00:08:14,190 --> 00:08:15,580
And that's all worked out just fine.

129
00:08:17,040 --> 00:08:20,090
And we'll just verify that we still have the plus.

130
00:08:20,580 --> 00:08:21,240
OK cool.

131
00:08:21,240 --> 00:08:22,870
That looks good.

132
00:08:22,890 --> 00:08:23,190
All right.

133
00:08:23,190 --> 00:08:25,790
So I think the dashboard is looking pretty good.

134
00:08:25,800 --> 00:08:28,530
Now one last thing we have to take care of inside the next section.

135
00:08:28,650 --> 00:08:32,060
At present we have an anchor tag inside of here.

136
00:08:32,190 --> 00:08:38,400
And remember any time we want to navigate between routes inside of our re-act router application we

137
00:08:38,400 --> 00:08:42,420
do not use anchor tags we use link tags.

138
00:08:42,540 --> 00:08:44,400
So in the next section we're going to come back.

139
00:08:44,460 --> 00:08:50,130
We're going to fix up this anchor tag and make sure that it uses a linked tag instead to properly route

140
00:08:50,160 --> 00:08:53,770
or redirect or user inside of the reactor outside of our.

141
00:08:53,970 --> 00:08:57,000
So quick break and I'll see you in the next section.