 Hello and welcome to the weekly KD news where I show you a bunch of changes that are happening in KD And then I actually show you the code to make you understand a bit how it actually works under the hood So let's get to the first one which is overall the up page of this cover last week some people ask me if Discover was getting a redesign and well slowly it's getting one first these page The ups page and then there's also talks about redesigning the home page and so on this is specifically about the page showing the application So here we have a couple of examples. I think they're a pretty good one This is a new as an example what we get differently is this header on the top with all of the information and then big buttons screenshots and text and it might look like quite a complex change to make and it probably is from scratch, but if you do understand like the basic ideas of command This is actually pretty easy to understand. So I'll show you the code and as far as how it looks It looks pretty good. I think it's an improvement and actually since I forgot to do that Let me thumbs it up. Then we got a sorted UI improvements for the SMS application We can see that as an example We do get now a search bar, but also here There's the search bar as well in here we can select a device to show the SMS messages from and It's mostly about this plus a lot of other things that I won't go through all of them Still improvements for the SMS application if you don't know about what this is It's caddy connect caddy connect actually allows you to see your SMS messages from your desktop Even though your SMS are on the phone. So that's pretty cool next we have the add medium spacing property and I showcase this even though it's not really important and Probably might also not get accepted because well a bit of time ago somebody Well commented on one of my video something like you should use something like CSS Classes to have one margin that applies to all of the elements so that it is consistent and The fact is that of course we do that like it's not like we are setting margin Independently for every single element. That's not happening. What we usually do is not only of course Have some margins for classes, but also even when we set margin Quantities for those classes. We have some variables that represent very some amount of spacing that we can have small spacing medium spacing large spacing in this case the the proposal I guess together with this one which change small spacing and large spacing is to add a Medium spacing in between the small and the large one right now as far as I know there's only the medium and large now small and Large are four and eight pixels Medium spacing if I'm correct should be equivalent to six pixels now, of course that in theory should depend on Like the font size as an example the spacing the actual spacing changes depending on the font size So the change itself is pretty easy We're just adding a new variable whose value is the small spacing multiplied by one and a half So four by default multiplied by one and a half is six So it's exactly in between large and small It's important to notice that large spacing is small spacing multiplied by two So kind of makes sense and then here we have a proposal to actually make small spacing a larger spacing in Corigami, this is all about Corigami Sorry forgot to mention it for space for pixels and a large spacing eight pixels instead of it Depending on the grid unit. So the context of this one this patch is that the grid unit in theory should adapt on XR external sorry factors such as font sizes as I've said and the proposal is to actually scratch that and make it always some amount of pixels and As you can see there is a lot of text explaining the lodging behind this merger quest Which I think is really nice So if you're interested to discover more how margin actually works and why it seems to be inconsistent in plasma and how to fix it Well read like go through this couple of merger quest to understand it a bit better and keep in mind that most of the time Well, first of all, what seems to be inconsistent sometimes is actually depending on how you measure it We've seen a lot of screenshots that claim that margins are inconsistent but they're actually they actually are and the people who did a measurement did wrong and Some other times there is inconsistency and those times it should actually be easy to fix it So if you found something that's wrong Well, you can try to contact me and I can try to help out I can't fix everything But I can try to help you fix everything next one improve the do not disturb DND is do not disturb mode explanatory text So before we had do not disturb until today at 1 36 p.m now do not disturb automatically ends today and This is one of those little little changes that contribute to the users actually understanding What's going on a bit easier now? It's not like Necessary it doesn't fix anything that was terribly broken But a lot of caddy depends on this like sure small patches But those that do actually make a difference when you're using it We'll see of course how these things are implemented code wise later in the video First of all, I'm just showing you all of them. Lastly add Indicator line to show desktop So as you know when you click show desktop you see the desktop and right now there's no indicator that it actually happens With this patch, you actually see a new blue line that says hey You're seeing you're showing the desktop if you click on me again, I will turn off and get back the windows So let's go through the code So this one is actually pretty easy what we are adding is a line and how do we add a line? We add a frame SVG item. Why a frame SVG item? So that line is actually an SVG Why is it an SVG because it comes from the plasma theme now plasma theme could be breeze and In that case if only breeze exists that in the world We would probably just use a rectangle or something But since third parties could also do their own themes and they cannot do right now QML themes Well, we have to go with SVG So we load up the SVG from the theme by default it's breeze and by default it's a line Third party themes could be something different. So we do load that SVG and then we have anchors field parent Let me actually zoom this in anchors field parent simply means Make this as big as the parent element, which is probably the root element So as big as there's space available image path Widgets tab bar. This is the actual path to the SVG relative to the Plasma theme. So if you go into the plasma theme, there is widgets tab bar dot SVG and you open it And there's all sort of lines now there are all sorts of lines because that line could be on the top on the bottom on the left on the right and Prefix the prefix variable is actually the one that says, okay, I want this particular line We have at least five kind of kind of lines The West, North, East, South one and the active tab one which to be honest I forgot what that one is but these four are pretty easy to understand It's about the four sizes Sides now plasma core types left edge top edge right edge is Saying depending on the location of the plasmoid. So if it's on the left edge, you use the West So the right line if we are on the top use the North so on the bottom line If you are on the right we use on the East so on the left line and I mean, that's pretty easy to understand if There's no prefix. So if we are not in any of those cases We use just active tab which is I guess a generic something that doesn't assume the direction Or maybe it's just a line on the top and don't remember then there is opacity if we are showing the desktop Then it's one which means that it's normal. Otherwise, it's zero Which means that it's invisible and then we see on opacity We do a number number animation about the where is it the opacity? Sorry. Yeah, it's here Which lasts plasma core units short short duration and with this easing type So this is just to actually animate the peering and disappearing of this line Next one do not disturb Explanatory text. This is of course pretty easy. We are taking the time We are formatting it and then we are adding do not disturb until date Automatically ends and then there is this which means that in here on the first position Hence the one insert lower case and the time which is the time that well The do not disturb mode actually ends in Formatted as it's written here. So lower case plus slice and what that ends up being is today at 136 p.m. Pretty easy this one this one. I mean I've shown you before It's just changing the grid unit divided by four to just four, which means four pixels is a pretty easy one In here as well. We say the small spacing is grid unique divided by four. We remove that It's just four and so on in here. Similarly. We're just adding all of the properties We're saying there is a lot. Sorry. There is a medium spacing which is small spacing multiplied by 1.5 There is a medium spacing. There is a medium spacing, which is more spacing multiplied by 1.5 If you want a medium spacing get the medium spacing if you want to set the medium spacing and Well, if it's the same as before don't do anything But if it's different then we actually set the new size We do say that we set a custom size for the medium spacing and then we emit a signal to let everybody know that The medium spacing changed pretty easy in here. We have a bit of documentation This one. Well, I go I won't go through the code of this one because it's complex and I want to do this one Which is even complex here, but I mean I've shown you this before. Let's jump into this one So for this one, I I will actually need to Take this reference to actually show what everything is Comparing it to the actual screenshot. So we are adding I'm only going to talk about the green lines because it's adding stuff The red lines was removing what was there before so green lines Important stuff column layout. This is the header layout with the screenshot up. I'm sorry. I went to have yes Sorry, I missed a part. Okay. This is the column layout a column Which is the pitch content and I mean it's everything It's this part up here the buttons the screenshot text this contains everything inside of this one Which is called page layout and as a spacing between all of the elements vertically Which is up in for internal spacing there is a rectangle, which is the header and its background rectangle So this one which is a darker gray now underneath this one Well, we say first of all the implicit height is the height of the header layout So of the elements inside of it plus the header layout anchors top margin So plus the margin of the elements inside of it The color is the background color, but a bit darker pretty easy Then there was there is what I was talking about Which is the header layout with the screenshot a bacon name everything and other which is a column. So Where is it screenshot? Why screenshot up icon? So here here here here Okay, so this part on the top left screenshot I'm a bit confused because screenshot are actually on the bottom and there is a spacing between the elements of zero Because as explained by the comment children bring their own spacing So first of all, we have the screenshots, which are probably If I have to guess let me try to guess If we see all of the screenshots here, okay, you can see that it's actually on the top here It's probably either a hold or newer a screenshot, but yeah screenshots on the top and it's a scroll view So basically it's a list of elements that you can actually scroll through because maybe the screenshots are more than you can Actually fit it's visible if the count of screenshots is at least one pretty easy to understand it fills all of the width and the height is Well the windows height multiplied one-fourth of the windows height or at least 20 grid units from Kurogami and then we have an application screenshot Component which is in a separate file here and well it just displays all of the screenshots Then we get a separator here Which also fills with and is visible if there is at least two screenshots could be Okay, I'll admit I'm slightly confused by the fact that this separator is only shown if there is at least two screenshots But I guess the idea is if there is only one screenshot Then you won't have to scroll because it's actually it just fits and so it will just display this screenshot And that's about it makes sense and then there is a rolling out which is horizontally with the margin again Margin is around spacing is inside and again children bring their own and there is the actual app icon which is here and We get the size of the icon which is some math. It's not particularly complex and then we set that Size to be both the width and height the source of the icon is the app info Application icon the right margin is up info internal spacing and then we get a column layout Which is this column one two three four elements with app name description Description author a rating again no spacing, but it does fill width So it's as large as possible with a heading So the name of the application is bigger. It's bold The text is up info application name and it also fills with then there is font width and so on Then there is the short description which is a label and it takes the text from a pin for application command Then there is an item which is just implicit height large spacing. So it's basically a margin of With actually sorry height large spacing then Here you can see that there is this spacing. It's actually an invisible item Then there is another label for the order. Then there is another invisible Element to actually show the margin from this thing here and then there is a row layout So again horizontally because we have to display all of the stars and rating one on the left and one on the right So technically it's a row with the rating and the label which says ratings or no ratings yet Then we get a column yet column layout, which is this one on the right with well You guessed it a label then a separator and a label Then a separator then a label then a separator and in all these cases There is fill with true So it's as well with as wide as possible is slightly transparent so it looks a bit grayish and The text is distributed by and then you always go get the info from up info So it's not particularly complex We get all of these things and then there is licenses here, which is a flow So there might be more than one. That's why we get a flow Flow it is generally like could be some it really depends. It's a layout So it's to actually show all all of the elements But you can't really tell what kind of layout without looking at the code in this case you align elements Horizontal in the center in the horizontal center So I guess one on top of another I guess and then there is a repeater using a url button so a link and the link has as Or is it model data which comes from up here? Which is the model which is up in for application licenses. What's happening? So the model up info application licenses has all of the information about the licenses in particular It has two things which is the name and the url So and when you're when we're giving the model to the repeater it has it creates a lot of copies of this url button Saying for each one what is the name and what is the url of this particular element and it's a link It's just a link then we get another separator and that should be about it What else colon layout layout for textile content probably the description down here then another element And it's external external resources. I can't speak anymore and it's documentation website don't need to report back and We see that it's named button button layout. So it's a property and Guess what there is a tool button with a tooltip and then there is another tool button. How are these tool button made? Simply put the width is the widest button in the button layout So we take all of the buttons we see how with How wide sorry again each button is and we take the widest and we use that size for all of the buttons we Show the button only if the help url isn't nothing Otherwise, we don't show the button and then the text of this particular button is documentation Then there is website and for each one. We also show a name. We just sorry an icon We just give the name of the icon in this case internet services then button button Tooltip tooltip is of course when you put the mouse on top on top of the button And you leave it it for a bit of time in this case is Install of remove add-ons for the application name and that's it really there was still a couple of changes Later on but then it's mostly red stuff. So the older things So I've just went through this whole change, of course, not really Reading each single line, but that's not useful I was here to explain you the general concept and as you can see I think it's not that difficult to understand. You just have to have a rough Understanding of QML really and that was everything. I'm really happy that you made it this far 23 minutes is a lot is much longer than usual So really, thank you for sticking around this long and also. Thank you for all of the people there Oh, I got the right direction. I usually do this all of the people there for sponsoring this videos And that's what really allows me to make them because I do this Basically every day and it's not really easy to find the time and given that I do receive donation Then it's like my job and I'm able to actually find the time to do this. So it's very nice So thanks everyone and see you tomorrow