 Okay, so we're back with another devlog and we're still working on the active applet indicator as I still think it's worth improving and I well we eventually decided to keep it on top but we've also added a very light separator line between the applet and the panel like this so it's a bit more clear that this active application is on the edge of the panel even with an applet that's opened up so it's almost perfect it works pretty much everywhere there are a few like I think I should make this one a bit bigger this one also yeah I should also add some negative margins to the left and to the right but except that the only main issue is that it simply doesn't work on system tree which is I mean a big issue so why isn't it working well that's a big question sorry mic drop and the simple answer is that the system tree is very weird it's not a normal applet it's a container of smaller applets however I thought that it would still be inside of a container and thus be able to read the panel margin so what I do here is basically I start with the root item of the compact applet and then I loop over the parents until I find the container and then use that one to put some negative space however my best guess after I think about thinking a bit about it is that the system tree actually doesn't use this code at all I think it's completely custom so we need to implement this in the system tree itself so let's go give a look to the system tree which is let's start guessing applets it's different repository Plasma workspace applets system tree okay so let's see what branch we're in it's master let's get pulled just for sure and let's open up system tree or is it system tree code the package in this case UI the main UI let's open it up and let's look for where it throws the frame SVG item for the widgets tab bar so let's search for this one sorry not in this file and I remember that there was a comment in one of my videos suggesting me how to actually search properly within the content of the files but I forgot so let's use a very simple key fine which does this so content I'm searching for widgets tab bar and it's in current item highlight so let's open it up this one and if we decided to I don't know put something useless inside of this just to make sure we've picked the right component then we can go into Plasma workspace or compile it okay so let's source the prefix and restart Plasma show this thing that I say you will start and then write her please always confuses me a bit okay and we can see that there is no more highlight even for the system tree global so okay we found the right element it is indeed this one we just need to make it expand so easiest way is to just copy paste the code and of course the negative side is that redundant code copy pasted code is always spent on the long term will create some bugs but in here I think it's just the best solution because I don't see any easy way to share the values from the compact upload to the system tray so I think I'll just go for a simple copy paste so let's pick this one and put it in here I've also learned since last time that you can make Kate remove trailing Westpaces on save which is super cool like I didn't know about this feature and I love it already so thank you so much to the person that pointed that out and now that we've done this we just need to copy paste the uncourse code like this and that should actually be enough like just this will also need to copy paste the code that actually draws the line but where is it this one but again that's more obvious like if you're drawing a line two times then you need to draw it two times so it's obvious it's more clear that you have to copy paste that part of the code so let's see if the uncourse stuff works there's nothing else you're going on right not even layout positioning no what about current item and highlight where is this file sorry this element use current item highlight it's used in main current item highlight we've got this is interesting location is okay what is location used for which lucky okay make sense to decide where to draw the line parent is through it's probably represented based on where it's used opacity is a system entry state expand okay make sense should work let's try this out let's make install should be pretty simple I was thinking that it should be enough to actually go in the system tree folder and make install just that one because everything else I didn't change so let's actually do it now it's helpful let's search system tree tree sorry this should be faster and just as just as nice let's let's replace plasma shell and see whoa okay let's see if it worked seems like it didn't the line is still drawn too close to the upload so what went wrong I know what went wrong dump me there's no such thing as root we need to start from current item and highlight like this and then this this this blah blah blah blah yes everything else is fine so let's make install and then start the plasma shell let's see if making install the system tree folder just is enough and still not working very annoying let's start putting some console logs here let's put some hello this is system tree speaking like this let's make install and replace hello is this is system tree speaking nice and now let's see if there's any value tool I did not find any use for value so we can see if it worked hello this is system tree speaking however okay so this is weird the first time it does not find the values but after that it does so let's actually output the value that it finds so item layout top margin and then bottom margin just like that should be enough okay let's go for it sorry here and then let's replace plasma shell okay we are not getting all error cannot treat property top margin of undefined that's very bad how is layout undefined if we found his upload container didn't couldn't we as assume that his upload container also has a layout property so let's actually try to log this volume stud and see if it's actually what we expect which is true of course should be obviously be true but let's check okay it is true however it lacks a layout property very very very weird okay so let's get let's go fetch the that part of the code which is not this one it's in the containment it's this one is upload container true and then layout and we have these four properties and it's impossible for these properties it's impossible for layout to be undefined we do define it I'm pretty sure so what's going on top bottom left and right let's try to output the layout item at this point should be undefined according to what we've seen before which is very weird okay true undefined why is my layout undefined it's crazy let's see yeah seriously how is it undefined what if I add another property here property string test hello world and what if I try to read that one of course I need to recompile plus my desktop as well so test item test and let's recompile both of them so make install here and also here okay let's go for it true undefined hello world hello work sorry hello world is working but layout is not however we can do some magic tricks because I have defined get margins here so we can actually use this function instead of the layout anyway it's the same like top margin is get margin top so let's try to see if get margins is defined defined so let's go for get margins should be a function if it's working I don't know what JavaScript's hot boots when it sees functions true undefined and what how did we go from true undefined hello world to true undefined undefined I mean that's because I removed did I remove test yes I took it off okay but I didn't recompile yes I really compiled plasma desktop and not plasma workspace okay this is an tray okay so let's see if the function is actually it's actually seen and it is function get margins native code okay thank you good try good try so let's actually use that one so we can return item get margins and instead of bottom margins you can do bottom and write however just to be sure let's also log the top margin from here just to see if it's working maybe it returns zero form for some reason I mean it's always good to check what you're doing and then that's pretty much it is it yes it's it's not a layout object anymore we need to change the name but that can come later so let's make install and replace okay it's outputting eight which is very good and wow works very nice almost works almost okay so for some reason we broke it for okay so if I click on an applet it will show it for everything which is very wrong and I think I need to take off the where is it help aren't this was not supposed to be there let's make install yeah that one was probably off let's see broken okay how is this element positioned exactly seriously how do we update what's this update I like okay change highlighted item which okay so it's manual manually changing the width and height okay so we need to work here so let's copy paste this one and then the X is going to be minus the top margin this is going to be a mess to implement with all four sizes let's do it for the bottom first plus but a margin plus top okay like this and of course we just take off this let's see let's go for it now we can also take off the where is it this this thing we know it's eight now so no need for that one okay it was why of course it was not X how did I get that wrong okay like this and of course it's not the width but it's the height okay very nice now we're speaking very nice okay now we need to actually implement the line well we should implement it for all sides first okay let's do it so plasma core types left edge we can go with I let item plus this one goes here and this is only to be added if it's a horizontal panel so if plasma core if location is where is it top edge or let me check one second plasma core types where is it plasma core top edge what if there's a cleaner way to do it maybe there's a horizontal edge okay so it's floating equals zero desktop full-screen top edge but a match left edge right edge okay there's no way to okay no there's no way to simplify it I need to write it as is so it's location equals top edge or location equals I mean technically could write location I mean let's do it location and plasma core top edge or bottom edge like this otherwise zero this is way too long for line let's split it somehow where do we split this here I don't like it let's go for because we need it for the width as well now of course swapping the shoe this of course left and right like this and now we get something a bit more complex here you know what let's just go for something that's way easier to read let's just use a switch I mean common why do we have to make our life that much harder I know it could be wrote in a easier way but as which is just fine so if it's left then let's take this one off okay like this and what I should also check case location default and I should also check if if if this element actually exists that then do the switch otherwise it makes no sense to even try to do it and if it's left okay if it's bottom here then we need to decrease the y like this and increase the height much cleaner and then almost the same this one except it's top in this case it's x I mean it's plus here is it nice still minus this case x minus left plus left right and it's with and in this case it's right is it nice left if it's right edge then minus the epsilon minus the top one okay it's always top and it's always left is it is it why is there no break here sorry but oh yes I forgot okay so it's is this correct right edge you took off left margin left edge still left margin okay so yeah makes sense but this is the same this one and this is the same this one so we can actually just do like this I think I never used switch cases so I might just be wrong or fully wrong we need a default case and I let's put a default here I think you're supposed to use switch cases like this with full throw let's check just for sure JavaScript switch case for throw I'm a Python coder and Python doesn't have a switch case so I'm authorized to not know about the exact okay so yes it is like I was saying nice okay let's try this out this one is obviously not needed anymore let's try this out okay works for oh or did you go okay so it works for the first one but it breaks after that with no error but why why are you doing this to me this is very weird with hide if blah blah blah blah blah blah blah blah blah I don't see anything wrong and there's no error either in the console what's up it's not like it completely disappears because it goes up why is it going up what's be be equals parent map from item highlighted item let's do this this is going to look weird but let me explain why I decided to do it so my impression is that I'm actually making the highlight to go up every time so let's go if I can make it move down which would actually be visible so like this and you can see that it moves down each time okay so that's the problem it doesn't disappear it just moves up which shouldn't happen because I thought that why was reset every time with this P what's going on P parent map from item so I actually only need to apply the margin one time change highlight okay so it's parent map from item okay let's try to go here and this ain't easy how do I make sure it's applied just one time maybe I could apply it load I don't like that solution though how do map from item works parent what's parent it's this one now it's the parent of this element which is root interesting map from global stuff map from item and we are giving what are we giving or is it an item and two coordinates so yeah maps the point x y or act which is the blah blah blah okay interesting cool stuff okay so it gives me the delta in position compared to that item can't I just is very weird honestly can't I just do this I don't know I need to take a pen and make some write some stuff down because I'm really confused on what this should be what this should achieve like seriously I don't get it okay wrong direction okay let's see like this okay okay it's here instead of here so not the right direction either so it is plus the first time but then it's it adds up I'm very confused but I mean why are we even changing the why I yes you could use a grid of system let's actually switch to a grid for a second so how do you switch to a grid again like this didn't work hey hey how do you switch to a grid okay smaller panel please this is just okay 68 is the required panel height to use a grid come on how would anybody use a 68 pixels high panel horrible okay so let's get back to working stuff this is what happens when you mess with absolute positioning instead of using layouts and anchors but no I'm not going to port this thing to an anchor nor to a layout let's keep it as is most as much as possible so okay so give me the coordinates of this element compared to the one of the parent assuming zero and zero where the parent is hopefully the root then why do we have this problem of changing x and y I really don't get it okay so I was wondering we should only do this one time so on the first appearance and the first appearance is when you didn't have any highlighted item here so we should check whether why are we defining a new variable why are we giving highlighted item the value of next item doesn't make sense we can just use next item and then this allows us to do and there's no highlighted item yet because after this function runs the next item is becoming a highlighted item but this is after that so let's try this works better however there's also another issue which are current item highlight okay so 162 required 162 what did I mess up else did I okay so I need to like do this because highlighted item is a global variable okay okay I mean it's the same I just change it after calculating the x and y instead of before let's see if it works hello okay okay so now it works now it just doesn't work come on it works the first time you click it and then it doesn't but why why on heart this makes no sense at all okay so let's try to make it means that the problem is not coming from map from item but from here apparently I don't know but why are you doing this to me okay wait I think I got it it's not about this the issue is not here the issue is the difference in coordinates this map from item is a mess to use I mean it probably does its job fine but arg seriously let's go back to the documentation maps the point x y or rect blah blah blah which is in items coordinate system to this item coordinate system and returns blah blah blah so we are mapping zero zero from next item to parent okay and what's the problem with highlight not being aligned this is one of the weirdest bugs I've ever seen because it's it looks so easy yet so annoying 2 26 32 26 2 26 okay so this is correct py is always 26 as should be so what's where does it become from 26 to 10 between year and year what's going on let's do this I hate bugs they are so annoying and very disrespectful okay so it is 26 and then becomes 18 because of the margin correct but when I switch to this one it is 26 but then suddenly becomes 18 but why if I mean p dot y is 26 I do y equals p dot y and then why is 18 how do we have some behavior on why if we had some on why changed would make sense but this is crazy I mean I've just done y equals p dot y and why doesn't equal p dot y it's amazing go how I'm losing half an hour or sorry it's amazing how I'm losing half an hour on this thing 26 26 okay but then 26 18 26 then 26 2 why how where what's going on on what JavaScript is making fun of me maybe it's what if it's the animation maybe there's that behavior on why makes everything weird I don't know yeah it must be that must be that yes it's the animation oh come on the animation is killing me okay behavior on why it's indeed behavior on why so I should not change the why what if I do this what if I do this and then obviously not this and then obviously this looks worse but should work right at this point any solution is a good solution for me let's see okay it works so yeah like this like this like this like this okay it works however this when you can I check when the system tray is using a grid it always sounds weird when I say a grid because it sounds like I'm saying a grid is the english pronunciation correct a grid system tree state item size visible layout can I check whether we are using grids or not task grid grid thickness rows on columns don't we have a property that says like the number of rows or something it's weird to have a property named rows on or columns which is an integer I would guess that it's rows or columns size but with this name it looks like we are saying this is a boolean value that says if it's either rows or columns but that's that's where is it flow I just want to know the number of rows or columns depending actually let's sorry let me just close this it's not this merge request it's not this merge request there was an open merge request that I'm pretty sure what was doing something similar uh system tray hover sorry I was now never mind and system tray hover merge request this one ignore the actual content of the merge request please I just want to give a look to the code because if I remember correctly it was disabled when it's using grids so I should probably copy this from that root dot one row on our column okay make sense it's parent in this case but same concept so let's go here and add to our if and we are not using grids we are losing the current highlight when using a grid mod but I mean it's impossible to implement it correctly on grids so you need to give up something and in this case is grids I don't like those oh of course I'm not setting the coordinates anymore better but I mean it works we've seen it works so the last thing is to actually add the line inside of the dialogue which should be simple hopefully please nice it works this one is broken I mean this one potentially could be I mean come on no no let's not do this this one could be potential I mean why not let's do this force force edge highlight it's going to be true here and false here this one is when you click on the whole system tray so I can say and rotate this one or enforcing it meaning that it will not use the big highlight for the smaller icons but it will use it for the bigger one so like this but if I click on this one nice perfect now line the line is in I'm trying to get take a guess here plasmoid pop-ups container because we should have we don't nice we don't wrong file let's try again better guess let's actually use k-fiant again it's plasmoid core.dialog okay it's main easier okay let me adjust the microphone okay in main we've got plasmoid core.dialog and we need to draw the line here literally we need to draw the line and I need to be inside the main item SVG item horrible horrible code that's actually needed more horrible code that's actually needed nice okay let's see if it works I'm sorry if I just get back to the code sometimes before compiling but I just want to make sure that I didn't write anything dumb especially when a copy paste I usually forgot to forget to change values okay ah yes I did write something dumb which is that the dialogue here is called dialogue which obviously should replace pop-up window see I did write something dumb I just didn't look for enough time to actually notice and now it should work so we've finally made it the new highlight is let me get to a decent panel size because I can't use this like this fourth is it yes it's 44 by default like this oh come on why is it broken it shouldn't be broken come on works here you've got the line and everything and then it's broken why are you doing this to me seems like one rule or column what if I restart plasmashal maybe that variable doesn't get updated as should nope nope okay ah yes it's parent I even said that I said it's not true it's parent and then I just didn't write it come on I'm not even trying still not working let's see I didn't put enough console logs to actually find this one I can actually remove at this point hello did the system try speaking was it here yes not here rather was it here let's try again function and defined okay so parent one row or column is undefined which means that copy pasting code blindly doesn't actually work as well as I hoped oh look at here look at here so how am I let's just add it this will conflict with this merge request but should be an easy one to actually to actually as it called uh rebase or remove the conflict so let's go here and add okay now it should work let's remove all of the bad code that I let's see nice we've got our line and our other line best lines ever now we need to create the merge request let's go to plasma workspace actually let's do it from here get diff make sense make sense make sense make sense make sense make sense this makes sense this makes sense this makes sense this makes sense and that's it okay let's um get check out nicolov work no sorry opposite work nicolov and better system tree highlight get check out minus b get add this get commit okay make system tree highlight extend to borders and draw a line between panel and open upload get push origin work nicolov uh better system tree highlight nice let's open it up we can actually close this close this companion companion patch for this one the system create now come back no I'm not creating a new issue new merge request please annual patch for I'll say companion patch for system tree is for system tree after let's take a screenshot nice and that should be it well obviously depends on that but also we need to update the other merge request let's move it here this merge request needs to be updated shouldn't be easy but did I change trailing trailing spaces very bad what file is this main chemo no uh those accidental save save okay let's try again oh no why do I still see this I didn't change okay let's only commit this part get add stop package contents upload commit use another better blah blah didn't work get pull okay this is weird get pull origin work nicolov better active upload new gator conflict what happened maybe this was changed in the patch already and I didn't see it nice not uh it means that I screwed up get again hopefully this won't result in a mess okay this time it worked so let's see if it has been updated here come on it did result in a mess but hopefully squashing everything together will fix it anyway solved solved changes works works works okay so we did it that should be it maybe we'll be slightly changing the appearance but code wise should be greedy and I don't think it will be changed much if it's changed at all this looks working as is ah yes I forgot actually well let's do this this part should actually maybe have a bit less margin to the left and to the right how do we do this okay so let's start let's start here so this is the line whereas I need this one fact is that it's not that easy because where is it my nice get margins function actually gives zero to the left and right margin obviously because it only makes sense to have margins to the top and to the bottom when you have an horizontal panel because the horizontal margin are given by the spacing between the high items so by reading this left margin property I'm actually just reading zero zero so let me see layout top horizontal bottom horizontal right okay this and not fill area then this otherwise can I say no I want the margins anyway yes I can I can do I can do where is this file this is plasma desktop okay I can do what are we going to call it return or margins which is false by default can I do that in JavaScript uh JavaScript default parameter can I do that or is everything going to fall and burn yes I can nice would have would have been weird if I couldn't but I mean technically having default values breaks overloading so maybe some languages but like this this will ignore the fact that the layout the side of the layout is the wrong one so yeah and now we need to use this one here it's not a layout object container margins this way it will give me the margins for all settings regardless of whether I should actually have them or not also here I'm still calling this one sorry about that of course searcher place wasn't working ctrl r ctrl r sorry is mapped to the simple screen recorder so every time I try to do a control error to replace it was messing up how did I hide the toolbar of Kate what did I do wrong oops better and now okay let's try this is is plasma desktop stuff entirely no this plasma desktop plasma desktop okay so let's try plasma desktop let's do this so now you should have a wider highlight or a completely broken one one of the two wider nice even too wide is it nice oh no oh no I bet people are going to complain that the line isn't touching the border but for now it's fine but about here of course this one is left unchanged but this one works might even seem a bit too big I'm sorry this one sorry I think it's fine yeah it looks fine very fine okay so we can actually push this already yes just a second am I doing everything correctly I still have those but whoops I need to add a compact desktop package and I mean when the upload moves was it when the when the upload there's no trailing space maybe ah because I removed trailing ah because it automatically removed all trailing spaces so it's for the best okay so let's add these two files okay now we should probably do the same for the system in tree one so here I'm doing this and let me think I might as well do this okay forget for a second that this switch doesn't make any sense at all because I'm just looking to see if it works that's the point right now let's see if this one works it might not work because it big sources a lot so let's see like this I forgot to open up the system tree folder for faster building but never mind let's see if it's too wide as a highlight or if it's just fine it gets wider very funny very funny okay but let's fix that because I'm using the plus shouldn't use pluses oh I forgot again to change the the rupture never mind okay so it is wide is it too wide maybe nah it's fine it's fine this is fine and of course we don't need this switch at all much better blah blah blah blah nice let's push it just like this everything should be ready and done nice so let's consider today a productive day and let's just wait for a review for these two patches I think it looks much better than before nice