Commit 3241ceb7 authored by Carl Schwan's avatar Carl Schwan 🚴

Plasma 5.21 announcement

parent 1347158d
.text-on-background {
position: absolute;
bottom: 4rem;
right: 2rem;
text-align: right;
color: white;
}
@media (min-width: 900px) {
.boxes {
display:grid;
grid-template-columns:repeat(2, 1fr);
grid-gap:3%;
margin:2em 0;
margin-bottom:260px;
--translation: 0
}
.boxes .box {
width:100%;
height:0;
padding-bottom:65%;
border-width:0;
background:inherit;
transform:translateY(var(--translation))
}
.boxes .box:nth-child(odd) {
--translation: calc(var(--skew-padding))
}
.boxes .box:nth-child(even) {
--translation: calc(var(--skew-padding) * 0.5)
}
}
@media (max-width: 899px) {
.boxes {
display:flex;
flex-wrap:wrap
}
.boxes .box {
flex:0 0 50%;
max-width:50%;
padding:0 1rem
}
}
@media (max-width: 799px) {
.boxes .box {
flex:0 0 100%;
max-width:100%;
padding:0
}
}
p, h2, h3, ul {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
p {
font-size: 1.15rem;
}
.header-plasma20 {
background: radial-gradient(circle, #c203c5 0%, #4e02a7 80%);
color: white;
}
.header-plasma20 a, .header-plasma20 a:hover {
color: white;
}
.feature {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center
}
.feature>div {
padding:20px
}
.feature>div:last-child {
flex-basis: 50%
}
.feature:nth-child(2n)>div:first-child {
order:1
}
.feature:nth-child(2n)>div:last-child {
order:0
}
@media (min-width: 800px) {
.feature {
flex-direction:row
}
.feature:nth-child(2n+1)>div:first-child {
order:0
}
.feature:nth-child(2n+1)>div:last-child {
order:1
}
}
h1, h2 {
@media (prefers-color-scheme: dark) {
color: white !important;
}
}
.round-top-right {
border-top-right-radius: 2rem;
}
.round-top-left {
border-top-left-radius: 2rem;
}
.round-bottom-right {
border-bottom-right-radius: 2rem;
}
.twilight {
padding-top: 3rem;
padding-bottom: 3rem;
background: radial-gradient(circle, #555 0%, #001725 40%);
* {
color: white;
}
}
.monitor {
h2, img {
text-align: center;
margin-left: auto;
margin-right: auto;
}
img {
height: 5rem;
display: block;
}
}
.applets {
img {
display: block;
margin-left: auto;
margin-right: auto;
}
}
.logo {
width: 4rem;
}
---
title: "Plasma 5.21 Beta"
subtitle: "We made the prettiest thing"
desc: Plasma 5.21 is all about upgrading the looks and usability of Plasma.
description: Plasma 5.21 is a looker! The new wallpaper and new app launcher make Plasma not only easier on the eyes, but also easier to use and much more accessible.
version: "5.20.90"
release: "plasma-5.20.90"
date: 2020-01-21
layout: plasma-5-21
sassFiles:
- /sass/plasma-5-21.scss
datestring: Thursday, 21 January 2021.
features:
- title: "Discover"
content: "Support unattended updates"
logo: https://apps.kde.org/app-icons/org.kde.discover.svg
- title: "KRunner"
content: "Pin KRunner (doesn't close automatically)"
logo: /icons/krunner.svg
- title: "Digital Clock"
content: "Better support for timezones"
logo: /icons/kalarm.svg
- title: "Sound Applet"
content: "The sound applet now displays the live microphone volume"
logo: /icons/kalarm.svg
---
{{< container >}}
## Plasma 5.21 Beta
Development of the upcoming version of Plasma 5.21 has, among other
things, introduced many improvements into Plasma's design, utilities and themes,
with the aim of providing end users with a more pleasant and accessible environment.
Although most things in Plasma 5.21 beta will work fine, please note it is still
beta software and released mainly for testing purposes. Using this software in
production is NOT recommended.
The final version of Plasma 5.21 will be available on the 16th of February.
{{< feature src="kickoff.png" class="round-top-right" >}}
## New Application Launcher
Plasma 5.21 introduces a new application launcher that features a double-pane UI,
improvements to keyboard and mouse navigation, better accessibility and
support for languages with RTL writing.
The new launcher includes an alphabetical “All Applications” view, a grid-style
favorites view, and power actions visible by default with their labels.
{{< todo >}}
Find, reach and run your apps faster and easier than ever with Plasma's
new app launcher.
The new launcher features two panes to make it simple to locate your programs,
comes with improved keyboard, mouse, and touch input, and boosts the
accessibility across the board. Support for languages with right-to-left
writing has also been improved. We have also included an alphabetical "All
Applications" view, a grid view for your favorite tools, and all the power actions ("Sleep",
"Restart", "Shut Down", etc.) are available and visible.
{{< /todo >}}
Last but not least, we have [fixed most of the bugs reported by users](https://invent.kde.org/plasma/plasma-desktop/-/merge_requests/258), guaranteeing a smoother access to all your stuff.
The old Kickoff app launcher is still available at [store.kde.org](https://store.kde.org).
{{< /feature >}}
{{< feature src="header1.png" class="round" >}}
## Application theme improvements
Applications using Plasma's default theme now have a refreshed color scheme
and sport a brand new unified headerbar style with a clean, cool new look.
{{< /feature >}}
{{< /container >}}
{{< twilight class="text-center " >}}
## Breeze Twilight
{{< laptop src="breeze-twilight.jpg" class="mb-4" caption="Screenshot showing Breeze Twilight with a dark panel and light applications" >}}
Meet Breeze Twilight available in the Global Theme configuration, with a dark
theme for Plasma and a light theme for applications, so you can enjoy the best
of both worlds.
{{< /twilight >}}
{{< container class="monitor" >}}
![System monitor logo](https://apps.kde.org/app-icons/org.kde.plasma-systemmonitor.svg)
## Plasma System Monitor
Plasma System Monitor is a new UI for monitoring system resources. It is built
on top of Kirigami and a system statistics service called "KSystemStats". It
shares code with the new system monitor applets introduced in Plasma 5.19 and is
designed to succeed KSysGuard.
{{< todo >}}
Plasma System Monitor is a brand new app for monitoring system resources
and is now an integral part of Plasma.
{{< /todo >}}
Plasma System Monitor provides many different views, offering an
overview page that provides information on important core resources, like memory,
disk space, network and CPU usage. It also provides a quick view of the applications
consuming the most resources.
If you need more details, the Applications page shows you all the running
applications along with detailed statistics and graphs. A process page is
also available for per process information.
History shows the evolution of the use of your machine's resources over time.
Finally, you can also create new customized pages using the page editor. This
lets you tailor the information you get from your system to your needs.
{{< /container >}}
{{< boxes >}}
{{< box src="systemmonitor.png" alt="Overview page" >}}
{{< box src="systemmonitor2.png" alt="History page" >}}
{{< box src="systemmonitor3.png" alt="Application resource usage overview" >}}
{{< box src="systemmonitor4.png" alt="New page editor" >}}
{{< /boxes >}}
{{< diagonal-box color="purple" logo="/images/wayland.png" alt="Wayland logo" >}}
## KWin and Wayland
KDE is pushing to have first class support for Wayland, and Plasma 5.21 makes
great headway to reach that goal.
The compositing code in KWin has been extensively refactored and should
reduce latency throughout all compositing operations. We have also added
a control in the compositing settings so you can choose whether you
prefer lower latency or smoother animations.
In addition, we have also added support for mixed-refresh-rate display setups
on Wayland, e.g. you can have one screen refreshing at 144Hz and another at
60Hz. Preliminary support for multiple GPUs was also added on Wayland.
The virtual keyboard in Wayland has been improved and now supports GTK
applications using the `text-input-v3` protocol. The support for graphical tablets has also been improved and
now includes all the controls that were missing in the previous version, such
as pad ring and pad buttons.
Apart from the numerous improvements in stability, there are quite a few Plasma
components that are getting much better support in Wayland. For example, KRunner
is now able to list all open windows in Wayland, and we now support features required
for GTK4, so GTK4 application will now work.
{{< /diagonal-box >}}
{{< container class="text-center monitor" >}}
![System Settings](https://apps.kde.org/app-icons/org.kde.plasma-systemmonitor.svg)
## System Settings
Plasma 5.21 brings a new page to the System Settings: the Plasma Firewall settings.
This configuration module lets you set up and edit a Firewall for your system and
is a graphical frontent for both UFW and firewalld.
Multiple pre-existing configuration pages have been completely rewritten and are now cleaner and easier
to use. This has been the case for the Accessibility, Autostart and SDDM configuration
modules.
{{< /container >}}
{{< boxes >}}
{{< box src="kcm_access.png" alt="New Accessibility KCM" >}}
{{< box src="kcmserver.png" alt="New Autostart KCM" >}}
{{< box src="sddm.png" alt="New SDDM KCM" >}}
{{< box src="firewall.png" alt="New Firewall KCM" >}}
{{< /boxes >}}
{{< diagonal-box color="blue" class="text-center applets" >}}
## Applets
The Media Player applet's layout has been improved and now includes the
list of applications currently playing music in the header as a tab bar.
Another upgrade is that the album cover now takes up the whole
width of the applet.
![Media Player Applets](media.png)
{{< /diagonal-box >}}
{{< container class="text-center monitor" >}}
![Plasma Mobile](https://www.plasma-mobile.org/img/logo.svg)
## Plasma Mobile
Plasma has always been designed to be form factor flexible.
It can work on a desktop but it's also easily adaptable to work on a mobile.
[The PinePhone KDE Community Edition](https://kde.org/announcements/plasma-mobile/pinephone-plasma-mobile-edition/)
is now shipping. In Plasma 5.21 we are adding two new components for mobile
in the official release.
* The Plasma Phone Components contains the mobile shell but also specific
plasma widgets adapted for Plasma Mobile.
* QQC2 Breeze Style is a pure Qt Quick Controls 2 style. It visually fits
in with the widget based desktop Breeze theme and was optimized for lower
RAM and GPU usage.
{{< /container >}}
{{< feature-grid title="Other Updates" >}}
{{ define "main" }}
<main class="releaseAnnouncment">
<div class="text-center py-5 header-plasma20" style="background-image: url('mk.jpg'); background-size: cover;">
<div class="container">
<h1 class="h2">{{ .Params.title }}</h1>
<h2 class="h1">{{ .Params.subtitle }}</h2>
<p class="h5 mx-auto text-center" style="max-width: 600px">{{ .Params.desc }}</p>
<p class="text-center">{{ .Params.datestring }}</p>
</div>
<div class="laptop-with-overlay d-block my-3 mx-auto w-100" style="max-width: 1000px">
<img class="laptop img-fluid mt-3" src="/content/plasma-desktop/laptop.png" alt="empty laptop with an overlay">
<div class="laptop-overlay">
<img class="img-fluid mt-3" src="1.jpg" alt="Plasma" />
</div>
</div>
</div>
{{ .Content }}
{{ partial "announcements/plasma-footer.html" }}
</main>
{{ end }}
{{/* get file that matches the filename as specified as src="" in shortcode */}}
{{ $src := .Get "src" }}
{{ if in (.Get "src") "http" }}
<img src="{{$src}}" {{ with .Get "alt" }}alt="{{.}}"{{ else }}alt=""{{ end }}>
{{ else }}
{{ if in (.Get "src") ".gif" }}
<img src="{{$src.RelPermalink}}" {{ with .Get "alt" }}alt="{{.}}"{{ else }}alt=""{{ end }}>
{{ else }}
{{/* set image sizes, these are hardcoded for now */}}
{{ $tinyw := default "500x" }}
{{ $smallw := default "800x" }}
{{ $mediumw := default "1200x" }}
{{/* resize the src image to the given sizes */}}
{{ $scratch := newScratch }}
{{ $scratch.Set "tiny" ($src.Resize $tinyw) }}
{{ $scratch.Set "small" ($src.Resize $smallw) }}
{{ $scratch.Set "medium" ($src.Resize $mediumw) }}
{{/* add the processed images to the scratch */}}
{{ $tiny := $scratch.Get "tiny" }}
{{ $small := $scratch.Get "small" }}
{{ $medium := $scratch.Get "medium" }}
{{ $large := $scratch.Get "large" }}
{{/* only use images smaller than or equal to the src (original) image size */}}
<img
{{ with .Get "sizes" }}sizes='{{.}}'
{{ else }}
sizes="(min-width: 35em) 720px, 100vw"{{ end }}
srcset='
{{ if ge $src.Width "500" }}
{{ with $tiny.RelPermalink }}{{.}} 500w{{ end }}
{{ end }}
{{ if ge $src.Width "800" }}
{{ with $small.RelPermalink }}, {{.}} 800w{{ end }}
{{ end }}
{{ if ge $src.Width "1200" }}
{{ with $medium.RelPermalink }}, {{.}} 1200w{{ end }}
{{ end }}'
{{ if .Get (print $medium) }}
src="{{ $medium.RelPermalink }}"
{{ else }}
src="{{ $src.RelPermalink }}"
{{ end }}
{{ with .Get "alt" }}alt="{{.}}"{{ else }}alt=""{{ end }}>
{{ end }}
{{ end }}
<div class="container py-5">
<div class="container py-5 {{ with .Get "class" }}{{ . }}{{ end }}">
{{ .Inner | $.Page.RenderString }}
</div>
<section class="diagonal-box {{ with .Get "color" }}bg-{{ . }}{{ end }} pt-4 pb-5">
<section class="diagonal-box {{ with .Get "color" }}bg-{{ . }}{{ end }} pt-4 pb-5 {{ with .Get "class" }}{{ . }}{{ end }}">
<div class="container content">
{{ $alt := .Get "alt" }}
{{ if .Get "logo" }}
<div class="text-center"><img src="{{ .Get "logo" }}" alt="{{ $alt }}" class="img-fluid"></div>
{{ .Inner | $.Page.RenderString }}
<div class="text-center"><img src="{{ .Get "logo" }}" alt="{{ $alt }}" class="img-fluid logo"></div>
<div>
{{ .Inner | $.Page.RenderString }}
</div>
{{ else }}
<div class="row">
<div class="col-12 col-md-5 col-lg-6">
<div class="col-12 col-md-5 col-lg-6 text-center mx-auto">
{{ with .Get "title" }}
<h2>{{ . }}</h2>
{{ end }}
......
<section>
<h2 class="h4">{{ .Get "title" }}</h2>
<h3 class="h1">{{ .Get "subtitle" }}</h3>
</section>
<div class="py-5 container-fluid">
<div class="container text-center">
<h2>{{ .Get "title" }}</h2>
</div>
<div class="row">
{{ range $.Page.Params.features }}
<div class="d-flex flex-column col-6 col-sm-3 text-center mb-5 mt-5">
<img src="{{ .logo }}" alt="" class="logo mx-auto" />
<h3 class="mt-1">{{ .title }}</h3>
{{ .content }}
</div>
{{ end }}
</div>
</div>
<div class="feature">
<div class="feature {{ with .Get "direction" }}direction-{{ . }}{{ end }}">
<div>
{{ .Inner | $.Page.RenderString }}
<picture class="img-fluid {{ with .Get "class" }}{{ . }}{{ end }}"> {{ $darkname := print (substr (.Get "src") 0 -4) "-dark.png" }} {{ if or (fileExists (print "static/" .Page.File.Dir .Page.File.BaseFileName "/" $darkname)) (fileExists (print "/" .Page.File.Dir $darkname)) }} <source srcset="{{ .Page.Permalink }}{{ $darkname }}" media="(prefers-color-scheme: dark)"> {{ end }}
<img src="{{ .Page.Permalink }}{{ .Get "src" }}" class="img-fluid {{ with .Get "class" }}{{ . }}{{ end }}" alt="{{ .Get "alt" }}" />
</picture>
</div>
<div>
<picture class="img-fluid"> {{ $darkname := print (substr (.Get "src") 0 -4) "-dark.png" }} {{ if or (fileExists (print "static/" .Page.File.Dir .Page.File.BaseFileName "/" $darkname)) (fileExists (print "/" .Page.File.Dir $darkname)) }} <source srcset="{{ .Page.Permalink }}{{ $darkname }}" media="(prefers-color-scheme: dark)"> {{ end }}
<img src="{{ .Page.Permalink }}{{ .Get "src" }}" class="img-fluid" alt="{{ .Get "alt" }}" loading="lazy" />
</picture>
{{ .Inner | $.Page.RenderString }}
</div>
</div>
<div class="laptop-with-overlay d-block mt-3 mx-auto" style="max-width: 800px">
<div class="laptop-with-overlay d-block mt-3 mx-auto {{ with .Get "class" }}{{ . }}{{ end }}" style="max-width: 800px">
<img class="laptop img-fluid mt-3" src="/content/plasma-desktop/laptop.png" alt="empty laptop with an overlay">
<div class="laptop-overlay">
<img class="img-fluid mt-3" src="{{ .Get "src" }}" alt="{{ .Get "caption" }}" loading="lazy" width="800" height="450" />
......
{{ if .Inner }}{{ end }}
<div class="twilight">
<div class="container text-center">
{{ .Inner | $.Page.RenderString }}
</div>
</div>
<svg height="32" width="32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientTransform="matrix(.85714646 0 0 .85714646 57.223047 75.969225)" gradientUnits="userSpaceOnUse" x2="0" y1="545.79797" y2="517.79797"><stop offset="0" stop-color="#2a2c2f"/><stop offset="1" stop-color="#424649"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="9.00001" x2="23.00001" y1="8.99997" y2="22.99997"><stop offset="0" stop-color="#292c2f"/><stop offset="1" stop-opacity="0"/></linearGradient><linearGradient id="c" gradientUnits="userSpaceOnUse" x2="0" y1="18" y2="7"><stop offset="0" stop-color="#197cf1"/><stop offset="1" stop-color="#20bcfa"/></linearGradient><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="15.99999068569" x2="15.99999068569" y1="29.99999495756" y2="2.00002135764"><stop offset="0" stop-color="#788085"/><stop offset="1" stop-color="#9ba1a6"/></linearGradient><g transform="translate(-384.57143 -515.798)"><path d="m16 2c-7.7559921 0-14 6.2440079-14 14 0 7.755992 6.2440079 14 14 14 7.755992 0 14-6.244008 14-14 0-7.7559921-6.244008-14-14-14z" fill="url(#d)" stroke-width="1.000001" transform="translate(384.57143 515.798)"/><rect fill="url(#a)" height="24.000078" rx="13.999987" stroke-width=".857146" width="24.000078" x="388.57138" y="519.79797"/><path d="m15 7v10.691406l9.283203 9.283203c2.276572-1.670912 4.019245-4.011244 4.951172-6.740234l-13.234375-13.234375z" fill="url(#b)" fill-rule="evenodd" opacity=".2" transform="translate(384.57143 515.798)"/><path d="m15 7v10 1h8v-1h-7v-10z" fill="url(#c)" transform="translate(384.57143 515.798)"/></g></svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="32" version="1.1" xmlns="http://www.w3.org/2000/svg" height="32" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
<defs id="defs5455">
<linearGradient inkscape:collect="always" xlink:href="#linearGradient4697" id="linearGradient4703" y1="503.07938" x1="418.16971" y2="531.45813" x2="384.57144" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.91666628 0 0 0.91666628 -340.52366 -455.81464)"/>
<linearGradient inkscape:collect="always" id="linearGradient4697">
<stop style="stop-color:#1abc9c" id="stop4699"/>
<stop offset="1" style="stop-color:#2980b9" id="stop4701"/>
</linearGradient>
<linearGradient inkscape:collect="always" xlink:href="#linearGradient4526" id="linearGradient4532" y1="521.63281" x1="404.0452" y2="528.35034" x2="430.73611" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.91666628 0 0 0.91666628 -340.52366 -455.81464)"/>
<linearGradient inkscape:collect="always" id="linearGradient4526">
<stop style="stop-color:#cc4a5e" id="stop4528"/>
<stop offset="1" style="stop-color:#aa478a" id="stop4530"/>
</linearGradient>
<linearGradient inkscape:collect="always" xlink:href="#linearGradient4468" id="linearGradient4474" y1="542.22382" x1="398.09201" y2="524.89966" x2="394.00299" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.91666628 0 0 0.91666628 -340.52366 -455.81464)"/>
<linearGradient inkscape:collect="always" id="linearGradient4468">
<stop style="stop-color:#334545" id="stop4470"/>
<stop offset="1" style="stop-color:#536161" id="stop4472"/>
</linearGradient>
<linearGradient inkscape:collect="always" xlink:href="#linearGradient4468" id="linearGradient4500" y1="568.79803" x1="431.57141" y2="562.79803" x2="439.57141" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-1 0 0 1 839.14285 -40.00001)"/>
<linearGradient inkscape:collect="always" xlink:href="#linearGradient4468" id="linearGradient4498" y1="581.87024" x1="406.53735" y2="572.67786" x2="423.31955" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-0.91666628 0 0 0.91666628 428.69029 -492.4813)"/>
<linearGradient inkscape:collect="always" xlink:href="#linearGradient4468" id="linearGradient4496" y1="572.33411" x1="423.05438" y2="566.76562" x2="431.22452" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-0.91666628 0 0 0.91666628 448.69029 -492.4813)"/>
<linearGradient inkscape:collect="always" xlink:href="#linearGradient4468" id="linearGradient4492" y1="577.10217" x1="431.3129" y2="571.44531" x2="440.63208" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-0.91666628 0 0 0.91666628 428.69029 -492.4813)"/>
<linearGradient inkscape:collect="always" xlink:href="#linearGradient4468" id="linearGradient4490" y1="577.36243" x1="430.56738" y2="591.32782" x2="423.74994" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-0.91666628 0 0 0.91666628 428.69029 -492.4813)"/>
</defs>
<metadata id="metadata5458"/>
<g inkscape:label="Capa 1" inkscape:groupmode="layer" id="layer1" transform="matrix(1 0 0 1 -384.57143 -515.798)">
<g id="g4578" transform="matrix(0.66666636 0 0 0.85555436 128.19059 86.77139)">
<path inkscape:connector-curvature="0" style="fill:url(#linearGradient4703)" id="path4589" d="M 12,6 12,36 56,36 56,6 12,6 Z" transform="matrix(1.0909096 0 0 1.0909096 371.48052 497.25255)"/>
<path inkscape:connector-curvature="0" style="fill:url(#linearGradient4532);stroke-linecap:round;stroke-width:2" id="path4284" d="M 56,6 25.71875,23.482422 47.400391,36 56,36 56,6 Z" transform="matrix(1.0909096 0 0 1.0909096 371.48052 497.25255)"/>
<path inkscape:connector-curvature="0" style="fill:url(#linearGradient4474);stroke-linecap:round;stroke-width:2" id="path4284-5-6" d="M 25.75,23.416016 12,31.355469 12,36 47.605469,36 25.75,23.416016 Z" transform="matrix(1.0909096 0 0 1.0909096 371.48052 497.25255)"/>