From 6dc1270e4cab349ed7d04904d2d375ab0b08eb77 Mon Sep 17 00:00:00 2001 From: Daedale Date: Wed, 27 Dec 2023 19:08:42 +0800 Subject: [PATCH] fix(calendar): ui layout --- qml/page/T_Calendar.qml | 505 ++++++++++++++++++++-------------------- 1 file changed, 251 insertions(+), 254 deletions(-) diff --git a/qml/page/T_Calendar.qml b/qml/page/T_Calendar.qml index 2cdb958..ca3aa75 100644 --- a/qml/page/T_Calendar.qml +++ b/qml/page/T_Calendar.qml @@ -88,8 +88,8 @@ FluContentPage { loadingText: lang.lang_loading Item { - Layout.fillWidth: true height: 50 + width: calendar.width - 35 FluIconButton { id: btn_left @@ -249,7 +249,7 @@ FluContentPage { } */ FluButton { - id: btn_SRD_lesson_pic + id: btn_SRD_lesson_pic anchors { top: parent.top topMargin: 10 @@ -286,7 +286,7 @@ FluContentPage { Flickable { contentHeight: table.height - contentWidth: table.width - 30 + contentWidth: table.width anchors { left: parent.left right: parent.right @@ -296,87 +296,181 @@ FluContentPage { topMargin: 50 bottomMargin: 5 } - clip: true + clip: true ScrollBar.horizontal: FluScrollBar{} ScrollBar.vertical: FluScrollBar{} + FluArea { + id: table color: "transparent" anchors.left: parent.left - width: calendar.width > 890 ? calendar.width : 890 - height: table.height - Item { - id: table - height: 765 + all_day_height - width: parent.width > 890 ? parent.width : 890 - - readonly property int blockHeight: 45 - readonly property int blockWidth: (width - 50) / 7 - readonly property int all_day_height : EventoBlockModel.all_day_line_num * blockHeight - - Row { - id: weekTitle - anchors { - top: parent.top - topMargin: 20 - left: parent.left - leftMargin: 50 - } + height: 765 + all_day_height + width: calendar.width > 890 ? calendar.width - 40 : 850 - Repeater { - model: ListModel { - ListElement { - title: "周一\n" - } - ListElement { - title: "周二\n" - } - ListElement { - title: "周三\n" - } - ListElement { - title: "周四\n" - } - ListElement { - title: "周五\n" - } - ListElement { - title: "周六\n" - } - ListElement { - title: "周日\n" - } - } - - delegate: FluText { - width: table.blockWidth - text: title + getDate(getMondayOfWeek(date_picker.current), index) - font: FluTextStyle.BodyStrong - horizontalAlignment: Text.AlignHCenter + readonly property int blockHeight: 45 + readonly property int blockWidth: (width - 50) / 7 + readonly property int all_day_height : EventoBlockModel.all_day_line_num * blockHeight + + Row { + id: weekTitle + anchors { + top: parent.top + topMargin: 20 + left: parent.left + leftMargin: 50 + } + + Repeater { + model: ListModel { + ListElement { + title: "周一\n" + } + ListElement { + title: "周二\n" + } + ListElement { + title: "周三\n" + } + ListElement { + title: "周四\n" + } + ListElement { + title: "周五\n" + } + ListElement { + title: "周六\n" + } + ListElement { + title: "周日\n" } } + + delegate: FluText { + width: table.blockWidth + text: title + getDate(getMondayOfWeek(date_picker.current), index) + font: FluTextStyle.BodyStrong + horizontalAlignment: Text.AlignHCenter + } } + } - FluText { + FluText { + anchors { + top: weekTitle.bottom + topMargin: 10 + } + + height: table.all_day_height + width: 50 + text: "Multi\nDay" + verticalAlignment: Text.AlignTop + horizontalAlignment: Text.AlignHCenter + visible: EventoBlockModel.all_day_line_num + } + + Repeater { + model: EventoBlockModel.all_day_line_num + + delegate: FluRectangle { anchors { top: weekTitle.bottom - topMargin: 10 + topMargin: 10 + index * table.blockHeight + left: parent.left + leftMargin: 50 + right: parent.right + rightMargin: 10 } + Layout.fillWidth: true + height: 1 + color: FluTheme.dark ? Qt.rgba(62 / 255, 62 / 255, + 62 / 255, 1) : "#e1dfdd" + } + } - height: table.all_day_height - width: 50 - text: "Multi\nDay" - verticalAlignment: Text.AlignTop - horizontalAlignment: Text.AlignHCenter - visible: EventoBlockModel.all_day_line_num + Row { + anchors { + top: parent.top + topMargin: 5 + left: parent.left + leftMargin: 50 } + spacing: table.blockWidth - 1 Repeater { - model: EventoBlockModel.all_day_line_num - + model: 7 delegate: FluRectangle { + width: 1 + height: table.height - 28 + color: FluTheme.dark ? Qt.rgba(62 / 255, 62 / 255, + 62 / 255, 1) : "#e1dfdd" + } + } + } + + Repeater { + model: ListModel { + ListElement { + title: "8:00" + } + ListElement { + title: "9:00" + } + ListElement { + title: "10:00" + } + ListElement { + title: "11:00" + } + ListElement { + title: "12:00" + } + ListElement { + title: "13:00" + } + ListElement { + title: "14:00" + } + ListElement { + title: "15:00" + } + ListElement { + title: "16:00" + } + ListElement { + title: "17:00" + } + ListElement { + title: "18:00" + } + ListElement { + title: "19:00" + } + ListElement { + title: "20:00" + } + ListElement { + title: "21:00" + } + ListElement { + title: "22:00" + } + ListElement { + title: "23:00" + } + } + + delegate: Item { + anchors { + top: weekTitle.bottom + topMargin: 10 + index * table.blockHeight + table.all_day_height + left: parent.left + right: parent.right + } + + FluRectangle { + id: row_line anchors { - top: weekTitle.bottom - topMargin: 10 + index * table.blockHeight + top: parent.top left: parent.left leftMargin: 50 right: parent.right @@ -387,218 +481,121 @@ FluContentPage { color: FluTheme.dark ? Qt.rgba(62 / 255, 62 / 255, 62 / 255, 1) : "#e1dfdd" } - } - Row { + FluText { + anchors { + left: parent.left + right: row_line.left + verticalCenter: row_line.top + } + text: title + font: FluTextStyle.Caption + color: FluColors.Grey110 + horizontalAlignment: Text.AlignHCenter + } + } + } + + Repeater { + model: EventoBlockModel + + delegate: FluArea { + readonly property double width_min : table.blockWidth / (depth_max + 1) + anchors { - top: parent.top - topMargin: 5 + top: weekTitle.bottom + topMargin: is_all_day ? 10 + depth * table.blockHeight : 10 + table.all_day_height + start * table.blockHeight left: parent.left - leftMargin: 50 + leftMargin: is_all_day ? 50 + start * table.blockWidth : 50 + column * table.blockWidth + depth * width_min } - spacing: table.blockWidth - 1 - - Repeater { - model: 7 - delegate: FluRectangle { - width: 1 - height: table.height - 28 - color: FluTheme.dark ? Qt.rgba(62 / 255, 62 / 255, - 62 / 255, 1) : "#e1dfdd" - } - } - } - Repeater { - model: ListModel { - ListElement { - title: "8:00" - } - ListElement { - title: "9:00" - } - ListElement { - title: "10:00" - } - ListElement { - title: "11:00" - } - ListElement { - title: "12:00" - } - ListElement { - title: "13:00" - } - ListElement { - title: "14:00" - } - ListElement { - title: "15:00" - } - ListElement { - title: "16:00" - } - ListElement { - title: "17:00" - } - ListElement { - title: "18:00" - } - ListElement { - title: "19:00" - } - ListElement { - title: "20:00" - } - ListElement { - title: "21:00" - } - ListElement { - title: "22:00" - } - ListElement { - title: "23:00" + height: is_all_day ? table.blockHeight : table.blockHeight * (end - start) + width: is_all_day ? table.blockWidth * (end - start) : (depth == depth_max ? 1 : 1.618) * width_min + color: FluTheme.dark ? Qt.rgba(23 / 255, 49 / 255, 102 / 255, 1) : Qt.rgba(224 / 255, 233 / 255, 255 / 255, 1) + + FluRectangle { + width: 4 + height: parent.height - 8 + color: FluColors.Blue.normal + radius: [2, 2, 2, 2] + anchors { + left: parent.left + leftMargin: 3 + verticalCenter: parent.verticalCenter } } - - delegate: Item { + FluText { + id: text_title + text: title + font: FluTextStyle.BodyStrong + elide: Text.ElideRight + maximumLineCount: parent.height > 55 ? 2 : 1 + wrapMode: Text.WordWrap anchors { - top: weekTitle.bottom - topMargin: 10 + index * table.blockHeight + table.all_day_height + top: parent.top + topMargin: 5 left: parent.left right: parent.right - } - - FluRectangle { - id: row_line - anchors { - top: parent.top - left: parent.left - leftMargin: 50 - right: parent.right - rightMargin: 10 - } - Layout.fillWidth: true - height: 1 - color: FluTheme.dark ? Qt.rgba(62 / 255, 62 / 255, - 62 / 255, 1) : "#e1dfdd" - } - - FluText { - anchors { - left: parent.left - right: row_line.left - verticalCenter: row_line.top - } - text: title - font: FluTextStyle.Caption - color: FluColors.Grey110 - horizontalAlignment: Text.AlignHCenter + leftMargin: 13 + rightMargin: 3 } } - } - - Repeater { - model: EventoBlockModel - - delegate: FluArea { - readonly property double width_min : table.blockWidth / (depth_max + 1) + FluText { + text: time + font: FluTextStyle.Caption + color: FluColors.Grey110 + elide: Text.ElideRight + maximumLineCount: 1 anchors { - top: weekTitle.bottom - topMargin: is_all_day ? 10 + depth * table.blockHeight : 10 + table.all_day_height + start * table.blockHeight - left: parent.left - leftMargin: is_all_day ? 50 + start * table.blockWidth : 50 + column * table.blockWidth + depth * width_min - } - - height: is_all_day ? table.blockHeight : table.blockHeight * (end - start) - width: is_all_day ? table.blockWidth * (end - start) : (depth == depth_max ? 1 : 1.618) * width_min - color: FluTheme.dark ? Qt.rgba(23 / 255, 49 / 255, 102 / 255, 1) : Qt.rgba(224 / 255, 233 / 255, 255 / 255, 1) - - FluRectangle { - width: 4 - height: parent.height - 8 - color: FluColors.Blue.normal - radius: [2, 2, 2, 2] - anchors { - left: parent.left - leftMargin: 3 - verticalCenter: parent.verticalCenter - } - } - FluText { - id: text_title - text: title - font: FluTextStyle.BodyStrong - elide: Text.ElideRight - maximumLineCount: parent.height > 55 ? 2 : 1 - wrapMode: Text.WordWrap - anchors { - top: parent.top - topMargin: 5 - left: parent.left - right: parent.right - leftMargin: 13 - rightMargin: 3 - } + top: text_title.bottom + topMargin: 2 + left: text_title.left + right: parent.right } + } - FluText { - text: time - font: FluTextStyle.Caption - color: FluColors.Grey110 - elide: Text.ElideRight - maximumLineCount: 1 - anchors { - top: text_title.bottom - topMargin: 2 - left: text_title.left - right: parent.right - } - } + MouseArea { + id: event_mouse + anchors.fill: parent + hoverEnabled: true + acceptedButtons: Qt.LeftButton | Qt.RightButton + onClicked: mouse => { + if (mouse.button === Qt.LeftButton) { + EventoHelper.id = id + EventoInfoController.editable = editable + blockWindowRegister.launch() + } + } + } - MouseArea { - id: event_mouse - anchors.fill: parent - hoverEnabled: true - acceptedButtons: Qt.LeftButton | Qt.RightButton - onClicked: mouse => { - if (mouse.button === Qt.LeftButton) { - EventoHelper.id = id - EventoInfoController.editable = editable - blockWindowRegister.launch() - } + Rectangle { + anchors.fill: parent + color: { + if (!editable) { + return FluTheme.dark ? Qt.rgba( + 33 / 255, 45 / 255, + 69 / 255, + 0.5) : Qt.rgba(241 / 255, 245 + / 255, 255 / 255, 0.5) } - } - - Rectangle { - anchors.fill: parent - color: { - if (!editable) { - return FluTheme.dark ? Qt.rgba( - 33 / 255, 45 / 255, - 69 / 255, - 0.5) : Qt.rgba(241 / 255, 245 - / 255, 255 / 255, 0.5) + if (FluTheme.dark) { + if (event_mouse.containsMouse) { + return Qt.rgba(1, 1, 1, 0.03) } - if (FluTheme.dark) { - if (event_mouse.containsMouse) { - return Qt.rgba(1, 1, 1, 0.03) - } - return Qt.rgba(0, 0, 0, 0) - } else { - if (event_mouse.containsMouse) { - return Qt.rgba(0, 0, 0, 0.03) - } - return Qt.rgba(0, 0, 0, 0) + return Qt.rgba(0, 0, 0, 0) + } else { + if (event_mouse.containsMouse) { + return Qt.rgba(0, 0, 0, 0.03) } + return Qt.rgba(0, 0, 0, 0) } } - } - } - } + } + } + } } - } + } function getMondayOfWeek(date) { let dayOfWeek = (date.getDay() + 6) % 7