 Hello and welcome to KDE News where I show you a bunch of merge requests and then I actually explain to you a bit of the code that's underneath them so you can actually start developing too for KDE or whatever if you're interested in that. So let's go through all of the merge requests so you can see what's new and then we'll also dive into the code later. This is the first one which is very simple. You take this cover and right now this cover has lots of full width cards. With this merge request the cards are actually split into two columns which is pretty nice to have. In this merge request which is about a season tree if you're on tablet mode then the icons will actually become a bit bigger so they're easier to touch and with more spacing between each other and of course if you click like within an icon or the next one the icon sorry the click gets redirected to the closest icon so that you can actually click whenever and the spacing actually helps. In this case K command bar is that bar that appears if you click I forgot about the exact shortcut I think it's like Alt-Shift-L and it's like a bit Kiraner but for applications if you take Dolphin as an example you will see something like this with all of the actions and thanks to this merge request now it will appear to the top attached to the title bar as if it was like a real Kiraner but for the application which is very nice. Then there is this which is make up up delegate icons less enormous so if you see this they're pretty big all of the icons now they have a more appropriate size and they breathe a bit more there's more margin which is nice. Here I choose the simplest one the simplest merge request so you can actually understand the code fully. In this one so as you know if you right click on the desktop there's lots of actions and there's work on going to try to remove some of them maybe the less useful and in this case the activities menu from the contacts menu will disappear if you're not actually using activities so the default menu will be a bit smaller by default. In here the removing message is more instructional in the sense that if you're transferring files to the USB stick you have in your computer and those files are being transferred and you click on the unmount button then you will see don't apply yet files are still being transferred which is pretty useful not to actually lose any file. In this case all you know how applications in the task manager can show to you a bunch of you know the number of notifications they have as an example telegram desktop does this well now the actual icon will be a bit prettier because it will follow the icon sorry I meant the notification the number of notifications will be a bit prettier because it will actually follow the new breeze blue ocean style that we've developed and lastly of course I didn't want to zoom in this much. Lastly if you're using a curgami app and there's a contacts menu that contacts menu will become a bit bigger if you're into tablet mode which is pretty useful. Now let's see how these are actually done. So first of all this one now it's very easy even looking at a patch to guess how it's done. You've got the contacts menu and there's probably a QML element which is called menu and inside of it there are all of the menu items and there's probably a spacing or a height and now it's bigger on tablet mode. If you go see the code then we've got menu item dot QML which is well the QML file that represents that menu item and you've got here vertical padding and the vertical padding of each menu item instead of being four is now. See if tablet mode is on and if so it's eight otherwise four. Same here the preferred height of the elements is if we are on tablet mode then it's a small menu which is in between from small to menu icon size otherwise it's small. Pretty easy. Next one. Blue ocean style. This is another QML change and we've got this badge dot QML and in here we've got a rectangle. So the badge is actually a rectangle. It doesn't look like one but that's because it's actually around it. It's a rounded rectangle and now we say okay we read the color code highlight color from the plasma theme okay and then we say the color of the rectangle is that color but with 0.3 opacity so transparent. Makes sense and then we say the border color is that color as well without the transparency so it's actually a peak and then we say that the width of the border is well it depends on the pixel ratio but it's probably I don't know one two by default and we don't need anymore to use the highlighted text color which was the wrong one really. Now we just read the color the highlight color and we set it. Very easy. Next one. This is make removing message more instructional and this is done by a creating a timer. So a timer is just a thing that counts time in this case one second 1000 milliseconds so one second and it doesn't repeat. So you start it and it counts one second and it's like okay I'm done. You start it it's called the restart but it's actually easy to start it as well. Whenever you're actually unmounting something and then here which if we go see is where is it the subtitle for you know the actual element in the list the subtitle is if the timer is running which means if it has been less than one second since we last pressed unmount then it's called removing. Otherwise it's called don't unplug yet files are simply transferred. So basically we're saying if it has been less than one second since we last click on the mount then you show this otherwise this. Pretty easy. Next. This one we see that first of all it imports this library in the CMake list not library especially pronounced like that but it's a framework. It's one of KDE's framework. KDE has a lot of frameworks some of some are very related to KDE so activities is a good example. Some are like about translation 18n is translation. In this case the activity framework is used to actually know if well there is at least one at least two activities and what we do is that if we're adding an icon whose name is manage activities then if activities activities which is the list of activity an array length is one then you return an all pointer so you don't actually do anything otherwise it goes on and it reaches this line where you actually add an action manage activities. Pretty straightforward. This one of course you need to know where to edit to actually add these things but well it's a good first step to actually understand what's going on and then you will be sooner or later able to actually do those things yourselves. This one is making the app delegate icons less enormous so as before we're expecting some changes in QML so that the margin is smaller and that's it. So we've got left margin which is a property of the item app icon pretty straightforward and the left margin is if we're compact alert spacing otherwise double that spacing and in here what was grid unit multiplied by three is now icon sizes large what was grid unit multiplied by five is icon sizes huge now of course to understand this you need to understand that icon sizes large is bigger than grid unit multiplied by three and icon sizes huge is bigger than grid unit multiplied by five but it's not like I know those values by heart either you can just look them up and in here the left margin of the element let's see container for everything but the icon the app icon so the text in the card well double the spacing pretty easy. This one this one is slightly more tough so it's c++ let me enlarge this a bit there was this function which disappeared it was called update view geometry but now there's a new one called show what's going on so you create a rectangle called parent geometry so the geometry is actually sorry position and size of something so we're trying to build a geometry for the k command bar based on the geometry of the parent which in this case is the actual window calling the k command bar this bunch of code I won't go through it but is to actually read what's the geometry of the parent and then math we set with a minimum width and minimum height to five hundred and two fifty hard coded values the maximum width is the width of the parent geometry which makes sense you want to be larger compared to the parent the maximum height is the height of the parent geometry therefore the preferred width the one we'd like to use is the max width divided by divided by two point four and the mass height is the height of the parent divided by two so you take a window you make it two point four times smaller two times smaller and that's it you've got it then you create a size which is hopefully the preferred height but if it's too big then you go with the max width and if it's too small too small you go with the minimum width step forward you set that size and then you also make a position which is you take the geometry of the parent window you take the center you take the x coordinate and you subtract the width divided by two so you actually go left and you're centered if you know a bit of math this is really easy and we also take just the y coordinate of the parent so we're on the top and then we carry it up up in that position next one tablet mode for the for the system tray so you can see that this uh merge request actually adds another option in system tray settings which is panel icon spacing but default is normal and you can also make it larger if you want but if you're on tablet mode then this is large by default and in the air panel icon size you get to choose between small and scale with panel width by default is small but if you're on tablet mode it will be scale with panel width so it's actually bigger so how is this done so we are adding a new option so there's a new entry into config main dot xml and the new entry just says okay there's a new entry it's called icon spacing it's an integer and it's the spacing between icons step forward and then you actually add in config general dot qml which is the actual qml file to actually show you that option while you get a combo combo box which is the one that you use to choose the options with small normal and large this is not very interesting the interesting part is this one here so the cell spacing the spacing between the system tray icons is before it was just plasma core units small spacing multiplied by two now it's a plasma core units small spacing multiplied by okay check if we're in tablet mode and if so let's go with four actually otherwise you just choose plasmoid configuration icon spacing which is the one that the user actually choose last one this is the most complex one but still is qml and if you want to go through all of the merge requests it's not that difficult to understand now it's 100 lines of change but really it's a bit straightforward i won't go through all of it obviously but i'll give you an idea so we get a property bold featured which is false now what's the idea we are trying to change our feature apps works so we get a new property which is called featured that is true if we are on the feature page and false if we are not so if that featured property is true then you get the split view otherwise it's just one line then what you get that this element implicit hide so probably like the height of the cards probably you can see what a specific element is by as an example adding a rectangle a red rectangle with uncourse field parent and then you'll see the rectangle and you'll go highs that element the implicit height goes from being six to four depending on if you're on the feature page or not he near the container for everything but the app icon goes from being right parent right left it's just field the parent element as big as the parent element then you get a spacing which is curriculum units small spacing you see these these are constants so they say okay by default we use a small spacing which is I don't know true as an example and by putting that into a variable we can reuse that variable everywhere and whenever we change something it's changed there and this spacing which is the spacing between elements is between a row which is the container for the app name and the backend name labels so you get I don't know probably the app icon could be also the app name for sure and the the backend name labels so probably like flat pack stuff like that there is actually an icon which is the app icon and all of these elements by the way are spaced between each themselves sorry by a small spacing and we get the icon of the app which is called resource icon we get it from application dot icon so the icon of the application set word and the height of the icon is grid units multiplied by three and the width is grid unit multiplied by three now I could go on and on you need to go check out which element is which but it's not that hard to do and there are even comments trying to explain so it's very nice and that was it really I hope that you learned something out of this video hopefully it was instructive though some extent and as you can see a lot of plasma is actually QML stuff and QML is not that hard to understand you can if you're interested in contributing to KDE but also I don't know developing your own little project use a bit of QML personally I do use QML for my personal projects and it's a little tool with some bugs sometimes but I mean all projects have bugs and sometimes QML make me go crazy but kitty plasma makes a very good use of it and it's very easy to you to learn it so if you're interested in contributing to KDE that's the best way to start truly see you tomorrow