alecs/plasma-framework
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Refactor the Calendar component a bit

Browse Source 
Currently the grid itself is composed of 88 rectangles that draw all the
lines in a way that two big rect draws the whole two topmost horizontal
and leftmost vertical border lines and then each day rectangle is
drawing small bottom and right rect.

This patch reduces it to 13 rects only where one rect draws the whole
frame around the grid and then 1px wide/high rects draw the inner lines.
Results in much cleaner & simple code.

Plus there's a small refactor on the id names so it makes more sense.

This does not require any additional changes in the applets.

REVIEW: 119232
This commit is contained in:
Martin Klapetek 2014-07-12 13:52:14 +02:00
parent 054a38b9d0
commit 2f933387af
5 changed files with 98 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/declarativeimports/calendar/qml/CalendarToolbar.qml
View File

@ -39,7 +39,7 @@ Row {
anchors.left: parent.left
anchors.rightMargin: 20
onClicked: {
monthCalendar.previousMonth()
calendarBackend.previousMonth()
}
}
@ -59,12 +59,12 @@ Row {
// }
// menuLoader.item.open(0, height);
// }
// text: monthCalendar.monthName
// text: calendarBackend.monthName
// }
Components.ToolButton {
id: monthYear
text: monthCalendar.year
text: calendarBackend.year
anchors.leftMargin: 20
anchors.left: month.right
Components.ToolButton {
@ -73,7 +73,7 @@ Row {
width: 12
height: 12
anchors.left: monthYear.right
onClicked: monthCalendar.nextYear()
onClicked: calendarBackend.nextYear()
}
Components.ToolButton {
id: decrease
@ -82,7 +82,7 @@ Row {
height: 12
anchors.left: monthYear.right
anchors.top: increase.bottom
onClicked: monthCalendar.previousYear()
onClicked: calendarBackend.previousYear()
}
}
@ -93,7 +93,7 @@ Row {
width: height;
anchors.right: parent.right
onClicked: {
monthCalendar.nextMonth()
calendarBackend.nextMonth()
}
}
}

45
src/declarativeimports/calendar/qml/DayDelegate.qml
View File

@ -38,12 +38,9 @@ Item {
Rectangle {
id: todayRect
x: 0
y: 0
width: parent.width - (borderWidth)
height: parent.height - (borderWidth)
anchors.fill: parent
opacity: {
if (calendarDays.selectedItem == dayStyle && today) {
if (calendarGrid.selectedItem == dayStyle && today) {
0.6
} else if (today) {
0.4
@ -57,11 +54,9 @@ Item {
Rectangle {
id: highlightDate
anchors {
fill: todayRect
}
anchors.fill: todayRect
opacity: {
if (calendarDays.selectedItem == dayStyle) {
if (calendarGrid.selectedItem == dayStyle) {
0.6
} else if (dateMouse.containsMouse) {
0.4
@ -75,32 +70,6 @@ Item {
z: todayRect.z - 1
}
Rectangle {
id: frameRight
width: borderWidth
color: theme.textColor
opacity: borderOpacity
anchors {
top: parent.top
bottom: parent.bottom
right: parent.right
}
}
Rectangle {
id: frameBottom
height: borderWidth
color: theme.textColor
opacity: borderOpacity
anchors {
bottom: parent.bottom
left: parent.left
right: parent.right
}
}
Components.Label {
id: label
anchors.centerIn: parent
@ -109,8 +78,6 @@ Item {
color: today ? theme.backgroundColor : theme.textColor
}
MouseArea {
id: dateMouse
anchors.fill: parent
@ -118,9 +85,9 @@ Item {
hoverEnabled: true
onClicked: {
var rowNumber = Math.floor(index / 7);
week = 1+monthCalendar.weeksModel[rowNumber];
week = 1+calendarBackend.weeksModel[rowNumber];
root.date = model;
calendarDays.selectedItem = dayStyle;
calendarGrid.selectedItem = dayStyle;
}
}

112
src/declarativeimports/calendar/qml/DaysCalendar.qml
View File

@ -23,71 +23,67 @@ import org.kde.plasma.extras 2.0 as PlasmaExtras
Item {
id: daysCalendar
// This is to ensure that the inner grid.width is always aligned to be divisible by 7,
// fixes wrong side margins because of the rounding of cell size
// (consider the parent.width to be 404, the cell width would be 56,
// but 56*7 + 6 (the inner spacing) is 398, so we split the remaining 6 to avoid
// wrong alignment)
anchors {
leftMargin: Math.floor(((parent.width + borderWidth) % 7) / 2);
rightMargin: anchors.leftMargin
bottomMargin: anchors.leftMargin
}
property real borderOpacity: 1.0
property int leftMargin: frameTop.x
property int topMargin: frameTop.y
property int rightMargin: width - frameTop.width
property int bottomMargin: height - frameLeft.height
Rectangle {
id: frameTop
height: borderWidth
width: root.columns * root.cellWidth
color: theme.textColor
id: allAroundFrame
color: "transparent"
border.width: borderWidth
border.color: theme.textColor
opacity: borderOpacity
width: (root.cellWidth + borderWidth) * calendarGrid.rows
height: (root.cellHeight + borderWidth) * calendarGrid.columns
}
anchors {
top: parent.top
left: calendarDays.left
Repeater {
id: verticalGridLineRepeater
model: calendarGrid.columns - 1
delegate: Rectangle {
x: root.cellWidth + (index * (root.cellWidth + borderWidth))
// The first grid row does not have any columns, so start at cellHeight and add borderWidth
// to not create conjuction points which looks bad as the lines are semi-transparent
y: root.cellHeight + borderWidth
width: borderWidth
// Subtract the most bottom border width to avoid conjuction points
height: (root.cellHeight + borderWidth) * (calendarGrid.columns - 1) - borderWidth
color: theme.textColor
opacity: borderOpacity
}
}
Rectangle {
id: frameLeft
width: borderWidth
height: root.cellHeight * root.columns
color: theme.textColor
opacity: borderOpacity
anchors {
right: calendarDays.left
top: calendarDays.top
Repeater {
id: horizontalGridLineRepeater
model: calendarGrid.rows - 1
delegate: Rectangle {
// Start the horizontal line so that it does not cross the leftmost vertical borderline
// but is rathar adjacent to it
x: borderWidth
y: root.cellHeight + (index * (root.cellHeight + borderWidth))
// To each cell add one border width and then subtract the outer border widths
// so the lines do not cross
width: (root.cellWidth + borderWidth) * calendarGrid.rows - (borderWidth * 2)
height: borderWidth
color: theme.textColor
opacity: borderOpacity
}
}
Rectangle {
id: frameRight
width: borderWidth
height: root.cellHeight
color: theme.textColor
opacity: borderOpacity
anchors {
right: frameTop.right
top: calendarDays.top
}
}
Rectangle {
id: frameSecond
height: borderWidth
color: theme.textColor
opacity: borderOpacity
y: cellHeight - borderWidth
anchors {
left: calendarDays.left
right: frameTop.right
}
}
Grid {
id: calendarDays
anchors.fill: parent
columns: monthCalendar.days
rows: 1 + monthCalendar.weeks
spacing: 0
id: calendarGrid
columns: calendarBackend.days
rows: calendarBackend.weeks + 1
spacing: 1
property Item selectedItem
property bool containsEventItems: false // FIXME
property bool containsTodoItems: false // FIXME
@ -95,19 +91,19 @@ Item {
property QtObject selectedDate: root.date
onSelectedDateChanged: {
// clear the selection if the root.date is null
if (calendarDays.selectedDate == null) {
calendarDays.selectedItem = null;
if (calendarGrid.selectedDate == null) {
calendarGrid.selectedItem = null;
}
}
Repeater {
id: days
model: monthCalendar.days
model: calendarBackend.days
Item {
width: root.cellWidth
height: root.cellHeight
Components.Label {
text: Qt.locale().dayName(monthCalendar.firstDayOfWeek + index, Locale.ShortFormat)
text: Qt.locale().dayName(calendarBackend.firstDayOfWeek + index, Locale.ShortFormat)
font.pixelSize: Math.max(theme.smallestFont.pixelSize, root.cellHeight / 6)
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignBottom
@ -120,7 +116,7 @@ Item {
Repeater {
id: repeater
model: monthCalendar.daysModel
model: calendarBackend.daysModel
DayDelegate {
borderOpacity: daysCalendar.borderOpacity

24
src/declarativeimports/calendar/qml/MonthMenu.qml
View File

@ -26,53 +26,53 @@ PlasmaComponents.Menu {
PlasmaComponents.MenuItem {
text: capitalizeFirstLetter(Qt.locale().standaloneMonthName(0))
onClicked: monthCalendar.displayedDate = new Date(today.getFullYear(), 0, 1)
onClicked: calendarBackend.displayedDate = new Date(today.getFullYear(), 0, 1)
}
PlasmaComponents.MenuItem {
text: capitalizeFirstLetter(Qt.locale().standaloneMonthName(1))
onClicked: monthCalendar.displayedDate = new Date(today.getFullYear(), 1, 1)
onClicked: calendarBackend.displayedDate = new Date(today.getFullYear(), 1, 1)
}
PlasmaComponents.MenuItem {
text: capitalizeFirstLetter(Qt.locale().standaloneMonthName(2))
onClicked: monthCalendar.displayedDate = new Date(today.getFullYear(), 2, 1)
onClicked: calendarBackend.displayedDate = new Date(today.getFullYear(), 2, 1)
}
PlasmaComponents.MenuItem {
text: capitalizeFirstLetter(Qt.locale().standaloneMonthName(3))
onClicked: monthCalendar.displayedDate = new Date(today.getFullYear(), 3, 1)
onClicked: calendarBackend.displayedDate = new Date(today.getFullYear(), 3, 1)
}
PlasmaComponents.MenuItem {
text: capitalizeFirstLetter(Qt.locale().standaloneMonthName(4))
onClicked: monthCalendar.displayedDate = new Date(today.getFullYear(), 4, 1)
onClicked: calendarBackend.displayedDate = new Date(today.getFullYear(), 4, 1)
}
PlasmaComponents.MenuItem {
text: capitalizeFirstLetter(Qt.locale().standaloneMonthName(5))
onClicked: monthCalendar.displayedDate = new Date(today.getFullYear(), 5, 1)
onClicked: calendarBackend.displayedDate = new Date(today.getFullYear(), 5, 1)
}
PlasmaComponents.MenuItem {
text: capitalizeFirstLetter(Qt.locale().standaloneMonthName(6))
onClicked: monthCalendar.displayedDate = new Date(today.getFullYear(), 6, 1)
onClicked: calendarBackend.displayedDate = new Date(today.getFullYear(), 6, 1)
}
PlasmaComponents.MenuItem {
text: capitalizeFirstLetter(Qt.locale().standaloneMonthName(7))
onClicked: monthCalendar.displayedDate = new Date(today.getFullYear(), 7, 1)
onClicked: calendarBackend.displayedDate = new Date(today.getFullYear(), 7, 1)
}
PlasmaComponents.MenuItem {
text: capitalizeFirstLetter(Qt.locale().standaloneMonthName(8))
onClicked: monthCalendar.displayedDate = new Date(today.getFullYear(), 8, 1)
onClicked: calendarBackend.displayedDate = new Date(today.getFullYear(), 8, 1)
}
PlasmaComponents.MenuItem {
text: capitalizeFirstLetter(Qt.locale().standaloneMonthName(9))
onClicked: monthCalendar.displayedDate = new Date(today.getFullYear(), 9, 1)
onClicked: calendarBackend.displayedDate = new Date(today.getFullYear(), 9, 1)
}
PlasmaComponents.MenuItem {
text: capitalizeFirstLetter(Qt.locale().standaloneMonthName(10))
onClicked: monthCalendar.displayedDate = new Date(today.getFullYear(), 10, 1)
onClicked: calendarBackend.displayedDate = new Date(today.getFullYear(), 10, 1)
}
PlasmaComponents.MenuItem {
text: capitalizeFirstLetter(Qt.locale().standaloneMonthName(11))
onClicked: monthCalendar.displayedDate = new Date(today.getFullYear(), 11, 1)
onClicked: calendarBackend.displayedDate = new Date(today.getFullYear(), 11, 1)
}
// Because some locales don't have it in standaloneMonthNames,

48
src/declarativeimports/calendar/qml/MonthView.qml
View File

@ -29,20 +29,16 @@ Item {
property QtObject date
property date showDate: new Date()
property real borderOpacity: 0.4
property alias selectedMonth: calendarBackend.monthName
property alias selectedYear: calendarBackend.year
property alias calendar: monthCalendar
property alias selectedMonth: monthCalendar.monthName
property alias selectedYear: monthCalendar.year
property alias calendarGrid: calendarGrid
property int mWidth: theme.mSize(theme.defaultFont).width
property int mHeight: theme.mSize(theme.defaultFont).height
property int borderWidth: 1
property real borderOpacity: 0.4
property int columns: monthCalendar.days
property int rows: monthCalendar.weeks
property int columns: calendarBackend.days
property int rows: calendarBackend.weeks
property int cellWidth: prefCellWidth()
property int cellHeight: prefCellHeight()
@ -52,13 +48,12 @@ Item {
property int firstDay: new Date(showDate.getFullYear(), showDate.getMonth(), 1).getDay()
property date today
anchors.margins: borderWidth
function prefCellWidth() {
return Math.min(
Math.max(
mWidth * 3,
calendarGrid.width / (root.columns)
// Take the calendar width, subtract the inner spacings and divide by number of columns (==days in week)
Math.floor((calendar.width - (root.columns - 1) * borderWidth) / root.columns)
),
mWidth * 100
)
@ -68,7 +63,8 @@ Item {
return Math.min(
Math.max(
mHeight * 1.5,
calendarGrid.height / (root.rows + 1)
// Take the calendar height, subtract the inner spacings and divide by number of rows (root.weeks + one row for day names)
Math.floor((calendar.height - (root.rows - 1) * borderWidth) / (root.rows + 1))
),
mHeight * 40
)
@ -88,7 +84,7 @@ Item {
}
function resetToToday() {
monthCalendar.resetToToday();
calendarBackend.resetToToday();
}
PlasmaExtras.Heading {
@ -98,18 +94,16 @@ Item {
top: parent.top
left: parent.left
right: parent.right
leftMargin: borderWidth
rightMargin: borderWidth
}
level: 1
text: monthCalendar.displayedDate.getFullYear() == new Date().getFullYear() ? root.selectedMonth : root.selectedMonth + ", " + root.selectedYear
text: calendarBackend.displayedDate.getFullYear() == new Date().getFullYear() ? root.selectedMonth : root.selectedMonth + ", " + root.selectedYear
elide: Text.ElideRight
font.capitalization: Font.Capitalize
Loader {
id: menuLoader
property QtObject monthCalendar: root.calendar
property QtObject calendarBackend: calendarBackend
}
MouseArea {
id: monthMouse
@ -129,7 +123,7 @@ Item {
}
Calendar {
id: monthCalendar
id: calendarBackend
days: 7
weeks: 6
@ -138,15 +132,13 @@ Item {
}
DaysCalendar {
id: calendarGrid
id: calendar
anchors {
top: monthHeading.bottom
left: parent.left
right: parent.right
bottom: parent.bottom
leftMargin: borderWidth
rightMargin: borderWidth
}
borderOpacity: root.borderOpacity
@ -158,7 +150,7 @@ Item {
anchors {
top: parent.top
left: parent.left
leftMargin: units.largeSpacing / 2
leftMargin: Math.floor(units.largeSpacing / 2)
}
MouseArea {
id: leftmouse
@ -166,7 +158,7 @@ Item {
anchors.margins: -units.largeSpacing / 3
hoverEnabled: true
onClicked: {
monthCalendar.previousMonth()
calendarBackend.previousMonth()
}
}
}
@ -177,7 +169,7 @@ Item {
anchors {
top: parent.top
right: parent.right
rightMargin: units.largeSpacing / 2 + calendarGrid.rightMargin
rightMargin: Math.floor(units.largeSpacing / 2)
}
MouseArea {
id: rightmouse
@ -185,7 +177,7 @@ Item {
anchors.margins: -units.largeSpacing / 3
hoverEnabled: true
onClicked: {
monthCalendar.nextMonth()
calendarBackend.nextMonth()
}
}
}
@ -207,7 +199,7 @@ Item {
iconSource: "view-pim-calendar"
width: height
onClicked: {
monthCalendar.startDate = today();
calendarBackend.startDate = today();
}
PlasmaCore.ToolTipArea {
id: tool
@ -233,7 +225,7 @@ Item {
PlasmaComponents.TextField {
id: weekField
text: week == 0 ? monthCalendar.currentWeek(): week
text: week == 0 ? calendarBackend.currentWeek(): week
width: calendarOperations.width/10
anchors {
right: parent.right