Skip to content

Commit

Permalink
UI improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@emericg
emericg committed Nov 17, 2024
1 parent 4656736 commit ee9cc80
Show file tree
Hide file tree
Showing 8 changed files with 192 additions and 143 deletions.
4 changes: 2 additions & 2 deletions qml/DesktopSidebar.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ Rectangle {
anchors.leftMargin: 12
anchors.right: parent.right
anchors.rightMargin: 12
spacing: 6
spacing: 8

DesktopSidebarMenu {
text: qsTr("Desktop")
Expand Down Expand Up @@ -80,7 +80,7 @@ Rectangle {
anchors.rightMargin: 12
anchors.bottom: parent.bottom
anchors.bottomMargin: 16
spacing: 6
spacing: 8

DesktopSidebarMenu {
text: qsTr("Settings")
Expand Down
6 changes: 6 additions & 0 deletions qml/MobileApplication.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,6 +198,12 @@ ApplicationWindow {
mobileUI.backToHomeScreen()
}
}
} else if (appContent.state === "Playground") {
screenPlayground.backAction()
} else if (appContent.state === "HostInfos") {
screenHostInfos.backAction()
} else if (appContent.state === "FontInfos") {
screenFontInfos.backAction()
} else if (appContent.state === "Settings") {
screenSettings.backAction()
} else if (appContent.state === "About") {
Expand Down
3 changes: 2 additions & 1 deletion qml/popups/PopupChoice.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,8 @@ Popup {
anchors.right: parent.right
spacing: Theme.componentMargin

property int btnSize: singleColumn ? width : ((width-spacing*2) / 3)
property int btnCount: 3
property int btnSize: singleColumn ? width : ((width-(spacing*(btnCount-1))) / btnCount)

ButtonClear {
width: parent.btnSize
Expand Down
237 changes: 129 additions & 108 deletions qml/popups/PopupDate.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,6 @@ Popup {
grid.year = date.getFullYear()
grid.month = date.getMonth()

// visual hacks
//dow.width = dow.width - 8
grid.width = dow.width - 8

printDate()

popupDate.open()
Expand Down Expand Up @@ -215,17 +211,20 @@ Popup {
////////

Rectangle { // month selector
height: 48
anchors.left: parent.left
anchors.leftMargin: parent.Theme.componentBorderWidth
anchors.right: parent.right
anchors.margins: singleColumn ? 0 : Theme.componentBorderWidth
anchors.rightMargin: parent.Theme.componentBorderWidth

color: "#eee"
height: Theme.componentHeightXL
color: Theme.colorForeground

RoundButtonSunken { // previous month
SquareButtonSunken { // previous month
anchors.left: parent.left
anchors.leftMargin: 2
anchors.verticalCenter: parent.verticalCenter
width: 48; height: 48;
width: Theme.componentHeightL
height: Theme.componentHeightL

source: "qrc:/assets/icons/material-symbols/chevron_left.svg"
colorBackground: parent.color
Expand All @@ -251,10 +250,12 @@ Popup {
color: Theme.colorText
}

RoundButtonSunken { // next month
SquareButtonSunken { // next month
anchors.right: parent.right
anchors.rightMargin: 2
anchors.verticalCenter: parent.verticalCenter
width: 48; height: 48;
width: Theme.componentHeightL
height: Theme.componentHeightL

source: "qrc:/assets/icons/material-symbols/chevron_right.svg"
colorBackground: parent.color
Expand All @@ -273,125 +274,145 @@ Popup {

////////

DayOfWeekRow {
id: dow
ColumnLayout { // days
id: daysSelector
anchors.left: parent.left
anchors.leftMargin: 4
anchors.leftMargin: Theme.componentMargin
anchors.right: parent.right
anchors.rightMargin: 4
anchors.rightMargin: Theme.componentMargin

Layout.fillWidth: true
//locale: popupDate.locale
DayOfWeekRow {
id: dow

delegate: Text {
text: model.shortName.substring(0, 1).toUpperCase()
color: Theme.colorText
font.bold: true
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
Layout.fillWidth: true
Layout.fillHeight: Theme.componentHeight
//locale: popupDate.locale

MonthGrid {
id: grid
anchors.left: parent.left
anchors.leftMargin: 4
anchors.right: parent.right
anchors.rightMargin: 4

Layout.fillWidth: true
//locale: popupDate.locale

delegate: Text {
width: (grid.width / 7)
height: width
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter

property bool isSelected: (model.day === selectedDate.getDate() &&
model.month === selectedDate.getMonth() &&
model.year === selectedDate.getFullYear())

property bool isToday: (model.day === popupDate.today.getDate() &&
model.month === popupDate.today.getMonth() &&
model.year === popupDate.today.getFullYear())

text: model.day
font: grid.font
//font.bold: model.today
color: isSelected ? "white" : Theme.colorSubText
opacity: (model.month === grid.month ? 1 : 0.2)

Rectangle {
z: -1
anchors.fill: parent
radius: width
color: isSelected ? Theme.colorSecondary : "transparent"
border.color: Theme.colorSecondary
border.width: isToday ? Theme.componentBorderWidth : 0
delegate: Text {
text: model.shortName.substring(0, 1).toUpperCase()
color: Theme.colorText
font.bold: true
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}

onClicked: (date) => {
if (date.getMonth() === grid.month) {
// validate date (min / max)
if (minDate && maxDate) {
const diffMinTime = (minDate - date)
const diffMinDays = -Math.ceil(diffMinTime / (1000 * 60 * 60 * 24) - 1)
//console.log(diffMinDays + " diffMinDays")
const diffMaxTime = (minDate - date);
const diffMaxDays = -Math.ceil(diffMaxTime / (1000 * 60 * 60 * 24) - 1)
//console.log(diffMaxDays + " diffMaxDays")

if (diffMinDays > -1 && diffMaxDays < 1) {
date.setHours(selectedDate.getHours(),
selectedDate.getMinutes(),
selectedDate.getSeconds())
selectedDate = date
}
} else {
const diffTime = (today - date)
const diffDays = -Math.ceil(diffTime / (1000 * 60 * 60 * 24) - 1)
//console.log(diffDays + " days")

// validate date (-21 / today)
if (diffDays > -21 && diffDays < 1) {
date.setHours(selectedDate.getHours(),
selectedDate.getMinutes(),
selectedDate.getSeconds())
selectedDate = date
MonthGrid {
id: grid

Layout.fillWidth: true
//locale: popupDate.locale

delegate: Text {
width: (grid.width / 7)
height: width
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter

property bool isSelected: (model.day === selectedDate.getDate() &&
model.month === selectedDate.getMonth() &&
model.year === selectedDate.getFullYear())

property bool isToday: (model.day === popupDate.today.getDate() &&
model.month === popupDate.today.getMonth() &&
model.year === popupDate.today.getFullYear())

text: model.day
font: grid.font
//font.bold: model.today
color: isSelected ? "white" : Theme.colorSubText
opacity: (model.month === grid.month ? 1 : 0.2)

Rectangle {
z: -1
anchors.fill: parent
anchors.margins: 4
radius: 8
color: isSelected ? Theme.colorSecondary : "transparent"
opacity: (isSelected || isToday) ? 1 : 0.66
border.color: Theme.colorSecondary
border.width: {
if (isToday) return Theme.componentBorderWidth
if (mouse.hovered && model.month === grid.month) return Theme.componentBorderWidth
return 0
}
}

printDate()
HoverHandler {
id: mouse
acceptedDevices: PointerDevice.Mouse
}
}

onClicked: (date) => {
if (date.getMonth() === grid.month) {
// validate date (min / max)
if (minDate && maxDate) {
const diffMinTime = (minDate - date)
const diffMinDays = -Math.ceil(diffMinTime / (1000 * 60 * 60 * 24) - 1)
//console.log(diffMinDays + " diffMinDays")
const diffMaxTime = (minDate - date);
const diffMaxDays = -Math.ceil(diffMaxTime / (1000 * 60 * 60 * 24) - 1)
//console.log(diffMaxDays + " diffMaxDays")

if (diffMinDays > -1 && diffMaxDays < 1) {
date.setHours(selectedDate.getHours(),
selectedDate.getMinutes(),
selectedDate.getSeconds())
selectedDate = date
}
} else {
const diffTime = (today - date)
const diffDays = -Math.ceil(diffTime / (1000 * 60 * 60 * 24) - 1)
//console.log(diffDays + " days")

// validate date (-21 / today)
if (diffDays > -21 && diffDays < 1) {
date.setHours(selectedDate.getHours(),
selectedDate.getMinutes(),
selectedDate.getSeconds())
selectedDate = date
}
}

printDate()
}
}
}
}

////////
}

Row {
anchors.right: parent.right
anchors.rightMargin: Theme.componentMarginXL
spacing: Theme.componentMargin
////////////////

ButtonClear {
color: Theme.colorGrey
Flow {
anchors.left: parent.left
anchors.right: parent.right
anchors.margins: Theme.componentMarginXL
bottomPadding: Theme.componentMarginXL
spacing: Theme.componentMargin

text: qsTr("Cancel")
onClicked: popupDate.close()
}
property int btnCount: 2
property int btnSize: singleColumn ? width : ((width-(spacing*(btnCount-1))) / btnCount)

ButtonFlat {
text: qsTr("Select")
onClicked: {
updateDate(selectedDate)
popupDate.close()
}
}
ButtonClear {
width: parent.btnSize
color: Theme.colorGrey

text: qsTr("Cancel")
onClicked: popupDate.close()
}

////////
ButtonFlat {
width: parent.btnSize

text: qsTr("Select")
onClicked: {
updateDate(selectedDate)
popupDate.close()
}
}
}

////////////////
Expand Down
Loading

0 comments on commit ee9cc80

Please sign in to comment.