1
00:00:01,680 --> 00:00:06,300
If our smallest item is showing a code cell, we want to make sure that the action bar has that nice

2
00:00:06,540 --> 00:00:08,020
dark background applied to it.

3
00:00:08,310 --> 00:00:12,150
In addition, we want to make sure that this extra bar is being displayed on top of the code.

4
00:00:12,150 --> 00:00:16,740
So so it's not kind of sits directly with it like.

5
00:00:16,740 --> 00:00:19,470
So that is what is currently happening with the action bar.

6
00:00:19,590 --> 00:00:22,290
The action bar is being displayed on top of the iFrame element.

7
00:00:22,680 --> 00:00:27,900
So we need to make sure that if this is a code cell, we show this extra dark bar and show the action

8
00:00:27,900 --> 00:00:28,770
bar inside their.

9
00:00:29,670 --> 00:00:32,250
OK, so to do this once again, we'll flip back over.

10
00:00:34,510 --> 00:00:39,970
I'm going to then take a look at our code case up here for the statement, we're just going to directly

11
00:00:39,970 --> 00:00:44,710
out in a little bit of code right here to decide whether or not we want to add in that extra little

12
00:00:44,890 --> 00:00:46,780
or something, that external action bar.

13
00:00:47,080 --> 00:00:51,370
And if we do, we'll just wrap with another element to make sure that we can show that kind of thick

14
00:00:51,370 --> 00:00:52,340
background as well.

15
00:00:52,790 --> 00:00:53,710
So let me show you what I mean.

16
00:00:54,190 --> 00:00:55,270
I'm going to find child right here.

17
00:00:55,670 --> 00:00:57,700
I'm going to wrap this with a react fragment.

18
00:00:58,030 --> 00:00:59,530
Remember what a fragment is.

19
00:00:59,890 --> 00:01:02,560
This means that we can show many different elements inside of here.

20
00:01:02,560 --> 00:01:06,490
But this is not going to actually create any kind of DOM element that will show up inside the browser.

21
00:01:07,700 --> 00:01:14,630
Then right above or below is what we want our seemy we want right above photocell, I'm going to add

22
00:01:14,630 --> 00:01:15,500
in a div.

23
00:01:18,630 --> 00:01:22,890
With the class name of Action Bar rapper.

24
00:01:23,730 --> 00:01:28,650
And I'm going to go down to my render statement and cut action bar out.

25
00:01:30,960 --> 00:01:36,810
Now, as you guess, we can apply some success to apply some styling to action bar wrapper, make sure

26
00:01:36,810 --> 00:01:43,050
nothing shows up directly on top of Kozel as 100 percent with and maybe apply a background color as

27
00:01:43,050 --> 00:01:43,280
well.

28
00:01:44,330 --> 00:01:48,740
We do, however, also need to make sure that we still show this action bar if you're showing a text

29
00:01:48,740 --> 00:01:49,120
editor.

30
00:01:49,640 --> 00:01:54,170
So in a very similar fashion, I'm going to wrap this with a react fragment.

31
00:01:57,070 --> 00:02:01,630
And right below it, in this case, again, to solve this whole Z index issue, I'll put another one

32
00:02:01,630 --> 00:02:02,650
of those action bars.

33
00:02:05,020 --> 00:02:08,560
So then down at our return statement, we're left with once again, just child.

34
00:02:10,169 --> 00:02:14,130
Quick thing, I would like you to double check, make sure you do not have any semicolons at the end

35
00:02:14,130 --> 00:02:19,680
of text editor or code cell, if you have any semicolons, those will be rendered inside the browser

36
00:02:19,680 --> 00:02:20,340
as text.

37
00:02:20,530 --> 00:02:21,660
Definitely not what we want.

38
00:02:22,570 --> 00:02:25,840
It's let's save this really quick, go back over a quick test.

39
00:02:28,370 --> 00:02:30,650
OK, well, I'm not seeing.

40
00:02:32,030 --> 00:02:34,310
Our action bar wrapper element.

41
00:02:34,430 --> 00:02:35,660
Let's just do a quick inspection.

42
00:02:35,690 --> 00:02:37,130
I bet you we can find it really quickly.

43
00:02:38,130 --> 00:02:40,440
I'm going to find one of our smallest items.

44
00:02:40,500 --> 00:02:41,460
So here's all for them.

45
00:02:41,970 --> 00:02:45,050
I'll find one of the smallest items that are being used for a code cell.

46
00:02:45,480 --> 00:02:46,470
I'm going to expand it.

47
00:02:46,920 --> 00:02:48,810
And there's our action bar wrapper.

48
00:02:49,420 --> 00:02:51,930
The problem right now is that it has a width.

49
00:02:51,930 --> 00:02:53,520
And you can look at computed right here.

50
00:02:53,730 --> 00:02:54,720
That's a full with.

51
00:02:54,960 --> 00:02:57,480
But right now it has a zero height being applied to it.

52
00:02:57,900 --> 00:03:01,980
So we're going to add in a little bit of custom success to this thing just to fix the styling a little

53
00:03:01,980 --> 00:03:02,250
bit.

54
00:03:03,470 --> 00:03:08,690
All right, so back over once again inside of our Ed, we'll go back over to sell list item.

55
00:03:10,070 --> 00:03:13,700
I'm going to add in a selecter for action bar wrapper.

56
00:03:14,270 --> 00:03:18,650
I'm going to give it a height of one 1/2 percent or not a height of one percent, but a height of 30

57
00:03:18,650 --> 00:03:22,040
pixels, which should be enough to show the all those buttons that we want to show.

58
00:03:24,010 --> 00:03:26,650
I'm going to give it a width of one hundred percent.

59
00:03:29,620 --> 00:03:30,880
We'll give it a background.

60
00:03:33,110 --> 00:03:37,550
Color of pound three seven four one four B.

61
00:03:38,760 --> 00:03:40,440
And I think that's all we need for right now.

62
00:03:41,250 --> 00:03:47,550
We're going to save this look back over a there we go now Archerd cells have that nice kind of dark

63
00:03:47,550 --> 00:03:51,840
background right above it that just give us some very clear separation from the text cells.

64
00:03:52,930 --> 00:03:56,770
One thing we might want to do very temporarily, just to make sure everything looks somewhat reasonable,

65
00:03:56,920 --> 00:04:02,710
is that in just a little bit of margin on the maybe all sides of sell this item, we're going to remove

66
00:04:02,710 --> 00:04:05,350
this almost immediately and replace it with some other solution.

67
00:04:05,530 --> 00:04:08,770
But it just give us a little bit of separation between all these different cells right now.

68
00:04:08,770 --> 00:04:10,940
Just we can make sure that everything looks somewhat OK.

69
00:04:11,800 --> 00:04:12,990
It's going to go back over fine.

70
00:04:13,020 --> 00:04:13,720
Sell this item.

71
00:04:13,720 --> 00:04:21,120
I'll give it a margin with maybe 20 pixels on top and bottom and then 10 pixels on left and right.

72
00:04:21,339 --> 00:04:22,450
That's a shortcut for that.

73
00:04:22,600 --> 00:04:25,270
So 20 pixels, top and bottom, left and right.

74
00:04:25,690 --> 00:04:26,460
I'm going to save that.

75
00:04:27,220 --> 00:04:31,030
Yeah, I'd say this is starting to come together, maybe a little bit more than 20 pixels.

76
00:04:32,580 --> 00:04:33,660
Tried to get up to 40.

77
00:04:34,600 --> 00:04:36,430
All right, now that's starting to look pretty good.

78
00:04:41,250 --> 00:04:42,780
Well, I'm pretty happy with what we have.

79
00:04:43,670 --> 00:04:48,800
I am going to delete that margin line we just put in, because, as I mentioned, we're going to eventually

80
00:04:48,800 --> 00:04:50,600
come up with a little bit better solution.

81
00:04:50,790 --> 00:04:54,620
There are going to be some elements that are going to insert between these different cells very shortly.

82
00:04:55,040 --> 00:04:56,750
But overall, I'd say this looks pretty good.

83
00:04:56,900 --> 00:05:02,710
And just as a very final quick test, I should be able to move these cells around very easily as well.

84
00:05:03,020 --> 00:05:04,660
And it looks like that's definitely the case.

85
00:05:06,640 --> 00:05:12,370
Maybe it's just one last very small thing, totally optional, once again, those action buttons are

86
00:05:12,370 --> 00:05:14,080
just a little bit too prominent.

87
00:05:14,500 --> 00:05:17,580
How often is it, anyhow, that a user is going to want to move these cells around?

88
00:05:18,010 --> 00:05:19,830
So absolutely optional, totally up to you.

89
00:05:19,840 --> 00:05:24,070
But one thing we might decide to add in is to go back over to our Action Bar Scissors file.

90
00:05:24,910 --> 00:05:30,160
And I might put in an opacity here of zero point five, which is just going to fade these buttons out

91
00:05:30,160 --> 00:05:30,900
a little bit.

92
00:05:31,390 --> 00:05:32,590
Yeah, that's a little bit better.

93
00:05:33,280 --> 00:05:36,910
We might even want to go a little bit more like, let's say point to five.

94
00:05:38,130 --> 00:05:43,110
It's a really kind of fade them out and then we can add in another one of those hover rules so I could

95
00:05:43,110 --> 00:05:45,430
put an action bar bill and hover.

96
00:05:46,020 --> 00:05:50,870
So if the user ever hovers over this thing, I'll set the capacity to 1.0 right away.

97
00:05:52,680 --> 00:05:57,450
Now, if I hover over the action bar, they immediately fade in and a user can very easily click on

98
00:05:57,450 --> 00:06:01,290
one, it's kind of a little bit jarring to see them fade in immediately.

99
00:06:01,320 --> 00:06:03,570
So we might decide to also put in a transition.

100
00:06:06,690 --> 00:06:13,140
A opacity over point three seconds identical to what we had in some other location, I forget where

101
00:06:13,140 --> 00:06:17,730
I got my head, that's going to make sure that we change the opacity value when a user hovers over this

102
00:06:17,730 --> 00:06:20,070
thing over the span of point, three seconds.

103
00:06:20,850 --> 00:06:23,490
Now, if I have her over, we get that nice little fadin effect.

104
00:06:24,460 --> 00:06:25,430
I'd say it's pretty good.

105
00:06:26,830 --> 00:06:30,970
All right, well, everything is really starting to come together for our application, so I'm pretty

106
00:06:30,970 --> 00:06:31,300
happy.

107
00:06:31,360 --> 00:06:33,840
Let's take a pause right here and continue on in just a moment.