If our smallest item is showing a code cell, we want to make sure that the action bar has that nice
dark background applied to it.
In addition, we want to make sure that this extra bar is being displayed on top of the code.
So so it's not kind of sits directly with it like.
So that is what is currently happening with the action bar.
The action bar is being displayed on top of the iFrame element.
So we need to make sure that if this is a code cell, we show this extra dark bar and show the action
bar inside their.
OK, so to do this once again, we'll flip back over.
I'm going to then take a look at our code case up here for the statement, we're just going to directly
out in a little bit of code right here to decide whether or not we want to add in that extra little
or something, that external action bar.
And if we do, we'll just wrap with another element to make sure that we can show that kind of thick
background as well.
So let me show you what I mean.
I'm going to find child right here.
I'm going to wrap this with a react fragment.
Remember what a fragment is.
This means that we can show many different elements inside of here.
But this is not going to actually create any kind of DOM element that will show up inside the browser.
Then right above or below is what we want our seemy we want right above photocell, I'm going to add
in a div.
With the class name of Action Bar rapper.
And I'm going to go down to my render statement and cut action bar out.
Now, as you guess, we can apply some success to apply some styling to action bar wrapper, make sure
nothing shows up directly on top of Kozel as 100 percent with and maybe apply a background color as
well.
We do, however, also need to make sure that we still show this action bar if you're showing a text
editor.
So in a very similar fashion, I'm going to wrap this with a react fragment.
And right below it, in this case, again, to solve this whole Z index issue, I'll put another one
of those action bars.
So then down at our return statement, we're left with once again, just child.
Quick thing, I would like you to double check, make sure you do not have any semicolons at the end
of text editor or code cell, if you have any semicolons, those will be rendered inside the browser
as text.
Definitely not what we want.
It's let's save this really quick, go back over a quick test.
OK, well, I'm not seeing.
Our action bar wrapper element.
Let's just do a quick inspection.
I bet you we can find it really quickly.
I'm going to find one of our smallest items.
So here's all for them.
I'll find one of the smallest items that are being used for a code cell.
I'm going to expand it.
And there's our action bar wrapper.
The problem right now is that it has a width.
And you can look at computed right here.
That's a full with.
But right now it has a zero height being applied to it.
So we're going to add in a little bit of custom success to this thing just to fix the styling a little
bit.
All right, so back over once again inside of our Ed, we'll go back over to sell list item.
I'm going to add in a selecter for action bar wrapper.
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
pixels, which should be enough to show the all those buttons that we want to show.
I'm going to give it a width of one hundred percent.
We'll give it a background.
Color of pound three seven four one four B.
And I think that's all we need for right now.
We're going to save this look back over a there we go now Archerd cells have that nice kind of dark
background right above it that just give us some very clear separation from the text cells.
One thing we might want to do very temporarily, just to make sure everything looks somewhat reasonable,
is that in just a little bit of margin on the maybe all sides of sell this item, we're going to remove
this almost immediately and replace it with some other solution.
But it just give us a little bit of separation between all these different cells right now.
Just we can make sure that everything looks somewhat OK.
It's going to go back over fine.
Sell this item.
I'll give it a margin with maybe 20 pixels on top and bottom and then 10 pixels on left and right.
That's a shortcut for that.
So 20 pixels, top and bottom, left and right.
I'm going to save that.
Yeah, I'd say this is starting to come together, maybe a little bit more than 20 pixels.
Tried to get up to 40.
All right, now that's starting to look pretty good.
Well, I'm pretty happy with what we have.
I am going to delete that margin line we just put in, because, as I mentioned, we're going to eventually
come up with a little bit better solution.
There are going to be some elements that are going to insert between these different cells very shortly.
But overall, I'd say this looks pretty good.
And just as a very final quick test, I should be able to move these cells around very easily as well.
And it looks like that's definitely the case.
Maybe it's just one last very small thing, totally optional, once again, those action buttons are
just a little bit too prominent.
How often is it, anyhow, that a user is going to want to move these cells around?
So absolutely optional, totally up to you.
But one thing we might decide to add in is to go back over to our Action Bar Scissors file.
And I might put in an opacity here of zero point five, which is just going to fade these buttons out
a little bit.
Yeah, that's a little bit better.
We might even want to go a little bit more like, let's say point to five.
It's a really kind of fade them out and then we can add in another one of those hover rules so I could
put an action bar bill and hover.
So if the user ever hovers over this thing, I'll set the capacity to 1.0 right away.
Now, if I hover over the action bar, they immediately fade in and a user can very easily click on
one, it's kind of a little bit jarring to see them fade in immediately.
So we might decide to also put in a transition.
A opacity over point three seconds identical to what we had in some other location, I forget where
I got my head, that's going to make sure that we change the opacity value when a user hovers over this
thing over the span of point, three seconds.
Now, if I have her over, we get that nice little fadin effect.
I'd say it's pretty good.
All right, well, everything is really starting to come together for our application, so I'm pretty
happy.
Let's take a pause right here and continue on in just a moment.