wilderjds
/
plasma-workspace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[applets/digital clock] Make pop-up layout more compact and consistent

Browse Source 
We got some user complaints about the new Calendar pop-up, saying that
it used too much space, which honestly is a reasonable critique.

This MR tweaks the layout in the following ways:
- Reduce paddings from units.largeSpacing to units.smallSpacing
- Replace the huge custom date header with a standardized PlasmoidHeader
  containing the current locale's standard long date and the pin button
- Move the events view from under the calendar into the column to the
  right of the calendar, sharing space with the list of clocks
- Increase space efficiency of Events view by removing the per-event-type section headers

Hopefully this should address concerns with the 5.19 layout. I think it
does look much nicer, myself.
wilder-portage-prov
Nate Graham 6 years ago
parent a41e81f419
commit a45e27b43b
1 changed files with 124 additions and 129 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 253
      applets/digital-clock/package/contents/ui/CalendarView.qml

253
applets/digital-clock/package/contents/ui/CalendarView.qml
Unescape View File

@ -23,12 +23,12 @@ import org.kde.plasma.components 2.0 as PlasmaComponents
import org.kde.plasma.components 3.0 as PlasmaComponents3
import org.kde.plasma.extras 2.0 as PlasmaExtras
Item {
PlasmaComponents3.Page {
id: calendar
// The "sensible" values
property int _minimumWidth: rootLayout.childrenRect.width + (rootLayout.anchors.margins * 2)
property int _minimumHeight: rootLayout.childrenRect.height + (rootLayout.anchors.margins * 2)
property int _minimumWidth: rootLayout.childrenRect.width + (calendar.paddings * 2)
property int _minimumHeight: rootLayout.childrenRect.height + (calendar.paddings * 2) + headerArea.height
Layout.minimumWidth: _minimumWidth
Layout.minimumHeight: _minimumHeight
@ -37,6 +37,7 @@ Item {
Layout.maximumWidth: _minimumWidth
Layout.maximumHeight: _minimumHeight
readonly property int paddings: units.smallSpacing
readonly property bool showAgenda: PlasmaCalendar.EventPluginsManager.enabledPlugins.length > 0
readonly property bool showClocks: plasmoid.configuration.selectedTimeZones.length > 1
@ -52,6 +53,33 @@ Item {
monthView.resetToToday();
}
// Header containing date and pin button
header: PlasmaExtras.PlasmoidHeading {
id: headerArea
RowLayout {
width: parent.width
PlasmaExtras.Heading {
Layout.fillWidth: true
Layout.leftMargin: calendar.paddings // Match calendar title
level: 1
text: monthView.currentDate.toLocaleDateString(Qt.locale(), Locale.LongFormat)
}
// Allows the user to keep the calendar open for reference
PlasmaComponents3.ToolButton {
checkable: true
checked: plasmoid.configuration.pin
onToggled: plasmoid.configuration.pin = checked
icon.name: "window-pin"
PlasmaComponents3.ToolTip {
text: i18n("Keep Open")
}
}
}
}
// Top-level layout containing:
// - Left column with current date header, calendar, and agenda view
// - Right column with world clocks
@ -61,84 +89,81 @@ Item {
anchors {
top: parent.top
left: parent.left
margins: units.largeSpacing
margins: calendar.paddings
}
// Left column containing header, calendar, and event view
ColumnLayout {
id: leftColumnLayout
spacing: calendar.paddings
// Left column containing calendar
// ===============================
// TODO KF6: remove the `Item` wrapper, which this is only needed since
// PlasmaCalendar.MonthView internally has `anchors.fill:parent` set on
// it, erroneously expecting to never be in a Layout
Item {
Layout.fillWidth: true
Layout.minimumHeight: units.gridUnit * 22
Layout.minimumWidth: units.gridUnit * 22
PlasmaCalendar.MonthView {
id: monthView
borderOpacity: 0.25
today: root.tzDate
showWeekNumbers: plasmoid.configuration.showWeekNumbers
}
}
Layout.minimumWidth: units.gridUnit * 19
function dateString(format) {
return Qt.formatDate(monthView.currentDate, format);
}
// Vertical separator line between columns
// =======================================
PlasmaCore.SvgItem {
visible: rightColumn.visible
// Header for the calendar: Current day, month, and year
RowLayout {
id: currentDateHeaderLayout
PlasmaComponents.Label {
height: dayAndMonthLayout.height
width: paintedWidth
font.pixelSize: dayAndMonthLayout.height
font.weight: Font.Light
text: leftColumnLayout.dateString("dd")
opacity: 0.6
}
Layout.preferredWidth: naturalSize.width
Layout.fillHeight: true
// Unify margins because the calendar includes its own
Layout.topMargin: calendar.paddings
Layout.rightMargin: calendar.paddings
ColumnLayout {
id: dayAndMonthLayout
PlasmaExtras.Heading {
level: 1
elide: Text.ElideRight
text: leftColumnLayout.dateString("dddd")
}
PlasmaComponents.Label {
elide: Text.ElideRight
text: Qt.locale().standaloneMonthName(monthView.currentDate.getMonth())
+ leftColumnLayout.dateString(" yyyy")
}
}
elementId: "vertical-line"
svg: PlasmaCore.Svg {
imagePath: "widgets/line"
}
}
// Horizontal separator line
PlasmaCore.SvgItem {
Layout.fillWidth: true
Layout.preferredHeight: naturalSize.height
elementId: "horizontal-line"
svg: PlasmaCore.Svg {
imagePath: "widgets/line"
}
}
// Right column containing agenda view and time zones
// ==================================================
ColumnLayout {
id: rightColumn
visible: agenda.visible || worldClocks.visible
Layout.minimumWidth: units.gridUnit * 14
// Agenda view stuff
// -----------------
// Header text
PlasmaExtras.Heading {
visible: agenda.visible
// Calendar
// TODO KF6: remove the `Item` wrapper, which this is only needed since
// PlasmaCalendar.MonthView internally has `anchors.fill:parent` set on
// it, erroneously expecting to never be in a Layout
Item {
id: monthViewContainer
Layout.fillWidth: true
Layout.minimumHeight: units.gridUnit * 19
PlasmaCalendar.MonthView {
id: monthView
borderOpacity: 0.25
today: root.tzDate
showWeekNumbers: plasmoid.configuration.showWeekNumbers
}
}
level: 2
text: i18n("Events")
maximumLineCount: 1
elide: Text.ElideRight
}
// Agenda view
// Agenda view itself
Item {
id: agenda
visible: calendar.showAgenda
Layout.fillWidth: true
Layout.minimumHeight: units.gridUnit * 12
Layout.fillHeight: true
Layout.minimumHeight: units.gridUnit * 4
Layout.leftMargin: -units.smallSpacing
function formatDateWithoutYear(date) {
// Unfortunatelly Qt overrides ECMA's Date.toLocaleDateString(),
@ -318,7 +343,7 @@ Item {
? Qt.formatTime(modelData.endDateTime)
: agenda.formatDateWithoutYear(modelData.endDateTime)
horizontalAlignment: Qt.AlignRight
enabled: false
opacity: 0.7
visible: eventItem.hasTime
}
@ -333,7 +358,6 @@ Item {
Layout.column: 2
Layout.fillWidth: true
font.weight: Font.Bold
elide: Text.ElideRight
text: modelData.title
verticalAlignment: Text.AlignVCenter
@ -344,6 +368,8 @@ Item {
PlasmaComponents.Label {
id: eventDescription
opacity: 0.7
Layout.row: 1
Layout.column: 2
Layout.fillWidth: true
@ -358,13 +384,6 @@ Item {
}
}
}
section.property: "modelData.eventType"
section.delegate: PlasmaExtras.Heading {
level: 3
elide: Text.ElideRight
text: section
}
}
}
@ -381,59 +400,49 @@ Item {
visible: holidaysList.count == 0
}
}
}
// Horizontal separator line between events and time zones
PlasmaCore.SvgItem {
visible: worldClocks.visible && agenda.visible
// Vertical separator line between columns
PlasmaCore.SvgItem {
visible: calendar.showClocks
Layout.preferredWidth: naturalSize.width
Layout.leftMargin: units.largeSpacing
Layout.rightMargin: units.largeSpacing
Layout.fillHeight: true
elementId: "vertical-line"
svg: PlasmaCore.Svg {
imagePath: "widgets/line"
}
}
Layout.fillWidth: true
Layout.preferredHeight: naturalSize.height
elementId: "horizontal-line"
svg: PlasmaCore.Svg {
imagePath: "widgets/line"
}
}
// List of world clocks
ColumnLayout {
id: worldClocks
// Clocks stuff
// ------------
// Header text
PlasmaExtras.Heading {
visible: worldClocks.visible
visible: calendar.showClocks
Layout.fillWidth: true
Layout.minimumWidth: units.gridUnit * 12
Layout.fillHeight: true
level: 2
// Header text
PlasmaExtras.Heading {
Layout.minimumHeight: currentDateHeaderLayout.height
verticalAlignment: Text.AlignBottom
text: i18n("Time Zones")
maximumLineCount: 1
elide: Text.ElideRight
}
// Horizontal separator line
PlasmaCore.SvgItem {
Layout.fillWidth: true
Layout.preferredHeight: naturalSize.height
elementId: "horizontal-line"
svg: PlasmaCore.Svg {
imagePath: "widgets/line"
}
}
// Clocks list
// Clocks view itself
PlasmaExtras.ScrollArea {
id: worldClocks
visible: calendar.showClocks
Layout.fillWidth: true
Layout.fillHeight: true
Layout.fillHeight: !agenda.visible
Layout.leftMargin: -units.smallSpacing
ListView {
id: clocksList
width: parent.width
model: {
var timezones = [];
for (var i = 0; i < plasmoid.configuration.selectedTimeZones.length; i++) {
@ -446,6 +455,10 @@ Item {
delegate: PlasmaComponents.ListItem {
id: listItem
readonly property bool isCurrentTimeZone: modelData === plasmoid.configuration.lastSelectedTimezone
separatorVisible: false
width: clocksList.width
height: units.gridUnit + units.smallSpacing
MouseArea {
anchors.fill: parent
@ -453,28 +466,23 @@ Item {
onClicked: plasmoid.configuration.lastSelectedTimezone = modelData
}
ColumnLayout {
width: clocksList.width
spacing: 0
RowLayout {
anchors.fill: parent
PlasmaExtras.Heading {
Layout.fillWidth: true
level: 3
PlasmaComponents3.Label {
text: root.nameForZone(modelData)
font.weight: listItem.isCurrentTimeZone ? Font.Bold : Font.Normal
maximumLineCount: 1
elide: Text.ElideRight
}
PlasmaExtras.Heading {
PlasmaComponents3.Label {
Layout.fillWidth: true
level: 5
horizontalAlignment: Qt.AlignRight
text: root.timeForZone(modelData)
font.weight: listItem.isCurrentTimeZone ? Font.Bold : Font.Normal
maximumLineCount: 2
elide: Text.ElideRight
opacity: 0.6
maximumLineCount: 1
}
}
}
@ -482,17 +490,4 @@ Item {
}
}
}
// Allows the user to keep the calendar open for reference
PlasmaComponents3.ToolButton {
anchors.right: parent.right
checkable: true
checked: plasmoid.configuration.pin
onToggled: plasmoid.configuration.pin = checked
icon.name: "window-pin"
PlasmaComponents3.ToolTip {
text: i18n("Keep Open")
}
}
}

Write Preview
Loading…
Cancel
Save