diff --git a/src/adapters/controllers/app_info_controller.cpp b/src/adapters/controllers/app_info_controller.cpp index 17d642bf8..96439da07 100644 --- a/src/adapters/controllers/app_info_controller.cpp +++ b/src/adapters/controllers/app_info_controller.cpp @@ -1,5 +1,6 @@ #include "app_info_controller.hpp" #include +#include using namespace application; @@ -81,4 +82,9 @@ void AppInfoController::updateApplication() m_appInfoService->updateApplication(); } +int AppInfoController::getSystemFontSize() const +{ + return QFontDatabase::systemFont(QFontDatabase::GeneralFont).pointSize(); +} + } // namespace adapters::controllers \ No newline at end of file diff --git a/src/adapters/controllers/app_info_controller.hpp b/src/adapters/controllers/app_info_controller.hpp index 81355ced5..a44fece69 100644 --- a/src/adapters/controllers/app_info_controller.hpp +++ b/src/adapters/controllers/app_info_controller.hpp @@ -1,8 +1,8 @@ #pragma once #include -#include "i_app_info_service.hpp" -#include "i_app_info_controller.hpp" #include "adapters_export.hpp" +#include "i_app_info_controller.hpp" +#include "i_app_info_service.hpp" namespace adapters::controllers { @@ -12,8 +12,7 @@ class ADAPTERS_EXPORT AppInfoController : public IAppInfoController Q_OBJECT public: - AppInfoController( - application::IAppInfoService* appInfoService); + AppInfoController(application::IAppInfoService* appInfoService); private: QString getCurrentVersion() const override; @@ -27,8 +26,9 @@ class ADAPTERS_EXPORT AppInfoController : public IAppInfoController QString getCurrentQtVersion() const override; QString getOperatingSystem() const override; void updateApplication() override; + int getSystemFontSize() const override; application::IAppInfoService* m_appInfoService; }; -} // namespace adapters::controllers \ No newline at end of file +} // namespace adapters::controllers \ No newline at end of file diff --git a/src/adapters/interfaces/controllers/i_app_info_controller.hpp b/src/adapters/interfaces/controllers/i_app_info_controller.hpp index d264b93ab..22f515f95 100644 --- a/src/adapters/interfaces/controllers/i_app_info_controller.hpp +++ b/src/adapters/interfaces/controllers/i_app_info_controller.hpp @@ -8,16 +8,16 @@ namespace adapters /** * The AuthenticationController class is exposed to the UI code and thus is the - * "entry point" to the application's backend for application info operations. It - * acts as a layer of abstraction which maps the user data to a format usable + * "entry point" to the application's backend for application info operations. + * It acts as a layer of abstraction which maps the user data to a format usable * for the application. */ class ADAPTERS_EXPORT IAppInfoController : public QObject { Q_OBJECT Q_PROPERTY(QString currentVersion READ getCurrentVersion CONSTANT) - Q_PROPERTY(QString newestVersion READ getNewestVersion - NOTIFY newestVersionChanged) + Q_PROPERTY( + QString newestVersion READ getNewestVersion NOTIFY newestVersionChanged) Q_PROPERTY(QString applicationName READ getApplicationName CONSTANT) Q_PROPERTY(QString companyName READ getCompanyName CONSTANT) Q_PROPERTY(QString website READ getWebsite CONSTANT) @@ -26,6 +26,7 @@ class ADAPTERS_EXPORT IAppInfoController : public QObject Q_PROPERTY(QString githubLink READ getGithubLink CONSTANT) Q_PROPERTY(QString currentQtVersion READ getCurrentQtVersion CONSTANT) Q_PROPERTY(QString operatingSystem READ getOperatingSystem CONSTANT) + Q_PROPERTY(int systemFontSize READ getSystemFontSize CONSTANT) public: virtual ~IAppInfoController() noexcept = default; @@ -43,6 +44,7 @@ class ADAPTERS_EXPORT IAppInfoController : public QObject virtual QString getGithubLink() const = 0; virtual QString getCurrentQtVersion() const = 0; virtual QString getOperatingSystem() const = 0; + virtual int getSystemFontSize() const = 0; signals: void newestVersionChanged(); diff --git a/src/application/services/book_service.cpp b/src/application/services/book_service.cpp index 346dc43fb..84ebeb9ed 100644 --- a/src/application/services/book_service.cpp +++ b/src/application/services/book_service.cpp @@ -146,6 +146,7 @@ void BookService::addBookmark(const domain::entities::Bookmark& bookmark) book->addBookmark(bookmark); emit bookmarkInsertionEnded(); + book->updateLastModified(); m_libraryService->updateBook(*book); } @@ -156,6 +157,7 @@ void BookService::renameBookmark(const QUuid& uuid, const QString& newName) book->renameBookmark(uuid, newName); emit bookmarkNameChanged(getIndexOfBookmark(uuid)); + book->updateLastModified(); m_libraryService->updateBook(*book); } @@ -167,6 +169,7 @@ void BookService::removeBookmark(const QUuid& uuid) book->removeBookmark(uuid); emit bookmarkDeletionEnded(); + book->updateLastModified(); m_libraryService->updateBook(*book); } diff --git a/src/main.cpp b/src/main.cpp index 99ea41a0d..cab24c708 100644 --- a/src/main.cpp +++ b/src/main.cpp @@ -64,6 +64,7 @@ int main(int argc, char* argv[]) // Register types qmlRegisterSingletonType(QUrl("qrc:/StyleSheet.qml"), "Librum.style", 1, 0, "Style"); qmlRegisterSingletonType(QUrl("qrc:/IconSheet.qml"), "Librum.icons", 1, 0, "Icons"); + qmlRegisterSingletonType(QUrl("qrc:/FontSheet.qml"), "Librum.fonts", 1, 0, "Fonts"); qmlRegisterSingletonType(QUrl("qrc:/Globals.qml"), "Librum.globals", 1, 0, "Globals"); qmlRegisterType("Librum.models", 1, 0, "LibraryProxyModel"); qmlRegisterType("Librum.models", 1, 0, "FreeBooksModel"); diff --git a/src/presentation/FontSheet.qml b/src/presentation/FontSheet.qml new file mode 100644 index 000000000..af59d8a8d --- /dev/null +++ b/src/presentation/FontSheet.qml @@ -0,0 +1,34 @@ +pragma Singleton + +import QtQuick +import Librum.controllers + + +/** + We make all font sizes dependent on the system font size, so that the font sizes look fine + on all operating systems. E.g. point size 11 looks fine on Linux but too small on MacOS. +*/ +Item { + id: fontSheet + + property int hugeSize: AppInfoController.systemFontSize + 4.5 + property int largeSize: AppInfoController.systemFontSize + 4 + property int bigSize: AppInfoController.systemFontSize + 3 + property int baseSize: AppInfoController.systemFontSize + 2 + property int mediumSize: AppInfoController.systemFontSize + 1.5 + property int smallSize: AppInfoController.systemFontSize + 1 + property int tinySize: AppInfoController.systemFontSize + + property int smallTitleSize: AppInfoController.systemFontSize + 5 + property int modestTitleSize: AppInfoController.systemFontSize + 6 + property int baseTitleSize: AppInfoController.systemFontSize + 7 + property int mediumTitleSize: AppInfoController.systemFontSize + 8 + property int bigTitleSize: AppInfoController.systemFontSize + 10 + property int veryBigTitleSize: AppInfoController.systemFontSize + 11 + property int largeTitleSize: AppInfoController.systemFontSize + 13 + property int hugeTitleSize: AppInfoController.systemFontSize + 14 + property int enormousTitleSize: AppInfoController.systemFontSize + 17 + + property int baseHeaderSize: AppInfoController.systemFontSize + 33 + property int bigHeaderSize: AppInfoController.systemFontSize + 37 +} diff --git a/src/presentation/addOnsPage/MAddOnsPage.qml b/src/presentation/addOnsPage/MAddOnsPage.qml index a17d73613..6190968b2 100644 --- a/src/presentation/addOnsPage/MAddOnsPage.qml +++ b/src/presentation/addOnsPage/MAddOnsPage.qml @@ -2,34 +2,37 @@ import QtQuick import QtQuick.Controls import QtQuick.Layouts import Librum.style +import Librum.fonts -Page -{ +Page { id: root - background: Rectangle { color: Style.colorPageBackground } - - Item { id: topSpacer; height: parent.height / 2.3 } - - Label - { + background: Rectangle { + color: Style.colorPageBackground + } + + Item { + id: topSpacer + height: parent.height / 2.3 + } + + Label { id: title anchors.horizontalCenter: parent.horizontalCenter anchors.top: topSpacer.bottom text: "Add-ons Page" color: Style.colorTitle - font.pointSize: 22 + font.pointSize: Fonts.largeTitleSize font.bold: true } - - Label - { + + Label { id: description anchors.horizontalCenter: parent.horizontalCenter anchors.top: title.bottom anchors.topMargin: 6 text: "Currently in Development" color: Style.colorPageSubtitle - font.pointSize: 16 + font.pointSize: Fonts.baseTitleSize font.bold: true } -} \ No newline at end of file +} diff --git a/src/presentation/forgotPasswordPage/MForgotPasswordPage.qml b/src/presentation/forgotPasswordPage/MForgotPasswordPage.qml index ee131fb31..bb8631781 100644 --- a/src/presentation/forgotPasswordPage/MForgotPasswordPage.qml +++ b/src/presentation/forgotPasswordPage/MForgotPasswordPage.qml @@ -7,49 +7,43 @@ import Librum.style import Librum.icons import Librum.controllers -MFlickWrapper -{ +MFlickWrapper { id: root - contentHeight: Window.height < layout.implicitHeight ? - layout.implicitHeight + page.bottomPadding : Window.height - + contentHeight: Window.height < layout.implicitHeight ? layout.implicitHeight + + page.bottomPadding : Window.height + // Passing the focus to emailInput on Component.onCompleted() causes it // to pass controll back to root for some reason, this fixes the focus problem - onActiveFocusChanged: if(activeFocus) emailInput.giveFocus() - + onActiveFocusChanged: if (activeFocus) + emailInput.giveFocus() + // Focus the emailInput when page has loaded Component.onCompleted: emailInput.giveFocus() - - Page - { + + Page { id: page anchors.fill: parent bottomPadding: 50 - background: Rectangle { color: Style.colorAuthenticationPageBackground } - - - Shortcut - { + background: Rectangle { + color: Style.colorAuthenticationPageBackground + } + + Shortcut { sequence: "Ctrl+Return" onActivated: internal.sendPasswordResetEmail() } - - Shortcut - { + + Shortcut { sequence: "Ctrl+Backspace" onActivated: internal.backToLoginPage() } - - - ColumnLayout - { + + ColumnLayout { id: layout anchors.centerIn: parent spacing: -92 - - - Image - { + + Image { id: lockIllustration z: 2 Layout.alignment: Qt.AlignHCenter @@ -57,40 +51,33 @@ MFlickWrapper sourceSize.width: 250 fillMode: Image.PreserveAspectFit } - - Pane - { + + Pane { id: background Layout.preferredWidth: 542 topPadding: 86 bottomPadding: 28 horizontalPadding: 0 - background: Rectangle - { + background: Rectangle { color: Style.colorContainerBackground radius: 6 } - - - ColumnLayout - { + + ColumnLayout { id: backgroundLayout width: parent.width - - - Label - { + + Label { id: forgotPasswordText Layout.alignment: Qt.AlignHCenter Layout.topMargin: 32 text: "Forgot Password" color: Style.colorText font.bold: true - font.pointSize: 19 + font.pointSize: Fonts.bigTitleSize } - - Label - { + + Label { id: resetPasswordText Layout.preferredWidth: 450 Layout.topMargin: 8 @@ -101,11 +88,10 @@ MFlickWrapper color: Style.colorSubtitle lineHeight: 1.1 font.weight: Font.Medium - font.pointSize: 12.5 + font.pointSize: Fonts.largeSize } - - ColumnLayout - { + + ColumnLayout { id: inputColumn Layout.fillWidth: true Layout.leftMargin: internal.inWindowPadding @@ -113,29 +99,26 @@ MFlickWrapper Layout.topMargin: 12 Layout.alignment: Qt.AlignHCenter spacing: 0 - - MLabeledInputBox - { + + MLabeledInputBox { id: emailInput Layout.fillWidth: true placeholderContent: "kaidoe@gmail.com" placeholderColor: Style.colorPlaceholderText headerText: "" } - - Label - { + + Label { id: successText Layout.topMargin: 10 Layout.fillWidth: true wrapMode: Text.WordWrap visible: false color: Style.colorGreenText - font.pointSize: 11.75 + font.pointSize: 12 } - - MButton - { + + MButton { id: sendEmailButton Layout.fillWidth: true Layout.preferredHeight: 42 @@ -147,13 +130,11 @@ MFlickWrapper fontSize: 12.25 textColor: Style.colorFocusedButtonText fontWeight: Font.Bold - + onClicked: internal.sendPasswordResetEmail() } - - - MButton - { + + MButton { id: backButton Layout.preferredWidth: 145 Layout.preferredHeight: 42 @@ -170,7 +151,7 @@ MFlickWrapper imagePath: Icons.arrowheadBackIcon imageSize: 28 imageSpacing: 4 - + onClicked: internal.backToLoginPage() } } @@ -178,27 +159,24 @@ MFlickWrapper } } } - - QtObject - { + + QtObject { id: internal property int inWindowPadding: 71 - - function sendPasswordResetEmail() - { - if(emailInput.text === "") - return; - - UserController.forgotPassword(emailInput.text); - - successText.text = "Email sent! Keep an eye on your inbox."; - successText.visible = true; - emailInput.clearText(); + + function sendPasswordResetEmail() { + if (emailInput.text === "") + return + + UserController.forgotPassword(emailInput.text) + + successText.text = "Email sent! Keep an eye on your inbox." + successText.visible = true + emailInput.clearText() } - - function backToLoginPage() - { - loadPage(loginPage); + + function backToLoginPage() { + loadPage(loginPage) } } -} \ No newline at end of file +} diff --git a/src/presentation/freeBooksPage/MDownloadBookPopup.qml b/src/presentation/freeBooksPage/MDownloadBookPopup.qml index 7c8eaf141..76454c33e 100644 --- a/src/presentation/freeBooksPage/MDownloadBookPopup.qml +++ b/src/presentation/freeBooksPage/MDownloadBookPopup.qml @@ -5,6 +5,7 @@ import CustomComponents import Librum.controllers import Librum.style import Librum.icons +import Librum.fonts Popup { id: root @@ -80,7 +81,7 @@ Popup { Layout.topMargin: 6 text: "Download book" font.weight: Font.Bold - font.pointSize: 17 + font.pointSize: Fonts.bigTitleSize color: Style.colorTitle } diff --git a/src/presentation/freeBooksPage/MFreeBook.qml b/src/presentation/freeBooksPage/MFreeBook.qml index 5fbdfa205..be4ceb43c 100644 --- a/src/presentation/freeBooksPage/MFreeBook.qml +++ b/src/presentation/freeBooksPage/MFreeBook.qml @@ -4,6 +4,7 @@ import QtQuick.Layouts import Librum.style import Librum.icons import CustomComponents +import Librum.fonts Item { id: root @@ -82,7 +83,7 @@ Item { visible: bookCover.source == "" text: ".jpeg" color: Style.colorNoImageLabel - font.pointSize: 20 + font.pointSize: Fonts.veryBigTitleSize font.bold: true } } @@ -114,7 +115,7 @@ Item { text: model.title font.weight: Font.Medium color: Style.colorTitle - font.pointSize: 11 + font.pointSize: Fonts.baseSize lineHeight: 0.8 elide: Label.ElideRight wrapMode: TextInput.WordWrap @@ -126,7 +127,7 @@ Item { Layout.topMargin: 5 text: model.authors color: Style.colorLightText - font.pointSize: 10 + font.pointSize: Fonts.smallSize elide: Label.ElideRight } } diff --git a/src/presentation/freeBooksPage/MFreeBooksPage.qml b/src/presentation/freeBooksPage/MFreeBooksPage.qml index d259c242b..a980a8427 100644 --- a/src/presentation/freeBooksPage/MFreeBooksPage.qml +++ b/src/presentation/freeBooksPage/MFreeBooksPage.qml @@ -4,6 +4,7 @@ import QtQuick.Layouts import Librum.controllers import Librum.style import Librum.icons +import Librum.fonts import CustomComponents import "explorerToolbar" @@ -90,7 +91,7 @@ Page { Layout.leftMargin: -sidebar.width Layout.topMargin: Math.round(root.height / 3) - implicitHeight color: Style.colorTitle - font.pointSize: 22 + font.pointSize: Fonts.largeTitleSize font.weight: Font.Medium visible: false } diff --git a/src/presentation/homePage/MBook.qml b/src/presentation/homePage/MBook.qml index 6186ac41e..afb421228 100644 --- a/src/presentation/homePage/MBook.qml +++ b/src/presentation/homePage/MBook.qml @@ -4,50 +4,44 @@ import QtQuick.Layouts import Librum.style import Librum.icons import CustomComponents +import Librum.fonts - -Item -{ +Item { id: root property bool downloading: false signal leftButtonClicked(int index) signal rightButtonClicked(int index, var mouse) signal moreOptionClicked(int index, var mouse) - + implicitWidth: 190 implicitHeight: 322 - - Connections - { + + Connections { target: model - - function onDownloadedChanged() - { - if(model.downloaded) - root.downloading = false; + + function onDownloadedChanged() { + if (model.downloaded) + root.downloading = false } } - - - ColumnLayout - { + + ColumnLayout { id: layout anchors.fill: parent spacing: 0 - + + /** A Item with rounded corners which is overlapping with the top half of the book to create a rounded top, while the rest of the book is rectangluar */ - Item - { + Item { id: upperBookRounding Layout.preferredHeight: 10 Layout.fillWidth: true clip: true - - Rectangle - { + + Rectangle { id: upperRoundingFiller height: parent.height + 4 width: parent.width @@ -55,15 +49,15 @@ Item color: Style.colorBookImageBackground } } - + + /** An overlay over the upper-book-rounding to get it to be transparent and modal, when the book is not currently downloaded. It leads to visual bugs to apply the properties directly to the upper-book-rounding item. Moving a separate object over it is working fine without any visual bugs */ - Item - { + Item { id: upperBookRoundingDimmer Layout.topMargin: -upperBookRounding.height Layout.preferredHeight: 10 @@ -71,9 +65,8 @@ Item visible: !model.downloaded clip: true z: 2 - - Rectangle - { + + Rectangle { id: dimmerRect height: upperRoundingFiller.height width: upperRoundingFiller.width @@ -82,17 +75,14 @@ Item radius: 4 } } - - - Rectangle - { + + Rectangle { id: upperBookPart Layout.fillWidth: true Layout.preferredHeight: 230 color: Style.colorBookImageBackground - - Rectangle - { + + Rectangle { id: bookCoverDimmer anchors.fill: parent visible: !model.downloaded @@ -100,9 +90,8 @@ Item opacity: 0.5 z: 2 } - - Image - { + + Image { id: downloadBookIcon anchors.centerIn: bookCoverDimmer visible: !model.downloaded && !downloadProgressBar.visible @@ -112,16 +101,13 @@ Item opacity: 1 z: 3 } - - - ColumnLayout - { + + ColumnLayout { id: upperPartLayout anchors.centerIn: parent spacing: 0 - - Image - { + + Image { id: bookCover visible: source != "" Layout.alignment: Qt.AlignHCenter @@ -129,24 +115,23 @@ Item source: cover cache: false } - + + /* The item displaying when no book cover exists (usually a ".format" label) */ - Label - { + Label { id: noImageLabel Layout.alignment: Qt.AlignCenter visible: bookCover.source == "" text: "." + model.format color: Style.colorNoImageLabel - font.pointSize: 20 + font.pointSize: Fonts.veryBigTitleSize font.bold: true } } - - MProgressBar - { + + MProgressBar { id: downloadProgressBar anchors.bottom: parent.bottom anchors.left: parent.left @@ -157,36 +142,30 @@ Item visible: false z: 3 progress: model.mediaDownloadProgress - onProgressChanged: - { - if(progress === 1) - visible = false; + onProgressChanged: { + if (progress === 1) + visible = false else - visible = true; + visible = true } } } - - - Rectangle - { + + Rectangle { id: lowerBookPart Layout.fillWidth: true Layout.preferredHeight: 90 color: Style.colorBookBackground border.width: 1 border.color: Style.colorBookBorder - - - ColumnLayout - { + + ColumnLayout { id: bottomPartLayout width: parent.width - internal.lowerBookPartPadding * 2 anchors.horizontalCenter: parent.horizontalCenter spacing: 0 - - Label - { + + Label { id: title Layout.fillWidth: true Layout.preferredHeight: 34 @@ -196,53 +175,48 @@ Item font.weight: Font.Medium verticalAlignment: Text.AlignVCenter color: Style.colorTitle - font.pointSize: 11 + font.pointSize: Fonts.baseSize lineHeight: 0.8 wrapMode: TextInput.WrapAtWordBoundaryOrAnywhere elide: Text.ElideRight } - - Label - { + + Label { id: authors Layout.fillWidth: true Layout.topMargin: 4 clip: true text: model.authors === "" ? "Unknown" : model.authors color: Style.colorLightText - font.pointSize: 10 + font.pointSize: Fonts.smallSize elide: Text.ElideRight } - - RowLayout - { + + RowLayout { id: statusRow Layout.fillWidth: true spacing: 0 - - Rectangle - { + + Rectangle { id: readingProgressBox Layout.preferredWidth: 46 Layout.preferredHeight: 18 Layout.topMargin: 4 color: Style.colorHighlight radius: 2 - - Label - { + + Label { id: readingProgressLabel anchors.centerIn: parent horizontalAlignment: Text.AlignBottom text: model.bookReadingProgress + "%" font.weight: Font.DemiBold color: Style.colorTitle - font.pointSize: 10 + font.pointSize: Fonts.smallSize } } - - Image - { + + Image { id: existsOnlyOnClientIndicator Layout.leftMargin: 8 Layout.topMargin: 4 @@ -251,29 +225,29 @@ Item sourceSize.width: 18 fillMode: Image.PreserveAspectFit source: Icons.cloudOff - - MouseArea - { + + MouseArea { id: existsOnlyOnClientIndicatorArea anchors.fill: parent hoverEnabled: true - onContainsMouseChanged: containsMouse ? toolTip.open() : toolTip.close() + onContainsMouseChanged: containsMouse ? toolTip.open( + ) : toolTip.close() } } - - Item { Layout.fillWidth: true } - - Image - { + + Item { + Layout.fillWidth: true + } + + Image { id: moreOptionsIcon Layout.preferredHeight: 20 Layout.rightMargin: -2 source: Icons.dots fillMode: Image.PreserveAspectFit antialiasing: false - - MouseArea - { + + MouseArea { id: moreOptionsArea anchors.fill: parent hoverEnabled: true @@ -283,48 +257,38 @@ Item } } } - - MouseArea - { + + MouseArea { anchors.fill: parent acceptedButtons: Qt.AllButtons - + // Delegate mouse clicks events to parent - onClicked: - (mouse) => - { - if(mouse.button === Qt.LeftButton) - { - if(moreOptionsArea.containsMouse) - { - root.moreOptionClicked(root.index, mouse); - return; - } - - root.leftButtonClicked(root.index); - } - else if(mouse.button === Qt.RightButton) - { - root.rightButtonClicked(root.index, mouse); - } - } + onClicked: mouse => { + if (mouse.button === Qt.LeftButton) { + if (moreOptionsArea.containsMouse) { + root.moreOptionClicked(root.index, mouse) + return + } + + root.leftButtonClicked(root.index) + } else if (mouse.button === Qt.RightButton) { + root.rightButtonClicked(root.index, mouse) + } + } } - - QtObject - { + + QtObject { id: internal property int lowerBookPartPadding: 14 } - - MToolTip - { + + MToolTip { id: toolTip focusedItem: existsOnlyOnClientIndicator content: "Your book has not been uploaded to the cloud.\nEither you are offline, or your storage is full." } - - function giveFocus() - { - root.forceActiveFocus(); + + function giveFocus() { + root.forceActiveFocus() } -} \ No newline at end of file +} diff --git a/src/presentation/homePage/MBookDetailsPopup.qml b/src/presentation/homePage/MBookDetailsPopup.qml index 3fee771ff..f7af00c01 100644 --- a/src/presentation/homePage/MBookDetailsPopup.qml +++ b/src/presentation/homePage/MBookDetailsPopup.qml @@ -7,40 +7,45 @@ import Librum.style import Librum.icons import Librum.controllers import Librum.globals +import Librum.fonts - -Popup -{ +Popup { id: root implicitWidth: 751 implicitHeight: layout.implicitHeight focus: true padding: 0 - background: Rectangle { radius: 6; color: Style.colorPopupBackground } + background: Rectangle { + radius: 6 + color: Style.colorPopupBackground + } modal: true - Overlay.modal: Rectangle { color: Style.colorPopupDim; opacity: 1 } - + Overlay.modal: Rectangle { + color: Style.colorPopupDim + opacity: 1 + } + onAboutToHide: internal.unloadData() - onAboutToShow: { internal.setupPopup(); internal.loadData() } - Component.onCompleted: { applyButton.forceActiveFocus(); applyButton.active = true } - - - MFlickWrapper - { + onAboutToShow: { + internal.setupPopup() + internal.loadData() + } + Component.onCompleted: { + applyButton.forceActiveFocus() + applyButton.active = true + } + + MFlickWrapper { id: flickWrapper anchors.fill: parent contentHeight: layout.height - - - ColumnLayout - { + + ColumnLayout { id: layout width: parent.width spacing: 0 - - - MButton - { + + MButton { id: closeButton Layout.preferredHeight: 32 Layout.preferredWidth: 32 @@ -54,27 +59,26 @@ Popup borderColorOnPressed: Style.colorButtonBorder imagePath: Icons.closePopup imageSize: 14 - + onClicked: root.close() } - - Label - { + + Label { id: popupTitle Layout.topMargin: 20 Layout.leftMargin: 52 text: "Book details" font.weight: Font.Bold - font.pointSize: 17 + font.pointSize: Fonts.bigTitleSize color: Style.colorTitle } - + + /* The SplitView contains all the book information, it holds the book cover on the left side, and the book data on the right. */ - SplitView - { + SplitView { id: splitView Layout.fillWidth: true Layout.preferredHeight: 320 @@ -85,94 +89,80 @@ Popup spacing: 10 smooth: true // Create explicit handle to make the grabbable area bigger - handle: RowLayout - { + handle: RowLayout { width: 9 spacing: 0 - - - Rectangle - { + + Rectangle { Layout.preferredWidth: 4 Layout.fillHeight: true color: "transparent" } - - Rectangle - { + + Rectangle { Layout.preferredWidth: 1 Layout.fillHeight: true color: Style.colorDarkSeparator } - - Rectangle - { + + Rectangle { Layout.preferredWidth: 4 Layout.fillHeight: true color: "transparent" } } - - + + /* The book cover side of the SplitView */ - Item - { + Item { id: bookCoverSide SplitView.preferredWidth: 218 SplitView.minimumWidth: 80 SplitView.maximumWidth: 246 - - - ColumnLayout - { + + ColumnLayout { id: bookCoverSideLayout width: parent.width - 20 anchors.verticalCenter: parent.verticalCenter clip: true spacing: 0 - - - Rectangle - { + + Rectangle { id: bookCoverContainer Layout.preferredWidth: parent.width Layout.preferredHeight: 240 Layout.topMargin: 4 color: Style.colorBookImageBackground radius: 4 - - Image - { + + Image { id: bookCover visible: Globals.selectedBook !== null ? source != "" : false anchors.centerIn: parent sourceSize.width: 188 sourceSize.height: 238 } - - Label - { + + Label { id: noImageLabel anchors.centerIn: parent visible: !bookCover.visible color: Style.colorNoImageLabel - text: Globals.selectedBook !== null ? "." + Globals.selectedBook.format : "" - font.pointSize: 20 + text: Globals.selectedBook + !== null ? "." + Globals.selectedBook.format : "" + font.pointSize: Fonts.veryBigTitleSize font.bold: true } } - - RowLayout - { + + RowLayout { id: bookCoverButtons Layout.topMargin: 22 spacing: 14 - - - MButton - { + + MButton { id: changeButton Layout.fillWidth: true Layout.preferredHeight: 34 @@ -183,12 +173,11 @@ Popup textColor: Style.colorText fontWeight: Font.DemiBold fontSize: 11.5 - + onClicked: chooseImageDialog.open() } - - MButton - { + + MButton { id: resetButton Layout.fillWidth: true Layout.preferredHeight: 34 @@ -199,25 +188,23 @@ Popup textColor: Style.colorText fontWeight: Font.DemiBold fontSize: 11.5 - - onClicked: bookCover.source = ""; + + onClicked: bookCover.source = "" } } } } - + + /* The book data side of the SplitView */ - Item - { + Item { id: bookDataSide SplitView.minimumWidth: 100 SplitView.fillWidth: true - - - ScrollView - { + + ScrollView { id: dataSideScrollView anchors.fill: parent anchors.topMargin: 0 @@ -227,28 +214,25 @@ Popup clip: true ScrollBar.vertical.policy: ScrollBar.AlwaysOn ScrollBar.horizontal.policy: ScrollBar.AlwaysOff - + Component.onCompleted: contentItem.maximumFlickVelocity = 600 - - - ColumnLayout - { + + ColumnLayout { id: dataSideLayout width: parent.width - 18 height: parent.height anchors.rightMargin: 8 spacing: 13 - - - MLabeledInputBox - { + + MLabeledInputBox { id: titleField Layout.fillWidth: true boxHeight: 34 headerText: "Title" headerFontWeight: Font.Bold headerFontSize: 11.5 - text: Globals.selectedBook !== null ? Globals.selectedBook.title : "" + text: Globals.selectedBook + !== null ? Globals.selectedBook.title : "" placeholderContent: "Unknown" placeholderColor: Style.colorPlaceholderText headerToBoxSpacing: 3 @@ -258,16 +242,16 @@ Popup borderWidth: 1 borderRadius: 4 } - - MLabeledInputBox - { + + MLabeledInputBox { id: authorsField Layout.fillWidth: true boxHeight: 34 headerText: "Authors" headerFontWeight: Font.Bold headerFontSize: 11.5 - text: Globals.selectedBook !== null ? Globals.selectedBook.authors : "" + text: Globals.selectedBook + !== null ? Globals.selectedBook.authors : "" placeholderContent: "Unknown" placeholderColor: Style.colorPlaceholderText headerToBoxSpacing: 3 @@ -277,17 +261,15 @@ Popup borderWidth: 1 borderRadius: 4 } - - MLabeledInputBox - { + + MLabeledInputBox { id: pagesField Layout.fillWidth: true boxHeight: 34 headerText: "Pages" headerFontWeight: Font.Bold headerFontSize: 11.5 - text: Globals.selectedBook !== null ? - Globals.selectedBook.pageCount : internal.placeholderText + text: Globals.selectedBook !== null ? Globals.selectedBook.pageCount : internal.placeholderText headerToBoxSpacing: 3 inputFontSize: 12 inputFontColor: Style.colorLightInputText @@ -296,9 +278,8 @@ Popup borderRadius: 4 readOnly: true } - - MComboBox - { + + MComboBox { id: languageComboBox Layout.fillWidth: true Layout.preferredHeight: 53 @@ -308,40 +289,79 @@ Popup headerFontColor: Style.colorTitle dropdownIconSize: 9 maxHeight: 200 - model: ListModel - { - ListElement { text: "English" } - ListElement { text: "German" } - ListElement { text: "Italian" } - ListElement { text: "French" } - ListElement { text: "Romanian" } - ListElement { text: "Spanish" } - ListElement { text: "Mandarin" } - ListElement { text: "Portugese" } - ListElement { text: "Hindi" } - ListElement { text: "Bengali" } - ListElement { text: "Russian" } - ListElement { text: "Arabic" } - ListElement { text: "Japanese" } - ListElement { text: "Indonesian" } - ListElement { text: "Turkish" } - ListElement { text: "Korean" } - ListElement { text: "Hungarian" } - ListElement { text: "Thai" } - ListElement { text: "Swahli" } - ListElement { text: "Dutch" } + model: ListModel { + ListElement { + text: "English" + } + ListElement { + text: "German" + } + ListElement { + text: "Italian" + } + ListElement { + text: "French" + } + ListElement { + text: "Romanian" + } + ListElement { + text: "Spanish" + } + ListElement { + text: "Mandarin" + } + ListElement { + text: "Portugese" + } + ListElement { + text: "Hindi" + } + ListElement { + text: "Bengali" + } + ListElement { + text: "Russian" + } + ListElement { + text: "Arabic" + } + ListElement { + text: "Japanese" + } + ListElement { + text: "Indonesian" + } + ListElement { + text: "Turkish" + } + ListElement { + text: "Korean" + } + ListElement { + text: "Hungarian" + } + ListElement { + text: "Thai" + } + ListElement { + text: "Swahli" + } + ListElement { + text: "Dutch" + } } } - - MLabeledInputBox - { + + MLabeledInputBox { id: documentCreatorField Layout.fillWidth: true boxHeight: 34 headerText: "Document creator" headerFontWeight: Font.Bold headerFontSize: 11.5 - text: Globals.selectedBook !== null ? Globals.selectedBook.creator : "" + text: Globals.selectedBook + !== null ? Globals.selectedBook.creator : "" placeholderContent: "Unknown" placeholderColor: Style.colorPlaceholderText headerToBoxSpacing: 3 @@ -351,16 +371,16 @@ Popup borderWidth: 1 borderRadius: 4 } - - MLabeledInputBox - { + + MLabeledInputBox { id: creationDateField Layout.fillWidth: true boxHeight: 34 headerText: "Creation date" headerFontWeight: Font.Bold headerFontSize: 11.5 - text: Globals.selectedBook !== null ? Globals.selectedBook.creationDate : "" + text: Globals.selectedBook + !== null ? Globals.selectedBook.creationDate : "" placeholderContent: "Unknown" placeholderColor: Style.colorPlaceholderText headerToBoxSpacing: 3 @@ -370,17 +390,16 @@ Popup borderWidth: 1 borderRadius: 4 } - - MLabeledInputBox - { + + MLabeledInputBox { id: formatField Layout.fillWidth: true boxHeight: 34 headerText: "Format" headerFontWeight: Font.Bold headerFontSize: 11.5 - text: Globals.selectedBook !== null && Globals.selectedBook.format !== "" ? - Globals.selectedBook.format : internal.placeholderText + text: Globals.selectedBook !== null + && Globals.selectedBook.format !== "" ? Globals.selectedBook.format : internal.placeholderText headerToBoxSpacing: 3 inputFontSize: 12 inputFontColor: Style.colorLightInputText @@ -389,17 +408,17 @@ Popup borderRadius: 4 readOnly: true } - - MLabeledInputBox - { + + MLabeledInputBox { id: sizeField Layout.fillWidth: true boxHeight: 34 headerText: "Document size" headerFontWeight: Font.Bold headerFontSize: 11.5 - text: Globals.selectedBook !== null && Globals.selectedBook.documentSize !== "" ? - Globals.selectedBook.documentSize : internal.placeholderText + text: Globals.selectedBook !== null + && Globals.selectedBook.documentSize + !== "" ? Globals.selectedBook.documentSize : internal.placeholderText headerToBoxSpacing: 3 inputFontSize: 12 inputFontColor: Style.colorLightInputText @@ -408,17 +427,15 @@ Popup borderRadius: 4 readOnly: true } - - MLabeledInputBox - { - id: addedField + + MLabeledInputBox { + id: addedField Layout.fillWidth: true boxHeight: 34 headerText: "Added" headerFontWeight: Font.Bold headerFontSize: 11.5 - text: Globals.selectedBook !== null ? - Globals.selectedBook.addedToLibrary : internal.placeholderText + text: Globals.selectedBook !== null ? Globals.selectedBook.addedToLibrary : internal.placeholderText headerToBoxSpacing: 3 inputFontSize: 12 inputFontColor: Style.colorLightInputText @@ -427,9 +444,8 @@ Popup borderRadius: 4 readOnly: true } - - MLabeledInputBox - { + + MLabeledInputBox { id: lastOpenedField Layout.fillWidth: true Layout.bottomMargin: 3 @@ -437,9 +453,8 @@ Popup headerText: "Last opened" headerFontWeight: Font.Bold headerFontSize: 11.5 - text: Globals.selectedBook !== null ? - Globals.selectedBook.lastOpened : internal.placeholderText - + text: Globals.selectedBook !== null ? Globals.selectedBook.lastOpened : internal.placeholderText + headerToBoxSpacing: 3 inputFontSize: 12 inputFontColor: Style.colorLightInputText @@ -451,10 +466,9 @@ Popup } } } - } - - RowLayout - { + } + + RowLayout { id: buttonLayout Layout.preferredWidth: parent.width Layout.topMargin: 65 @@ -462,10 +476,8 @@ Popup Layout.leftMargin: 52 Layout.rightMargin: 52 spacing: 16 - - - MButton - { + + MButton { id: applyButton Layout.preferredWidth: 140 Layout.preferredHeight: 38 @@ -476,15 +488,20 @@ Popup textColor: active ? Style.colorFocusedButtonText : Style.colorUnfocusedButtonText fontWeight: Font.Bold fontSize: 12 - - onClicked: { internal.saveData(); root.close() } - Keys.onReturnPressed: { internal.saveData(); root.close() } + + onClicked: { + internal.saveData() + root.close() + } + Keys.onReturnPressed: { + internal.saveData() + root.close() + } Keys.onRightPressed: internal.focusCancelButton() Keys.onTabPressed: internal.focusCancelButton() } - - MButton - { + + MButton { id: cancelButton Layout.preferredWidth: 140 Layout.preferredHeight: 38 @@ -496,18 +513,20 @@ Popup textColor: active ? Style.colorFocusedButtonText : Style.colorUnfocusedButtonText fontWeight: Font.Bold fontSize: 12 - + onClicked: root.close() - Keys.onReturnPressed: root.close(); + Keys.onReturnPressed: root.close() Keys.onLeftPressed: internal.focusApplyButton() - Keys.onRightPressed: internal.focusDeleteButton() + Keys.onRightPressed: internal.focusDeleteButton() Keys.onTabPressed: internal.focusDeleteButton() } - - Item { id: widthFiller; Layout.fillWidth: true } - - MButton - { + + Item { + id: widthFiller + Layout.fillWidth: true + } + + MButton { id: deleteButton Layout.preferredWidth: 140 Layout.preferredHeight: 38 @@ -522,19 +541,17 @@ Popup imagePath: active ? Icons.trashHighlighted : Icons.trash imageSize: 17 imageSpacing: 10 - - onClicked: acceptDeletionPopup.open(); - Keys.onReturnPressed: acceptDeletionPopup.open(); + + onClicked: acceptDeletionPopup.open() + Keys.onReturnPressed: acceptDeletionPopup.open() Keys.onLeftPressed: internal.focusCancelButton() Keys.onTabPressed: internal.focusApplyButton() } } } } - - - MWarningPopup - { + + MWarningPopup { id: acceptDeletionPopup x: root.width / 2 - implicitWidth / 2 y: root.height / 2 - implicitHeight / 2 - 30 @@ -545,112 +562,110 @@ Popup rightButtonText: "Yes, Delete Book" buttonsWidth: 180 messageBottomSpacing: 10 - - onOpenedChanged: if(opened) acceptDeletionPopup.giveFocus() + + onOpenedChanged: if (opened) + acceptDeletionPopup.giveFocus() onDecisionMade: close() - onRightButtonClicked: - { - LibraryController.deleteBook(Globals.selectedBook.uuid); - root.close(); + onRightButtonClicked: { + LibraryController.deleteBook(Globals.selectedBook.uuid) + root.close() } } - - FileDialog - { + + FileDialog { id: chooseImageDialog acceptLabel: "Select" fileMode: FileDialog.OpenFile folder: StandardPaths.writableLocation(StandardPaths.DocumentsLocation) - nameFilters: ["All files (*.png *.jpg *.jpg *.jpeg)", "png files (*.png)", "jpg files (*.jpg)", - "jpeg files (*.jpeg)"] - + nameFilters: ["All files (*.png *.jpg *.jpg *.jpeg)", "png files (*.png)", "jpg files (*.jpg)", "jpeg files (*.jpeg)"] + onAccepted: bookCover.source = file } - - QtObject - { + + QtObject { id: internal property string placeholderText: "Unknown" - - function focusApplyButton() - { - cancelButton.active = false; - deleteButton.active = false; - - applyButton.active = true; - applyButton.forceActiveFocus(); + + function focusApplyButton() { + cancelButton.active = false + deleteButton.active = false + + applyButton.active = true + applyButton.forceActiveFocus() } - - function focusCancelButton() - { - applyButton.active = false; - deleteButton.active = false; - - cancelButton.active = true; - cancelButton.forceActiveFocus(); + + function focusCancelButton() { + applyButton.active = false + deleteButton.active = false + + cancelButton.active = true + cancelButton.forceActiveFocus() } - - function focusDeleteButton() - { - applyButton.active = false; - cancelButton.active = false; - - deleteButton.active = true; - deleteButton.forceActiveFocus(); + + function focusDeleteButton() { + applyButton.active = false + cancelButton.active = false + + deleteButton.active = true + deleteButton.forceActiveFocus() } - - function saveData() - { - var operationsMap = {}; - - if(titleField.text !== Globals.selectedBook.title) - operationsMap[LibraryController.MetaProperty.Title] = titleField.text; - - if(authorsField.text !== Globals.selectedBook.authors) - operationsMap[LibraryController.MetaProperty.Authors] = authorsField.text; - - if(languageComboBox.text !== Globals.selectedBook.language && languageComboBox.text != "") - operationsMap[LibraryController.MetaProperty.Language] = languageComboBox.text; - - if(documentCreatorField.text !== Globals.selectedBook.creator && documentCreatorField.text != "") - operationsMap[LibraryController.MetaProperty.Creator] = documentCreatorField.text; - - if(creationDateField.text !== Globals.selectedBook.creationDate && creationDateField.text != internal.placeholderText) - operationsMap[LibraryController.MetaProperty.CreationDate] = creationDateField.text; - - if(formatField.text !== Globals.selectedBook.format && formatField.text != internal.placeholderText) - operationsMap[LibraryController.MetaProperty.Format] = formatField.text; - - LibraryController.updateBook(Globals.selectedBook.uuid, operationsMap); - - + + function saveData() { + var operationsMap = {} + + if (titleField.text !== Globals.selectedBook.title) + operationsMap[LibraryController.MetaProperty.Title] = titleField.text + + if (authorsField.text !== Globals.selectedBook.authors) + operationsMap[LibraryController.MetaProperty.Authors] = authorsField.text + + if (languageComboBox.text !== Globals.selectedBook.language + && languageComboBox.text != "") + operationsMap[LibraryController.MetaProperty.Language] = languageComboBox.text + + if (documentCreatorField.text !== Globals.selectedBook.creator + && documentCreatorField.text != "") + operationsMap[LibraryController.MetaProperty.Creator] = documentCreatorField.text + + if (creationDateField.text !== Globals.selectedBook.creationDate + && creationDateField.text != internal.placeholderText) + operationsMap[LibraryController.MetaProperty.CreationDate] = creationDateField.text + + if (formatField.text !== Globals.selectedBook.format + && formatField.text != internal.placeholderText) + operationsMap[LibraryController.MetaProperty.Format] = formatField.text + + LibraryController.updateBook(Globals.selectedBook.uuid, + operationsMap) + // Handle book cover specially - if(bookCover.source != Globals.selectedBook.coverPath) // Needs to be !=, the types are different (QUrl and QString) - LibraryController.changeBookCover(Globals.selectedBook.uuid, bookCover.source); + if (bookCover.source != Globals.selectedBook.coverPath) + // Needs to be !=, the types are different (QUrl and QString) + LibraryController.changeBookCover(Globals.selectedBook.uuid, + bookCover.source) } - - function setupPopup() - { - applyButton.forceActiveFocus(); - applyButton.active = true; - cancelButton.active = false; - deleteButton.active = false; - - dataSideScrollView.contentItem.contentY = 0; + + function setupPopup() { + applyButton.forceActiveFocus() + applyButton.active = true + cancelButton.active = false + deleteButton.active = false + + dataSideScrollView.contentItem.contentY = 0 } - - function loadData() - { - if(Globals.selectedBook.coverPath !== "") - bookCover.source = Qt.binding( function () { return Globals.selectedBook.coverPath }) - - if(Globals.selectedBook.language !== "") - languageComboBox.setDefaultItem(Globals.selectedBook.language); + + function loadData() { + if (Globals.selectedBook.coverPath !== "") + bookCover.source = Qt.binding(function () { + return Globals.selectedBook.coverPath + }) + + if (Globals.selectedBook.language !== "") + languageComboBox.setDefaultItem(Globals.selectedBook.language) } - - function unloadData() - { - languageComboBox.deselectCurrenItem(); + + function unloadData() { + languageComboBox.deselectCurrenItem() } } } diff --git a/src/presentation/homePage/MEmptyScreenContent.qml b/src/presentation/homePage/MEmptyScreenContent.qml index a1a8c9f81..cbde6ae88 100644 --- a/src/presentation/homePage/MEmptyScreenContent.qml +++ b/src/presentation/homePage/MEmptyScreenContent.qml @@ -5,50 +5,43 @@ import CustomComponents import Librum.controllers import Librum.style import Librum.icons +import Librum.fonts - -Item -{ +Item { id: root signal clicked - - - Image - { + + Image { id: backgroundImage source: Icons.emptyHomeBackground sourceSize.width: parent.width sourceSize.height: parent.height - - ColumnLayout - { + + ColumnLayout { id: layout anchors.centerIn: parent anchors.verticalCenterOffset: -90 - - Image - { + + Image { id: fileSwiftImage sourceSize.width: 250 sourceSize.height: 135 source: Icons.fileSwift } - - Label - { + + Label { id: addBooksQuestion Layout.preferredWidth: 250 Layout.alignment: Qt.AlignHCenter text: "Quite empty here, what about adding your first book?" horizontalAlignment: Text.AlignHCenter - font.pointSize: 14 + font.pointSize: Fonts.smallTitleSize font.weight: Font.DemiBold color: Style.colorLightText wrapMode: Text.WordWrap } - - MButton - { + + MButton { id: addBooksButton Layout.preferredWidth: 134 Layout.preferredHeight: 42 @@ -63,8 +56,8 @@ Item fontSize: 13.5 imagePath: Icons.addFirstBookPlus imageSize: 16 - - onClicked: root.clicked(); + + onClicked: root.clicked() } } } diff --git a/src/presentation/homePage/MHomePage.qml b/src/presentation/homePage/MHomePage.qml index 384789c89..b49233686 100644 --- a/src/presentation/homePage/MHomePage.qml +++ b/src/presentation/homePage/MHomePage.qml @@ -6,6 +6,7 @@ import CustomComponents import Librum.elements import Librum.style import Librum.icons +import Librum.fonts import Librum.controllers import Librum.globals import Librum.models @@ -76,7 +77,7 @@ Page { textFormat: Text.RichText color: Style.colorBannerText font.bold: true - font.pointSize: 12 + font.pointSize: Fonts.bigSize // Switch to the proper cursor when hovering above the link MouseArea { diff --git a/src/presentation/homePage/MNoBookSatisfiesFilterItem.qml b/src/presentation/homePage/MNoBookSatisfiesFilterItem.qml index b2c843d30..c11c1cb82 100644 --- a/src/presentation/homePage/MNoBookSatisfiesFilterItem.qml +++ b/src/presentation/homePage/MNoBookSatisfiesFilterItem.qml @@ -4,32 +4,29 @@ import QtQuick.Layouts import Librum.style import Librum.icons import CustomComponents +import Librum.fonts -Item -{ +Item { id: root - signal clearFilters() - + signal clearFilters + implicitWidth: layout.implicitWidth implicitHeight: layout.implicitHeight - - ColumnLayout - { + + ColumnLayout { id: layout anchors.fill: parent spacing: 20 - - Label - { + + Label { id: text text: "No book satisfies the filter conditions" color: Style.colorTitle - font.pointSize: 22 + font.pointSize: Fonts.largeTitleSize font.weight: Font.Medium } - - MButton - { + + MButton { id: removeFiltersButton Layout.preferredWidth: 170 Layout.preferredHeight: 38 @@ -44,8 +41,8 @@ Item imagePath: Icons.cancelPurple imageSize: 11 imageToRight: true - + onClicked: root.clearFilters() } } -} \ No newline at end of file +} diff --git a/src/presentation/homePage/manageTagsPopup/MAddTagBox.qml b/src/presentation/homePage/manageTagsPopup/MAddTagBox.qml index 45c0cfde8..89682acff 100644 --- a/src/presentation/homePage/manageTagsPopup/MAddTagBox.qml +++ b/src/presentation/homePage/manageTagsPopup/MAddTagBox.qml @@ -4,47 +4,37 @@ import QtQuick.Controls import CustomComponents import Librum.style import Librum.icons +import Librum.fonts - -Item -{ +Item { id: root signal addTag(string name) - + implicitHeight: 36 implicitWidth: 400 - - - RowLayout - { + + RowLayout { id: layout anchors.fill: parent spacing: 8 - - - Pane - { + + Pane { id: box Layout.fillWidth: true Layout.fillHeight: true padding: 0 - background: Rectangle - { + background: Rectangle { color: "transparent" border.color: Style.colorContainerBorder radius: 4 } - - - RowLayout - { + + RowLayout { id: inBoxLayout anchors.fill: parent spacing: 4 - - - TextField - { + + TextField { id: inputField Layout.fillWidth: true Layout.fillHeight: true @@ -53,48 +43,40 @@ Item rightPadding: 4 selectByMouse: true color: Style.colorText - font.pointSize: 12 + font.pointSize: Fonts.bigSize font.weight: Font.Normal placeholderText: "Add a tag..." placeholderTextColor: Style.colorPlaceholderText - background: Rectangle - { + background: Rectangle { anchors.fill: parent color: "transparent" radius: 4 } - - - Keys.onReturnPressed: - { - if(inputField.text !== "") - root.addTag(inputField.text); - - inputField.clear(); + + Keys.onReturnPressed: { + if (inputField.text !== "") + root.addTag(inputField.text) + + inputField.clear() } } - - Item - { + + Item { id: iconBlock Layout.preferredWidth: icon.width + 18 Layout.preferredHeight: icon.height + 14 Layout.alignment: Qt.AlignRight | Qt.AlignVCenter Layout.rightMargin: 6 - - - Image - { + + Image { id: icon anchors.centerIn: parent sourceSize.width: 10 source: Icons.dropdownLight rotation: 180 fillMode: Image.PreserveAspectFit - - - NumberAnimation - { + + NumberAnimation { id: closeAnim target: icon property: "rotation" @@ -102,9 +84,8 @@ Item duration: 175 easing.type: Easing.InOutQuad } - - NumberAnimation - { + + NumberAnimation { id: openAnim target: icon property: "rotation" @@ -113,79 +94,67 @@ Item easing.type: Easing.InOutQuad } } - - MouseArea - { + + MouseArea { anchors.fill: parent - - onClicked: - { - if(popup.opened) - { - popup.close(); - return; + + onClicked: { + if (popup.opened) { + popup.close() + return } - - popup.open(); + + popup.open() } } } } } - - Label - { + + Label { id: addLabel Layout.fillHeight: true verticalAlignment: Text.AlignVCenter text: "ADD" opacity: mouseArea.pressed ? 0.8 : 1 color: Style.colorBasePurple - font.pointSize: 11.5 + font.pointSize: Fonts.bigSize font.weight: Font.Bold - - - MouseArea - { + + MouseArea { id: mouseArea anchors.fill: parent - - onClicked: - { - if(inputField.text !== "") - root.addTag(inputField.text); - - inputField.clear(); + + onClicked: { + if (inputField.text !== "") + root.addTag(inputField.text) + + inputField.clear() } } } } - - - MAddTagBoxPopup - { + + MAddTagBoxPopup { id: popup width: box.width y: root.height + 6 closePolicy: Popup.CloseOnPressOutsideParent | Popup.CloseOnEscape - + onItemSelected: root.addTag(currentlySelectedData) - onAboutToShow: openAnim.start(); - onAboutToHide: closeAnim.start(); + onAboutToShow: openAnim.start() + onAboutToHide: closeAnim.start() } - - function close() - { - popup.close(); + + function close() { + popup.close() } - - function clearInputField() - { - inputField.clear(); + + function clearInputField() { + inputField.clear() } - - function giveFocus() - { - inputField.forceActiveFocus(); + + function giveFocus() { + inputField.forceActiveFocus() } -} \ No newline at end of file +} diff --git a/src/presentation/homePage/manageTagsPopup/MManageTagsPopup.qml b/src/presentation/homePage/manageTagsPopup/MManageTagsPopup.qml index 3bac3f9fa..0d6eef3c6 100644 --- a/src/presentation/homePage/manageTagsPopup/MManageTagsPopup.qml +++ b/src/presentation/homePage/manageTagsPopup/MManageTagsPopup.qml @@ -6,59 +6,46 @@ import Librum.style import Librum.icons import Librum.controllers import Librum.globals +import Librum.fonts - -Popup -{ +Popup { id: root implicitWidth: 516 implicitHeight: layout.height padding: 0 horizontalPadding: 52 - background: Rectangle - { + background: Rectangle { color: Style.colorPopupBackground radius: 6 } modal: true - Overlay.modal: Rectangle - { + Overlay.modal: Rectangle { color: Style.colorPopupDim opacity: 1 } - - onOpenedChanged: - { - if(opened) - { - addTagBox.giveFocus(); - informationLabel.text = Qt.binding(function() { - return Globals.bookTags.length + " TAGS - " + Globals.selectedBook.title; - }); - } - else - { - addTagBox.close(); - addTagBox.clearInputField(); + + onOpenedChanged: { + if (opened) { + addTagBox.giveFocus() + informationLabel.text = Qt.binding(function () { + return Globals.bookTags.length + " TAGS - " + Globals.selectedBook.title + }) + } else { + addTagBox.close() + addTagBox.clearInputField() } } - - - MFlickWrapper - { + + MFlickWrapper { anchors.fill: parent contentHeight: layout.height - - - ColumnLayout - { + + ColumnLayout { id: layout width: parent.width spacing: 0 - - - MButton - { + + MButton { id: closeButton Layout.preferredHeight: 32 Layout.preferredWidth: 32 @@ -72,40 +59,36 @@ Popup borderColorOnPressed: Style.colorButtonBorder imagePath: Icons.closePopup imageSize: 14 - + onClicked: root.close() } - - Label - { + + Label { id: popupTitle Layout.topMargin: 20 text: "Manage Tags" font.weight: Font.Bold - font.pointSize: 17 + font.pointSize: Fonts.bigTitleSize color: Style.colorTitle } - - - MAddTagBox - { + + MAddTagBox { id: addTagBox Layout.topMargin: 46 Layout.fillWidth: true - - onAddTag: (name) => - { + + onAddTag: name => { // Cant use return value, bc. it is null if tag already exists - UserController.addTag(name); - - let tagUuid = UserController.getTagUuidForName(name); - LibraryController.addTag(Globals.selectedBook.uuid, name, tagUuid); + UserController.addTag(name) + + let tagUuid = UserController.getTagUuidForName( + name) + LibraryController.addTag( + Globals.selectedBook.uuid, name, tagUuid) } } - - - Label - { + + Label { id: informationLabel Layout.fillWidth: true Layout.topMargin: 32 @@ -115,23 +98,20 @@ Popup font.weight: Font.Medium elide: Text.ElideRight } - - Rectangle - { + + Rectangle { id: separator Layout.fillWidth: true Layout.preferredHeight: 1 Layout.topMargin: 4 color: Style.colorDarkSeparator } - - - ListView - { + + ListView { id: listView property var currentSelected property string oldText - + Layout.fillWidth: true Layout.preferredHeight: contentHeight Layout.maximumHeight: 228 @@ -143,37 +123,36 @@ Popup boundsBehavior: Flickable.StopAtBounds ScrollBar.vertical: ScrollBar {} model: Globals.bookTags - delegate: MTagItem - { + delegate: MTagItem { width: listView.width - - onRemoveTag: (index) => - { - LibraryController.removeTag(Globals.selectedBook.uuid, - Globals.bookTags[index].uuid); + + onRemoveTag: index => { + LibraryController.removeTag( + Globals.selectedBook.uuid, + Globals.bookTags[index].uuid) } - - onStartedRenaming: (oldText) => - { - listView.oldText = oldText; + + onStartedRenaming: oldText => { + listView.oldText = oldText } - - onRenamedTag: (index, text) => - { - let currentItem = listView.itemAtIndex(index); - let uuid = UserController.getTagUuidForName(listView.oldText); - - let success = UserController.renameTag(uuid, text); - if(success) - { - LibraryController.renameTags(listView.oldText, text); + + onRenamedTag: (index, text) => { + let currentItem = listView.itemAtIndex( + index) + let uuid = UserController.getTagUuidForName( + listView.oldText) + + let success = UserController.renameTag( + uuid, text) + if (success) { + LibraryController.renameTags( + listView.oldText, text) } } } } - - MButton - { + + MButton { id: doneButton Layout.fillWidth: true Layout.preferredHeight: 40 @@ -185,15 +164,13 @@ Popup textColor: Style.colorFocusedButtonText fontWeight: Font.Bold text: "Done" - + onClicked: root.close() } } } - - - function removeTag() - { + + function removeTag() { ; } -} \ No newline at end of file +} diff --git a/src/presentation/homePage/manageTagsPopup/MTagItem.qml b/src/presentation/homePage/manageTagsPopup/MTagItem.qml index be0162dc0..19c3453df 100644 --- a/src/presentation/homePage/manageTagsPopup/MTagItem.qml +++ b/src/presentation/homePage/manageTagsPopup/MTagItem.qml @@ -55,7 +55,7 @@ Item leftPadding: 0 text: Globals.bookTags[root.index].name font.weight: root.selected ? Font.Medium : Font.Normal - font.pointSize: 12 + font.pointSize: Fonts.bigSize color: Style.colorText readOnly: true background: Rectangle diff --git a/src/presentation/homePage/toolbar/filterByButton/MFilterByButton.qml b/src/presentation/homePage/toolbar/filterByButton/MFilterByButton.qml index 998e44038..d98c849c9 100644 --- a/src/presentation/homePage/toolbar/filterByButton/MFilterByButton.qml +++ b/src/presentation/homePage/toolbar/filterByButton/MFilterByButton.qml @@ -3,89 +3,75 @@ import QtQuick.Layouts import QtQuick.Controls import Librum.style import Librum.icons +import Librum.fonts - -Item -{ +Item { id: root - property bool opened : false - signal filterSelected(string authors, string format, string date, - bool onlyBooks, bool onlyFiles, bool read, bool unread) - + property bool opened: false + signal filterSelected(string authors, string format, string date, bool onlyBooks, bool onlyFiles, bool read, bool unread) + implicitWidth: 104 implicitHeight: 36 - - - Pane - { + + Pane { id: container anchors.fill: parent padding: 0 - background: Rectangle - { + background: Rectangle { color: Style.colorControlBackground border.width: 1 border.color: Style.colorContainerBorder radius: 5 } - - - RowLayout - { + + RowLayout { id: layout anchors.centerIn: parent spacing: 5 - - Image - { + + Image { id: filterByArrowIcon sourceSize.height: 14 source: Icons.filter fillMode: Image.PreserveAspectFit } - - Label - { + + Label { id: filterByLabel Layout.topMargin: -1 color: Style.colorText text: "Filters" - font.pointSize: 12 + font.pointSize: Fonts.bigSize font.weight: Font.Bold } } } - - MouseArea - { + + MouseArea { id: mouseArea anchors.fill: parent - - onClicked: selectionPopup.opened ? selectionPopup.close() : selectionPopup.open() + + onClicked: selectionPopup.opened ? selectionPopup.close( + ) : selectionPopup.open() } - - MFilterByPopup - { + + MFilterByPopup { id: selectionPopup y: root.height + 6 closePolicy: Popup.CloseOnReleaseOutsideParent | Popup.CloseOnEscape - - onFilterQuerySent: - { - close(); - root.filterSelected(authors, format, date, onlyBooks, - onlyFiles, read, unread); + + onFilterQuerySent: { + close() + root.filterSelected(authors, format, date, onlyBooks, onlyFiles, + read, unread) } } - - - function resetFilter() - { - selectionPopup.resetFilter(); + + function resetFilter() { + selectionPopup.resetFilter() } - - function giveFocus() - { - root.forceActiveFocus(); + + function giveFocus() { + root.forceActiveFocus() } } diff --git a/src/presentation/homePage/toolbar/sortByButton/MSortByButton.qml b/src/presentation/homePage/toolbar/sortByButton/MSortByButton.qml index bb2640deb..70a13f00e 100644 --- a/src/presentation/homePage/toolbar/sortByButton/MSortByButton.qml +++ b/src/presentation/homePage/toolbar/sortByButton/MSortByButton.qml @@ -3,65 +3,54 @@ import QtQuick.Layouts import QtQuick.Controls import Librum.style import Librum.icons +import Librum.fonts - -Item -{ +Item { id: root signal itemSelected(int role) - + implicitWidth: 104 implicitHeight: 36 - - - ColumnLayout - { + + ColumnLayout { id: layout anchors.fill: parent spacing: 4 - - - Pane - { + + Pane { id: container Layout.fillWidth: true Layout.fillHeight: true padding: 0 - background: Rectangle - { + background: Rectangle { color: Style.colorControlBackground border.width: 1 border.color: Style.colorContainerBorder radius: 5 } - - - RowLayout - { + + RowLayout { id: inButtonLayout anchors.centerIn: parent spacing: 8 - - Label - { + + Label { id: sortByLabel Layout.topMargin: -1 color: Style.colorText text: "Sort by" - font.pointSize: 12 + font.pointSize: Fonts.bigSize font.weight: Font.Bold } - - Image - { + + Image { id: sortByArrowIcon sourceSize.height: 6 source: Icons.dropdownLight fillMode: Image.PreserveAspectFit rotation: 180 - - NumberAnimation - { + + NumberAnimation { id: closeAnim target: sortByArrowIcon property: "rotation" @@ -69,9 +58,8 @@ Item duration: 175 easing.type: Easing.InOutQuad } - - NumberAnimation - { + + NumberAnimation { id: openAnim target: sortByArrowIcon property: "rotation" @@ -83,28 +71,24 @@ Item } } } - - MouseArea - { + + MouseArea { anchors.fill: parent - + onClicked: sortByPopup.opened ? sortByPopup.close() : sortByPopup.open() } - - MSortByPopup - { + + MSortByPopup { id: sortByPopup y: root.height + 6 closePolicy: Popup.CloseOnReleaseOutsideParent | Popup.CloseOnEscape - + onOpened: openAnim.start() onClosed: closeAnim.start() - onItemSelected: (role) => root.itemSelected(role) + onItemSelected: role => root.itemSelected(role) } - - - function giveFocus() - { - root.forceActiveFocus(); + + function giveFocus() { + root.forceActiveFocus() } -} \ No newline at end of file +} diff --git a/src/presentation/homePage/toolbar/tagSelector/MTagSelectorButton.qml b/src/presentation/homePage/toolbar/tagSelector/MTagSelectorButton.qml index 5df9a22cb..cb426cd75 100644 --- a/src/presentation/homePage/toolbar/tagSelector/MTagSelectorButton.qml +++ b/src/presentation/homePage/toolbar/tagSelector/MTagSelectorButton.qml @@ -3,86 +3,74 @@ import QtQuick.Layouts import QtQuick.Controls import Librum.style import Librum.icons +import Librum.fonts - -Item -{ +Item { id: root signal tagsSelected signal tagsRemoved - + implicitWidth: 104 implicitHeight: 36 - - - Pane - { + + Pane { id: container anchors.fill: parent padding: 0 - background: Rectangle - { + background: Rectangle { color: Style.colorControlBackground border.width: 1 border.color: Style.colorContainerBorder radius: 5 } - - - RowLayout - { + + RowLayout { id: layout anchors.centerIn: parent spacing: 6 - - Image - { + + Image { id: tagIcon sourceSize.height: 18 source: Icons.tag fillMode: Image.PreserveAspectFit } - - Label - { + + Label { id: tagLabel Layout.topMargin: -1 color: Style.colorText text: "Tags" - font.pointSize: 12 + font.pointSize: Fonts.bigSize font.weight: Font.Bold } } } - - MouseArea - { + + MouseArea { anchors.fill: parent - - onClicked: selectionPopup.opened ? selectionPopup.close() : selectionPopup.open() + + onClicked: selectionPopup.opened ? selectionPopup.close( + ) : selectionPopup.open() } - - MTagSelectorPopup - { + + MTagSelectorPopup { id: selectionPopup y: root.height + 6 - - onClosed: - { - if(selectionPopup.hasAtLeastOneTagSelected()) - root.tagsSelected(); + + onClosed: { + if (selectionPopup.hasAtLeastOneTagSelected()) + root.tagsSelected() else - root.tagsRemoved(); + root.tagsRemoved() } } - - function clearSelections() - { - selectionPopup.clearSelections(); + + function clearSelections() { + selectionPopup.clearSelections() } - - function giveFocus() - { - root.forceActiveFocus(); + + function giveFocus() { + root.forceActiveFocus() } -} \ No newline at end of file +} diff --git a/src/presentation/homePage/toolbar/tagSelector/MTagSelectorPopup.qml b/src/presentation/homePage/toolbar/tagSelector/MTagSelectorPopup.qml index cdc5ec520..f653fa908 100644 --- a/src/presentation/homePage/toolbar/tagSelector/MTagSelectorPopup.qml +++ b/src/presentation/homePage/toolbar/tagSelector/MTagSelectorPopup.qml @@ -6,68 +6,59 @@ import QtQml.Models import Librum.style import Librum.icons import Librum.controllers +import Librum.fonts - -Popup -{ +Popup { id: root focus: true padding: 0 implicitWidth: 168 closePolicy: Popup.CloseOnReleaseOutsideParent | Popup.CloseOnEscape - background: Rectangle { color: "transparent" } - - onOpenedChanged: if(opened) listView.forceActiveFocus() - onAboutToHide: - { + background: Rectangle { + color: "transparent" + } + + onOpenedChanged: if (opened) + listView.forceActiveFocus() + onAboutToHide: { // When clicking the tagOptionsPopup while its over the popup edges, // root automatically closes because of its closing policy. We don't want this. - if(tagOptionsPopup.opened) - root.open(); - - internal.stopRenamingCurrentTag(false); + if (tagOptionsPopup.opened) + root.open() + + internal.stopRenamingCurrentTag(false) } - - - ColumnLayout - { + + ColumnLayout { id: layout anchors.fill: parent spacing: 0 - - - Image - { + + Image { id: triangleDecoration Layout.leftMargin: 14 Layout.bottomMargin: -1 source: Icons.popupDroplet } - - Pane - { + + Pane { id: container Layout.fillHeight: true Layout.fillWidth: true padding: 6 - background: Rectangle - { + background: Rectangle { color: Style.colorPopupBackground border.width: 1 border.color: Style.colorContainerBorder radius: 6 antialiasing: true } - - - ColumnLayout - { + + ColumnLayout { id: itemLayout width: parent.width - - - ListView - { + + ListView { id: listView Layout.fillWidth: true Layout.preferredHeight: contentHeight @@ -77,176 +68,161 @@ Popup keyNavigationEnabled: true clip: true boundsBehavior: Flickable.StopAtBounds - ScrollBar.vertical: ScrollBar { } + ScrollBar.vertical: ScrollBar {} model: UserController.tagsModel - delegate: MBaseListItem - { + delegate: MBaseListItem { width: listView.width containingListview: listView - - onClicked: internal.selectTag(index); - onRenamed: (index, text) => internal.renameTag(index, text) - onRightClicked: (mouse, index) => - { - internal.stopRenamingCurrentTag(); - + + onClicked: internal.selectTag(index) + onRenamed: (index, text) => internal.renameTag(index, + text) + onRightClicked: (mouse, index) => { + internal.stopRenamingCurrentTag() + // Calculate tagOptionsPopup position - let mousePosition = mapToItem(container, mouse.x, mouse.y); - tagOptionsPopup.x = mousePosition.x + 1; - tagOptionsPopup.y = mousePosition.y + 6; - + let mousePosition = mapToItem( + container, mouse.x, mouse.y) + tagOptionsPopup.x = mousePosition.x + 1 + tagOptionsPopup.y = mousePosition.y + 6 + // Open tagOptionsPopup - tagOptionsPopup.index = index; - tagOptionsPopup.open(); + tagOptionsPopup.index = index + tagOptionsPopup.open() } - + // Function required by MBaseListItem - function getContent() { return model.name; } + function getContent() { + return model.name + } } - + // Close popup when scrolling - onContentYChanged: tagOptionsPopup.close(); + onContentYChanged: tagOptionsPopup.close() } } } } - - - MRightClickMenu - { + + MRightClickMenu { id: tagOptionsPopup property int index: -1 property string originalTextOfLastEdited - + visible: false - - - objectModel: ObjectModel - { - MRightClickMenuItem - { + + objectModel: ObjectModel { + MRightClickMenuItem { width: tagOptionsPopup.width imagePath: Icons.checkCircle imageSize: 17 text: "Select" - - onClicked: - { - internal.selectTag(tagOptionsPopup.index); - tagOptionsPopup.close(); + + onClicked: { + internal.selectTag(tagOptionsPopup.index) + tagOptionsPopup.close() } } - - MRightClickMenuItem - { + + MRightClickMenuItem { width: tagOptionsPopup.width imagePath: Icons.edit imageSize: 17 text: "Rename" - + onClicked: internal.startRenamingTag(tagOptionsPopup.index) } - - MRightClickMenuItem - { + + MRightClickMenuItem { width: tagOptionsPopup.width imagePath: Icons.trash imageSize: 16 text: "Delete" - + onClicked: internal.deleteTag(tagOptionsPopup.index) } } } - - QtObject - { + + QtObject { id: internal - + + /* Innitiate the visual renaming proccess of tag at @index */ - function startRenamingTag(index) - { - let currentItem = listView.itemAtIndex(index); - tagOptionsPopup.originalTextOfLastEdited = currentItem.getContent(); - - currentItem.startRenaming(); - tagOptionsPopup.close(); + function startRenamingTag(index) { + let currentItem = listView.itemAtIndex(index) + tagOptionsPopup.originalTextOfLastEdited = currentItem.getContent() + + currentItem.startRenaming() + tagOptionsPopup.close() } - - function renameTag(index, text) - { + + function renameTag(index, text) { // Get tag to rename - let currentItem = listView.itemAtIndex(index); - let tagName = currentItem.getContent(); - let uuid = UserController.getTagUuidForName(tagName); - + let currentItem = listView.itemAtIndex(index) + let tagName = currentItem.getContent() + let uuid = UserController.getTagUuidForName(tagName) + // Rename tag - let success = UserController.renameTag(uuid, text); - if(success) - { - let oldText = tagOptionsPopup.originalTextOfLastEdited; - LibraryController.renameTags(oldText, text); + let success = UserController.renameTag(uuid, text) + if (success) { + let oldText = tagOptionsPopup.originalTextOfLastEdited + LibraryController.renameTags(oldText, text) } } - - function deleteTag(index) - { + + function deleteTag(index) { // Get tag uuid - let tagName = listView.itemAtIndex(index).getContent(); - let uuid = UserController.getTagUuidForName(tagName); - + let tagName = listView.itemAtIndex(index).getContent() + let uuid = UserController.getTagUuidForName(tagName) + // Delete tag - let success = UserController.deleteTag(uuid); - if(success) - { - LibraryController.removeAllTagsWithUuid(uuid); + let success = UserController.deleteTag(uuid) + if (success) { + LibraryController.removeAllTagsWithUuid(uuid) } - - tagOptionsPopup.close(); + + tagOptionsPopup.close() } - - function selectTag(index) - { - internal.stopRenamingCurrentTag(); - + + function selectTag(index) { + internal.stopRenamingCurrentTag() + // Set ListView properties - listView.currentIndex = index; - listView.currentItem.selected = !listView.currentItem.selected; - - if(listView.itemAtIndex(index).selected) - LibraryController.libraryModel.addFilterTag(listView.currentItem.getContent()); + listView.currentIndex = index + listView.currentItem.selected = !listView.currentItem.selected + + if (listView.itemAtIndex(index).selected) + LibraryController.libraryModel.addFilterTag( + listView.currentItem.getContent()) else - LibraryController.libraryModel.removeFilterTag(listView.currentItem.getContent()); + LibraryController.libraryModel.removeFilterTag( + listView.currentItem.getContent()) } - - function stopRenamingCurrentTag(saveText = true) - { - let currentItem = listView.itemAtIndex(tagOptionsPopup.index); - if(currentItem !== null && currentItem.renameable) - currentItem.stopRenaming(saveText); + + function stopRenamingCurrentTag(saveText = true) { + let currentItem = listView.itemAtIndex(tagOptionsPopup.index) + if (currentItem !== null && currentItem.renameable) + currentItem.stopRenaming(saveText) } } - - - function clearSelections() - { - for(let i = 0; i < listView.count; i++) - { - if(listView.itemAtIndex(i) !== null) - listView.itemAtIndex(i).selected = false; + + function clearSelections() { + for (var i = 0; i < listView.count; i++) { + if (listView.itemAtIndex(i) !== null) + listView.itemAtIndex(i).selected = false } } - - function hasAtLeastOneTagSelected() - { - for(let i = 0; i < listView.count; i++) - { - if(listView.itemAtIndex(i) !== null && listView.itemAtIndex(i).selected === true) - return true; + + function hasAtLeastOneTagSelected() { + for (var i = 0; i < listView.count; i++) { + if (listView.itemAtIndex(i) !== null && listView.itemAtIndex( + i).selected === true) + return true } - - return false; + + return false } -} \ No newline at end of file +} diff --git a/src/presentation/loginPage/MLoginPage.qml b/src/presentation/loginPage/MLoginPage.qml index 7dd4679aa..97e16aed3 100644 --- a/src/presentation/loginPage/MLoginPage.qml +++ b/src/presentation/loginPage/MLoginPage.qml @@ -7,255 +7,211 @@ import Librum.style import Librum.icons import Librum.controllers import Librum.models +import Librum.fonts - -MFlickWrapper -{ +MFlickWrapper { id: root - contentHeight: Window.height < layout.implicitHeight ? - layout.implicitHeight : Window.height - + contentHeight: Window.height < layout.implicitHeight ? layout.implicitHeight : Window.height + // Passing the focus to emailInput on Component.onCompleted() causes it // to pass controll back to root for some reason, this fixes the focus problem. - onActiveFocusChanged: if(activeFocus) emailInput.giveFocus() - - Component.onCompleted: - { + onActiveFocusChanged: if (activeFocus) + emailInput.giveFocus() + + Component.onCompleted: { // Focus the emailInput when page has loaded. - emailInput.giveFocus(); - + emailInput.giveFocus() + // For some reason this prevents a SEGV. Directly calling the auto login // directly causes the application to crash on startup. - autoLoginTimer.start(); + autoLoginTimer.start() } - Timer - { + Timer { id: autoLoginTimer interval: 0 - onTriggered: AuthController.tryAutomaticLogin(); + onTriggered: AuthController.tryAutomaticLogin() } - - Shortcut - { + + Shortcut { sequence: "Ctrl+Return" onActivated: internal.login() } - - Connections - { + + Connections { id: proccessLoginResult target: AuthController - function onLoginFinished(errorCode, message) - { - internal.processLoginResult(errorCode, message); + function onLoginFinished(errorCode, message) { + internal.processLoginResult(errorCode, message) } } - - Connections - { + + Connections { id: proccessLoadingUserResult target: UserController - function onFinishedLoadingUser(success) - { - if(success) - loadPage(homePage, sidebar.homeItem, false); + function onFinishedLoadingUser(success) { + if (success) + loadPage(homePage, sidebar.homeItem, false) else - loginFailedPopup.open(); + loginFailedPopup.open() } } - - - Page - { + + Page { id: page anchors.fill: parent bottomPadding: 22 - background: Rectangle { color: Style.colorAuthenticationPageBackground } - - - ColumnLayout - { + background: Rectangle { + color: Style.colorAuthenticationPageBackground + } + + ColumnLayout { id: layout anchors.centerIn: parent width: 544 - - - Pane - { + + Pane { id: backgroundRect Layout.fillWidth: true topPadding: 48 horizontalPadding: 71 bottomPadding: 42 - background: Rectangle - { + background: Rectangle { color: Style.colorContainerBackground radius: 5 } - - - ColumnLayout - { + + ColumnLayout { width: parent.width spacing: 0 - - - MLogo - { + + MLogo { id: logo Layout.alignment: Qt.AlignHCenter } - - Label - { + + Label { id: welcomeText Layout.alignment: Qt.AlignHCenter Layout.topMargin: 24 text: "Welcome back!" color: Style.colorText font.bold: true - font.pointSize: 26 + font.pointSize: Fonts.enormousTitleSize } - - Label - { + + Label { id: loginText Layout.topMargin: 4 Layout.alignment: Qt.AlignHCenter text: "Log into your account" color: Style.colorSubtitle - font.pointSize: 13 + font.pointSize: Fonts.hugeSize } - - - MLabeledInputBox - { + + MLabeledInputBox { id: emailInput Layout.fillWidth: true Layout.topMargin: 32 placeholderContent: "kaidoe@gmail.com" placeholderColor: Style.colorPlaceholderText headerText: "Email" - + onEdited: internal.clearLoginError() - Keys.onPressed: - (event) => - { - if(event.key === Qt.Key_Down || event.key === Qt.Key_Return) - { - passwordInput.giveFocus(); - } - } + Keys.onPressed: event => { + if (event.key === Qt.Key_Down + || event.key === Qt.Key_Return) { + passwordInput.giveFocus() + } + } } - - MLabeledInputBox - { + + MLabeledInputBox { id: passwordInput Layout.fillWidth: true Layout.topMargin: 22 headerText: "Password" image: Icons.eyeOn toggledImage: Icons.eyeOff - + onEdited: internal.clearLoginError() - Keys.onPressed: - (event) => - { - if(event.key === Qt.Key_Up) - { - emailInput.giveFocus(); - } - else if(event.key === Qt.Key_Down || event.key === Qt.Key_Return) - { - rememberMeCheckBox.giveFocus(); - } - } + Keys.onPressed: event => { + if (event.key === Qt.Key_Up) { + emailInput.giveFocus() + } else if (event.key === Qt.Key_Down + || event.key === Qt.Key_Return) { + rememberMeCheckBox.giveFocus() + } + } } - - Label - { + + Label { id: generalErrorText Layout.topMargin: 8 visible: false color: Style.colorErrorText } - - RowLayout - { + + RowLayout { id: optionsLayout Layout.preferredWidth: parent.width Layout.fillWidth: true Layout.topMargin: 24 - - MCheckBox - { + + MCheckBox { id: rememberMeCheckBox Layout.preferredWidth: 20 Layout.preferredHeight: 20 - - Keys.onPressed: - (event) => - { - if(event.key === Qt.Key_Return) - { - toggle(); - } - else if(event.key === Qt.Key_Up) - { - passwordInput.giveFocus(); - } - else if(event.key === Qt.Key_Down) - { - loginButton.giveFocus(); - } - } + + Keys.onPressed: event => { + if (event.key === Qt.Key_Return) { + toggle() + } else if (event.key === Qt.Key_Up) { + passwordInput.giveFocus() + } else if (event.key === Qt.Key_Down) { + loginButton.giveFocus() + } + } } - - Label - { + + Label { id: rememberMeText text: "Remember me" Layout.alignment: Qt.AlignVCenter Layout.leftMargin: 4 - font.pointSize: 11 + font.pointSize: Fonts.baseSize color: Style.colorText - - MouseArea - { + + MouseArea { anchors.fill: parent - + onClicked: rememberMeCheckBox.toggle() } } - - Item - { + + Item { id: widthFiller Layout.fillWidth: true } - - Label - { + + Label { id: forgotPasswordLabel text: "Forgot password?" Layout.alignment: Qt.AlignVCenter Layout.leftMargin: 3 - font.pointSize: 10.5 + font.pointSize: Fonts.mediumSize opacity: forgotPasswordPageRedirection.pressed ? 0.8 : 1 color: Style.colorBasePurple - - MouseArea - { + + MouseArea { id: forgotPasswordPageRedirection anchors.fill: parent - + onClicked: loadPage(forgotPasswordPage) } } } - - MButton - { + + MButton { id: loginButton Layout.fillWidth: true Layout.preferredHeight: 40 @@ -267,49 +223,44 @@ MFlickWrapper textColor: Style.colorFocusedButtonText fontWeight: Font.Bold text: "Login" - + onClicked: internal.login() - onFocusChanged: - { - if(focus) - opacity = opacityOnPressed; + onFocusChanged: { + if (focus) + opacity = opacityOnPressed else - opacity = 1; + opacity = 1 } - - Keys.onPressed: - (event) => - { - if(event.key === Qt.Key_Up) rememberMeCheckBox.giveFocus(); - else if(event.key === Qt.Key_Return) internal.login(); - } + + Keys.onPressed: event => { + if (event.key === Qt.Key_Up) + rememberMeCheckBox.giveFocus() + else if (event.key === Qt.Key_Return) + internal.login() + } } } } - - Label - { + + Label { id: registerLinkLabel Layout.alignment: Qt.AlignHCenter Layout.topMargin: 14 text: "Don't have an account? Register" - font.pointSize: 10.5 + font.pointSize: Fonts.mediumSize opacity: registerLinkArea.pressed ? 0.8 : 1 color: Style.colorBasePurple - - MouseArea - { + + MouseArea { id: registerLinkArea anchors.fill: parent - onClicked: loadPage(registerPage); + onClicked: loadPage(registerPage) } } - } } - - MWarningPopup - { + + MWarningPopup { id: loginFailedPopup x: Math.round(root.width / 2 - implicitWidth / 2) y: Math.round(root.height / 2 - implicitHeight / 2) - 75 @@ -319,73 +270,65 @@ MFlickWrapper leftButtonText: "Ok" rightButtonText: "Report" messageBottomSpacing: 8 - + onDecisionMade: close() - onOpenedChanged: if(opened) loginFailedPopup.giveFocus() + onOpenedChanged: if (opened) + loginFailedPopup.giveFocus() } - - - QtObject - { + + QtObject { id: internal property color previousBorderColor: emailInput.borderColor - - function login() - { - AuthController.loginUser(emailInput.text, passwordInput.text, rememberMeCheckBox.checked); + + function login() { + AuthController.loginUser(emailInput.text, passwordInput.text, + rememberMeCheckBox.checked) } - - function processLoginResult(errorCode, message) - { - if(errorCode === ErrorCode.NoError) - { - UserController.loadUser(rememberMeCheckBox.checked); - } - else - { - internal.setLoginError(errorCode, message); + + function processLoginResult(errorCode, message) { + if (errorCode === ErrorCode.NoError) { + UserController.loadUser(rememberMeCheckBox.checked) + } else { + internal.setLoginError(errorCode, message) } } - - function setLoginError(errorCode, message) - { - switch(errorCode) - { + + function setLoginError(errorCode, message) { + switch (errorCode) { case ErrorCode.EmailOrPasswordIsWrong: - emailInput.setError(); - passwordInput.errorText = message; - passwordInput.setError(); - break; - - case ErrorCode.EmailAddressTooLong: // Fall through - case ErrorCode.EmailAddressTooShort: // Fall through + emailInput.setError() + passwordInput.errorText = message + passwordInput.setError() + break + case ErrorCode.EmailAddressTooLong: + // Fall through + case ErrorCode.EmailAddressTooShort: + // Fall through case ErrorCode.InvalidEmailAddressFormat: - emailInput.errorText = message; - emailInput.setError(); - break; - - case ErrorCode.PasswordTooLong: // Fall through + emailInput.errorText = message + emailInput.setError() + break + case ErrorCode.PasswordTooLong: + // Fall through case ErrorCode.PasswordTooShort: - - passwordInput.errorText = message; - passwordInput.setError(); - break; - + + passwordInput.errorText = message + passwordInput.setError() + break default: - generalErrorText.text = message; - generalErrorText.visible = true; + generalErrorText.text = message + generalErrorText.visible = true } } - - function clearLoginError() - { - emailInput.errorText = ""; - emailInput.clearError(); - passwordInput.errorText = ""; - passwordInput.clearError(); - - generalErrorText.visible = false; - generalErrorText.text = ""; + + function clearLoginError() { + emailInput.errorText = "" + emailInput.clearError() + passwordInput.errorText = "" + passwordInput.clearError() + + generalErrorText.visible = false + generalErrorText.text = "" } } -} \ No newline at end of file +} diff --git a/src/presentation/modules/CustomComponents/MConfirmAccountDeletionPopup.qml b/src/presentation/modules/CustomComponents/MConfirmAccountDeletionPopup.qml index 8566d6c54..c8531bf20 100644 --- a/src/presentation/modules/CustomComponents/MConfirmAccountDeletionPopup.qml +++ b/src/presentation/modules/CustomComponents/MConfirmAccountDeletionPopup.qml @@ -5,42 +5,42 @@ import Qt.labs.platform import CustomComponents import Librum.style import Librum.icons +import Librum.fonts import Librum.controllers import Librum.globals - -Popup -{ +Popup { id: root signal deletionConfirmed - + implicitWidth: 751 implicitHeight: layout.implicitHeight focus: true padding: 0 - background: Rectangle { radius: 6; color: Style.colorPopupBackground } + background: Rectangle { + radius: 6 + color: Style.colorPopupBackground + } modal: true - Overlay.modal: Rectangle { color: Style.colorPopupDim; opacity: 1 } - - onOpenedChanged: if(!opened) emailInput.text = "" - - - MFlickWrapper - { + Overlay.modal: Rectangle { + color: Style.colorPopupDim + opacity: 1 + } + + onOpenedChanged: if (!opened) + emailInput.text = "" + + MFlickWrapper { id: flickWrapper anchors.fill: parent contentHeight: layout.height - - - ColumnLayout - { + + ColumnLayout { id: layout width: parent.width spacing: 0 - - - MButton - { + + MButton { id: closeButton Layout.preferredHeight: 32 Layout.preferredWidth: 32 @@ -54,34 +54,31 @@ Popup borderColorOnPressed: Style.colorButtonBorder imagePath: Icons.closePopup imageSize: 14 - + onClicked: root.close() } - - Label - { + + Label { id: popupTitle Layout.topMargin: 20 Layout.leftMargin: 52 text: "Confirm Account Deletion" font.weight: Font.Bold - font.pointSize: 17 + font.pointSize: Fonts.bigTitleSize color: Style.colorTitle } - - Label - { + + Label { id: infoText Layout.topMargin: 20 Layout.leftMargin: 52 textFormat: Text.RichText text: "Deleting your account is an irreversible action.
Once you delete your account, there is no going back. Please be certain." - font.pointSize: 14 + font.pointSize: Fonts.smallTitleSize color: Style.colorText } - - MLabeledInputBox - { + + MLabeledInputBox { id: emailInput Layout.fillWidth: true Layout.topMargin: 28 @@ -92,17 +89,15 @@ Popup placeholderColor: Style.colorPlaceholderText headerText: "Confirm the deletion by entering your Account's email." } - - RowLayout - { + + RowLayout { id: buttonLayout Layout.topMargin: 72 Layout.bottomMargin: 42 Layout.leftMargin: 52 spacing: 16 - - MButton - { + + MButton { id: cancelButton Layout.preferredWidth: 140 Layout.preferredHeight: 38 @@ -115,12 +110,11 @@ Popup textColor: active ? Style.colorFocusedButtonText : Style.colorUnfocusedButtonText fontWeight: Font.Bold fontSize: 12 - + onClicked: root.close() } - - MButton - { + + MButton { id: deleteButton Layout.preferredWidth: 140 Layout.preferredHeight: 38 @@ -135,16 +129,14 @@ Popup imagePath: active ? Icons.trashHighlighted : Icons.trash imageSize: 17 imageSpacing: 10 - - onClicked: - { - if(emailInput.text !== UserController.email) - { + + onClicked: { + if (emailInput.text !== UserController.email) { emailInput.errorText = "Your email is wrong." emailInput.setError() return } - + root.deletionConfirmed() root.close() } @@ -152,4 +144,4 @@ Popup } } } -} \ No newline at end of file +} diff --git a/src/presentation/modules/CustomComponents/MDualToggle.qml b/src/presentation/modules/CustomComponents/MDualToggle.qml index a6ac51b51..86f47aca4 100644 --- a/src/presentation/modules/CustomComponents/MDualToggle.qml +++ b/src/presentation/modules/CustomComponents/MDualToggle.qml @@ -2,46 +2,40 @@ import QtQuick import QtQuick.Layouts import QtQuick.Controls import Librum.style +import Librum.fonts + /** A rectangular component which switches between two states which are represented as texts via @leftText and @rightText */ -Item -{ +Item { id: root property string leftText: "Left" property string rightText: "Right" property bool leftSelected: false - property bool rightSelected: true // default + property bool rightSelected: true // default signal toggled(string newSelected) - + implicitHeight: 38 implicitWidth: 178 - - - Pane - { + + Pane { id: container anchors.fill: parent padding: 0 - background: Rectangle - { + background: Rectangle { color: Style.colorControlBackground border.color: Style.colorContainerBorder radius: 4 } - - - RowLayout - { + + RowLayout { id: layout anchors.fill: parent spacing: 0 - - - Label - { + + Label { id: leftLabel Layout.fillHeight: true Layout.preferredWidth: (root.width - separator.width) / 2 @@ -49,11 +43,10 @@ Item horizontalAlignment: Text.AlignHCenter text: root.leftText color: root.leftSelected ? Style.colorBasePurple : Style.colorLightText - font.pointSize: 12 + font.pointSize: Fonts.bigSize font.weight: root.leftSelected ? Font.Bold : Font.DemiBold font.letterSpacing: root.leftSelected ? -0.4 : 0 - background: Rectangle - { + background: Rectangle { id: leftLabelBackground anchors.fill: parent anchors.margins: 1 @@ -61,14 +54,14 @@ Item opacity: internal.leftRectOpacity radius: 4 } - + + /** Due to @leftLabel having rounder corners it doesn't fill up the space towards the middle (infront of the @separator). This Rectangle just fills the remaining space. */ - Rectangle - { + Rectangle { id: leftBackgroundFiller anchors.right: parent.right anchors.top: parent.top @@ -79,25 +72,22 @@ Item opacity: leftLabelBackground.opacity color: leftLabelBackground.color } - - MouseArea - { + + MouseArea { anchors.fill: parent - + onClicked: root.selectLeft() } } - - Rectangle - { + + Rectangle { id: separator Layout.fillHeight: true Layout.preferredWidth: 2 color: Style.colorSeparator } - - Label - { + + Label { id: rightLabel Layout.fillHeight: true Layout.preferredWidth: (root.width - separator.width) / 2 @@ -105,11 +95,10 @@ Item horizontalAlignment: Text.AlignHCenter text: root.rightText color: root.rightSelected ? Style.colorBasePurple : Style.colorLightText - font.pointSize: 12 + font.pointSize: Fonts.bigSize font.weight: root.rightSelected ? Font.Bold : Font.DemiBold font.letterSpacing: root.rightSelected ? -0.4 : 0 - background: Rectangle - { + background: Rectangle { id: rightLabelBackground anchors.fill: parent anchors.margins: 1 @@ -117,14 +106,14 @@ Item color: Style.colorLightHighlight radius: 4 } - + + /** Due to @rightLabel having rounder corners it doesn't fill up the space towards the middle (after the @separator). This Rectangle just fills the remaining space. */ - Rectangle - { + Rectangle { id: rightBackgroundFiller anchors.left: parent.left anchors.top: parent.top @@ -135,103 +124,88 @@ Item opacity: rightLabelBackground.opacity color: rightLabelBackground.color } - - MouseArea - { + + MouseArea { anchors.fill: parent - - onClicked: root.selectRight(); + + onClicked: root.selectRight() } } } } - - - SequentialAnimation - { + + SequentialAnimation { id: selectRightAnimation - - NumberAnimation - { + + NumberAnimation { target: internal property: "leftRectOpacity" duration: 75 to: 0 } - - NumberAnimation - { + + NumberAnimation { target: internal property: "rightRectOpacity" duration: 75 to: 1 } - - onFinished: - { - root.leftSelected = false; - root.rightSelected = true; - root.toggled(root.rightText); + + onFinished: { + root.leftSelected = false + root.rightSelected = true + root.toggled(root.rightText) } } - - SequentialAnimation - { + + SequentialAnimation { id: selectLeftAnimation - - NumberAnimation - { + + NumberAnimation { target: internal property: "rightRectOpacity" duration: 75 to: 0 } - - NumberAnimation - { + + NumberAnimation { target: internal property: "leftRectOpacity" duration: 75 to: 1 } - - onFinished: - { - root.leftSelected = true; - root.rightSelected = false; - root.toggled(root.leftText); + + onFinished: { + root.leftSelected = true + root.rightSelected = false + root.toggled(root.leftText) } } - - QtObject - { + + QtObject { id: internal property double leftRectOpacity property double rightRectOpacity - - Component.onCompleted: - { + + Component.onCompleted: { // Hard-set it once during object creation, after that it // is managed by fluent animations internal.leftRectOpacity = root.leftSelected ? 1 : 0 internal.rightRectOpacity = root.rightSelected ? 1 : 0 } } - - - function selectLeft() - { - if(root.leftSelected) - return; - - selectLeftAnimation.start(); + + function selectLeft() { + if (root.leftSelected) + return + + selectLeftAnimation.start() } - - function selectRight() - { - if(root.rightSelected) - return; - - selectRightAnimation.start(); + + function selectRight() { + if (root.rightSelected) + return + + selectRightAnimation.start() } -} \ No newline at end of file +} diff --git a/src/presentation/modules/CustomComponents/MRadioButton.qml b/src/presentation/modules/CustomComponents/MRadioButton.qml index 92cf848fb..2e1357aef 100644 --- a/src/presentation/modules/CustomComponents/MRadioButton.qml +++ b/src/presentation/modules/CustomComponents/MRadioButton.qml @@ -2,6 +2,7 @@ import QtQuick import QtQuick.Controls import QtQuick.Layouts import Librum.style +import Librum.fonts /** @@ -53,7 +54,7 @@ Item { Layout.maximumWidth: 200 Layout.alignment: Qt.AlignVCenter text: root.text - font.pointSize: 12 + font.pointSize: Fonts.bigSize font.weight: root.selected ? Font.Medium : Font.Normal color: Style.colorText diff --git a/src/presentation/modules/CustomComponents/MSpinbox.qml b/src/presentation/modules/CustomComponents/MSpinbox.qml index efd84da43..899c9fa5b 100644 --- a/src/presentation/modules/CustomComponents/MSpinbox.qml +++ b/src/presentation/modules/CustomComponents/MSpinbox.qml @@ -3,49 +3,43 @@ import QtQuick.Controls import QtQuick.Layouts import Librum.style import Librum.icons +import Librum.fonts + /** A box with an editable text input which contains a number and can also be changed by arrows next to the box. */ -Item -{ +Item { id: root property bool invalid: false property int value: 14 property int maxVal: 99 property int minVal: 1 - signal newValueSelected() - + signal newValueSelected + implicitWidth: 72 implicitHeight: 32 - - Keys.onPressed:(event) => internal.handleKeyInput(event) - - - Pane - { + + Keys.onPressed: event => internal.handleKeyInput(event) + + Pane { id: container anchors.fill: parent padding: 0 - background: Rectangle - { + background: Rectangle { color: Style.colorControlBackground border.color: root.invalid ? Style.colorRed : Style.colorContainerBorder border.width: root.invalid ? 2 : 1 radius: 4 } - - - RowLayout - { + + RowLayout { id: layout anchors.fill: parent spacing: 0 - - - TextField - { + + TextField { id: inputField Layout.fillHeight: true Layout.fillWidth: true @@ -53,122 +47,106 @@ Item horizontalAlignment: Text.AlignHCenter selectByMouse: true color: Style.colorLightInputText - font.pointSize: 12 + font.pointSize: Fonts.bigSize font.weight: Font.Bold - validator: IntValidator { bottom: root.minVal; top: root.maxVal } + validator: IntValidator { + bottom: root.minVal + top: root.maxVal + } text: root.value.toString() - background: Rectangle - { + background: Rectangle { anchors.fill: parent radius: 4 color: "transparent" } - + // Validate new value before applying - onTextEdited: - { - if(!internal.isValid()) - { - root.invalid = true; - } - else - { - root.value = text; - root.invalid = false; - root.newValueSelected(); + onTextEdited: { + if (!internal.isValid()) { + root.invalid = true + } else { + root.value = text + root.invalid = false + root.newValueSelected() } } } - - ColumnLayout - { + + ColumnLayout { id: arrowLayout Layout.fillHeight: true Layout.alignment: Qt.AlignVCenter | Qt.AlignRight Layout.rightMargin: 14 spacing: 4 - - - Image - { + + Image { id: upArrow source: Icons.dropdownLight sourceSize.width: 9 fillMode: Image.PreserveAspectFit rotation: 180 - - MouseArea - { + + MouseArea { anchors.fill: parent - + onClicked: internal.increaseValue() } } - - Image - { + + Image { id: downArrow source: Icons.dropdownLight sourceSize.width: 9 fillMode: Image.PreserveAspectFit - - MouseArea - { + + MouseArea { anchors.fill: parent - + onClicked: internal.decreaseValue() } } } } } - - QtObject - { + + QtObject { id: internal - - function handleKeyInput(event) - { - if(event.key === Qt.Key_Up) - { - if(value < maxVal) - value += 1; - } - else if(event.key === Qt.Key_Down) - { - if(value > minVal) - value -= 1; + + function handleKeyInput(event) { + if (event.key === Qt.Key_Up) { + if (value < maxVal) + value += 1 + } else if (event.key === Qt.Key_Down) { + if (value > minVal) + value -= 1 } } - - function isValid() - { - if(inputField.text < root.minVal || inputField.text > root.maxVal) - return false; - - return true; + + function isValid() { + if (inputField.text < root.minVal || inputField.text > root.maxVal) + return false + + return true } - - function increaseValue() - { - root.forceActiveFocus(); - if(root.value > root.maxVal) - return; - - root.value += 1; - root.newValueSelected(); - root.invalid = false; + + function increaseValue() { + root.forceActiveFocus() + if (root.value > root.maxVal) + return + + root.value += 1 + root.newValueSelected() + root.invalid = false } - - function decreaseValue() - { - root.forceActiveFocus(); - if(root.value < root.minVal) - return; - - root.value -= 1; - root.newValueSelected(); - root.invalid = false; + + function decreaseValue() { + root.forceActiveFocus() + if (root.value < root.minVal) + return + + root.value -= 1 + root.newValueSelected() + root.invalid = false } } -} \ No newline at end of file +} diff --git a/src/presentation/modules/CustomComponents/MToolTip.qml b/src/presentation/modules/CustomComponents/MToolTip.qml index d73475677..aeb8aca66 100644 --- a/src/presentation/modules/CustomComponents/MToolTip.qml +++ b/src/presentation/modules/CustomComponents/MToolTip.qml @@ -3,70 +3,63 @@ import QtQuick.Controls import QtQuick.Layouts import Librum.style import Librum.icons +import Librum.fonts -Popup -{ +Popup { id: root property var focusedItem property alias content: text.text property int triangleOffset: 4 - - implicitWidth: text.implicitWidth + 2*container.horizontalPadding + + implicitWidth: text.implicitWidth + 2 * container.horizontalPadding padding: 0 parent: Overlay.overlay - background: Rectangle { color: "transparent" } - - onOpenedChanged: - { - let mappedPoint = focusedItem.mapToItem(baseRoot.contentItem, 0, 0); - y = mappedPoint.y - implicitHeight - 6; - + background: Rectangle { + color: "transparent" + } + + onOpenedChanged: { + let mappedPoint = focusedItem.mapToItem(baseRoot.contentItem, 0, 0) + y = mappedPoint.y - implicitHeight - 6 + // Make sure to position the popup to the left or right of the focused item // depending on where it is on the screen and if there is enough space - if(mappedPoint.x + implicitWidth < baseRoot.width) - { - internal.leftAligned = false; - x = mappedPoint.x; - } - else - { - internal.leftAligned = true; - x = mappedPoint.x - implicitWidth + focusedItem.width; + if (mappedPoint.x + implicitWidth < baseRoot.width) { + internal.leftAligned = false + x = mappedPoint.x + } else { + internal.leftAligned = true + x = mappedPoint.x - implicitWidth + focusedItem.width } } - - ColumnLayout - { + + ColumnLayout { anchors.fill: parent spacing: 0 - - Pane - { + + Pane { id: container Layout.fillHeight: true Layout.fillWidth: true horizontalPadding: 10 verticalPadding: 10 - background: Rectangle - { + background: Rectangle { color: Style.colorPopupBackground border.width: 1 border.color: Style.colorContainerBorder radius: 4 antialiasing: true } - - Label - { + + Label { id: text width: parent.width color: Style.colorText - font.pointSize: 12 + font.pointSize: Fonts.bigSize } } - - Image - { + + Image { id: triangleDecorator Layout.topMargin: -1 Layout.leftMargin: internal.leftAligned ? 0 : root.triangleOffset @@ -76,10 +69,9 @@ Popup rotation: 180 } } - - QtObject - { + + QtObject { id: internal property bool leftAligned: false } -} \ No newline at end of file +} diff --git a/src/presentation/modules/CustomComponents/MWarningPopup.qml b/src/presentation/modules/CustomComponents/MWarningPopup.qml index 91e46b4c8..cb714511b 100644 --- a/src/presentation/modules/CustomComponents/MWarningPopup.qml +++ b/src/presentation/modules/CustomComponents/MWarningPopup.qml @@ -4,10 +4,9 @@ import QtQuick.Layouts import CustomComponents import Librum.style import Librum.icons +import Librum.fonts - -Popup -{ +Popup { id: root property string leftButtonText: "Accept" property string rightButtonText: "Decline" @@ -21,31 +20,32 @@ Popup signal leftButtonClicked signal rightButtonClicked signal decisionMade - + implicitWidth: 646 implicitHeight: layout.height padding: 0 closePolicy: Popup.NoAutoClose | Popup.CloseOnEscape | Popup.CloseOnReleaseOutside - background: Rectangle { color: "transparent"; radius: 4 } + background: Rectangle { + color: "transparent" + radius: 4 + } modal: true - Overlay.modal: Rectangle { color: Style.colorPopupDim; opacity: 1 } - - - MFlickWrapper - { + Overlay.modal: Rectangle { + color: Style.colorPopupDim + opacity: 1 + } + + MFlickWrapper { id: flickWrapper anchors.fill: parent contentHeight: layout.height - - ColumnLayout - { + + ColumnLayout { id: layout width: parent.width spacing: -92 - - - Image - { + + Image { id: warningIllustration z: 2 Layout.alignment: Qt.AlignHCenter @@ -54,37 +54,34 @@ Popup sourceSize.width: 250 fillMode: Image.PreserveAspectFit } - - Pane - { + + Pane { id: backgroundRect Layout.fillWidth: true topPadding: 86 horizontalPadding: 62 bottomPadding: 62 - background: Rectangle { color: Style.colorPopupBackground; radius: 6 } - - - ColumnLayout - { + background: Rectangle { + color: Style.colorPopupBackground + radius: 6 + } + + ColumnLayout { id: inRectLayout width: parent.width spacing: 22 - - - Label - { + + Label { id: title Layout.alignment: Qt.AlignHCenter Layout.topMargin: 18 text: root.title color: Style.colorTitle font.weight: Font.Medium - font.pointSize: 42 + font.pointSize: Fonts.baseHeaderSize } - - Label - { + + Label { id: message Layout.alignment: Qt.AlignHCenter Layout.bottomMargin: root.messageBottomSpacing @@ -94,31 +91,28 @@ Popup horizontalAlignment: Qt.AlignHCenter color: Style.colorLightText font.weight: Font.Medium - font.pointSize: 15 + font.pointSize: Fonts.modestTitleSize textFormat: root.richText ? Text.RichText : Text.AutoText - onLinkActivated: (link) => Qt.openUrlExternally(link) + onLinkActivated: link => Qt.openUrlExternally(link) // Switch to the proper cursor when hovering above the link - MouseArea - { + MouseArea { id: mouseArea - acceptedButtons: Qt.NoButton // Don't eat the mouse clicks + acceptedButtons: Qt.NoButton // Don't eat the mouse clicks anchors.fill: parent - cursorShape: message.hoveredLink != "" ? Qt.PointingHandCursor : Qt.ArrowCursor + cursorShape: message.hoveredLink + != "" ? Qt.PointingHandCursor : Qt.ArrowCursor } } - - RowLayout - { + + RowLayout { id: buttonRow Layout.preferredWidth: parent.width Layout.preferredHeight: leftButton.height Layout.topMargin: 24 spacing: 42 - - - MButton - { + + MButton { id: leftButton Layout.preferredWidth: root.singleButton ? parent.width : root.buttonsWidth Layout.preferredHeight: 40 @@ -130,16 +124,15 @@ Popup fontSize: 12.75 fontWeight: Font.Bold textColor: activeFocus ? Style.colorFocusedButtonText : Style.colorUnfocusedButtonText - + onClicked: internal.leftButtonClicked() - + KeyNavigation.tab: rightButton KeyNavigation.right: rightButton Keys.onReturnPressed: internal.leftButtonClicked() } - - MButton - { + + MButton { id: rightButton visible: !root.singleButton Layout.preferredWidth: root.buttonsWidth @@ -152,9 +145,9 @@ Popup fontSize: 12.75 fontWeight: Font.Bold textColor: focus ? Style.colorFocusedButtonText : Style.colorUnfocusedButtonText - + onClicked: internal.rightButtonClicked() - + KeyNavigation.tab: leftButton KeyNavigation.left: leftButton Keys.onReturnPressed: internal.rightButtonClicked() @@ -164,26 +157,22 @@ Popup } } } - - QtObject - { + + QtObject { id: internal - - function leftButtonClicked() - { - root.leftButtonClicked(); - decisionMade(); + + function leftButtonClicked() { + root.leftButtonClicked() + decisionMade() } - - function rightButtonClicked() - { - root.rightButtonClicked(); - decisionMade(); + + function rightButtonClicked() { + root.rightButtonClicked() + decisionMade() } } - - function giveFocus() - { - leftButton.forceActiveFocus(); + + function giveFocus() { + leftButton.forceActiveFocus() } -} \ No newline at end of file +} diff --git a/src/presentation/modules/CustomComponents/buttons/MRemoveOptionButton.qml b/src/presentation/modules/CustomComponents/buttons/MRemoveOptionButton.qml index 46154ba3b..eecbff131 100644 --- a/src/presentation/modules/CustomComponents/buttons/MRemoveOptionButton.qml +++ b/src/presentation/modules/CustomComponents/buttons/MRemoveOptionButton.qml @@ -3,63 +3,53 @@ import QtQuick.Layouts import QtQuick.Controls import Librum.style import Librum.icons +import Librum.fonts - -Item -{ +Item { id: root property string text - signal clicked() - + signal clicked + implicitWidth: container.width implicitHeight: 36 - - - Pane - { + + Pane { id: container height: parent.height padding: 12 - background: Rectangle - { + background: Rectangle { color: Style.colorLightHighlight border.width: 1 border.color: Style.colorLightPurple radius: 5 } - - - RowLayout - { + + RowLayout { anchors.centerIn: parent spacing: 6 - - Label - { + + Label { id: filterByLabel Layout.topMargin: -1 color: Style.colorBasePurple text: root.text - font.pointSize: 12 + font.pointSize: Fonts.bigSize font.weight: Font.Bold } - - Image - { + + Image { id: filterByArrowIcon Layout.topMargin: 1 sourceSize.height: 11 source: Icons.cancelPurple fillMode: Image.PreserveAspectFit } - } } - - MouseArea - { + + MouseArea { anchors.fill: parent - + onClicked: root.clicked() } } diff --git a/src/presentation/modules/CustomComponents/buttons/MSearchButton.qml b/src/presentation/modules/CustomComponents/buttons/MSearchButton.qml index b37c52b2b..5773c5c27 100644 --- a/src/presentation/modules/CustomComponents/buttons/MSearchButton.qml +++ b/src/presentation/modules/CustomComponents/buttons/MSearchButton.qml @@ -3,6 +3,7 @@ import QtQuick.Controls import QtQuick.Layouts import Librum.style import Librum.icons +import Librum.fonts Item { id: root @@ -49,7 +50,7 @@ Item { visible: false leftPadding: 12 color: Style.colorBaseInputText - font.pointSize: 12 + font.pointSize: Fonts.bigSize placeholderText: "Search for Book" placeholderTextColor: Style.colorPlaceholderText selectByMouse: true diff --git a/src/presentation/modules/CustomComponents/rightClickMenu/MRightClickMenuItem.qml b/src/presentation/modules/CustomComponents/rightClickMenu/MRightClickMenuItem.qml index abd8c8336..8d7042b06 100644 --- a/src/presentation/modules/CustomComponents/rightClickMenu/MRightClickMenuItem.qml +++ b/src/presentation/modules/CustomComponents/rightClickMenu/MRightClickMenuItem.qml @@ -2,55 +2,45 @@ import QtQuick import QtQuick.Controls import QtQuick.Layouts import Librum.style +import Librum.fonts - -Item -{ +Item { id: root property bool selected property string imagePath property int imageSize: 18 property string text - signal clicked - + signal clicked + implicitHeight: 32 implicitWidth: 100 - + onVisibleChanged: selected = false - - - Pane - { + + Pane { id: container width: parent.width - 2 height: parent.height anchors.centerIn: parent horizontalPadding: 12 verticalPadding: 4 - background: Rectangle - { + background: Rectangle { color: root.selected ? Style.colorLightHighlight : "transparent" radius: 3 } - - - RowLayout - { + + RowLayout { id: layout anchors.fill: parent spacing: 10 - - - Item - { + + Item { id: imageContainer Layout.preferredHeight: 18 Layout.preferredWidth: 18 Layout.alignment: Qt.AlignLeft - - - Image - { + + Image { id: actionImage anchors.centerIn: parent source: root.imagePath @@ -58,29 +48,27 @@ Item fillMode: Image.PreserveAspectFit } } - - Label - { + + Label { id: actionText Layout.fillWidth: true Layout.alignment: Qt.AlignLeft Layout.topMargin: -1 text: root.text font.weight: Font.Medium - font.pointSize: 11 + font.pointSize: Fonts.baseSize color: Style.colorLightText elide: Text.ElideRight } } } - - MouseArea - { + + MouseArea { anchors.fill: parent hoverEnabled: true - onEntered: root.selected = true; - onExited: root.selected = false; - + onEntered: root.selected = true + onExited: root.selected = false + onClicked: root.clicked() } -} \ No newline at end of file +} diff --git a/src/presentation/qmlSources.qrc b/src/presentation/qmlSources.qrc index 1fb2e8e66..f365c0b9a 100644 --- a/src/presentation/qmlSources.qrc +++ b/src/presentation/qmlSources.qrc @@ -17,6 +17,7 @@ sidebar/MSidebarItem.qml StyleSheet.qml IconSheet.qml + FontSheet.qml modules/CustomComponents/buttons/MButton.qml modules/CustomComponents/buttons/MRemoveOptionButton.qml modules/CustomComponents/buttons/MSearchButton.qml diff --git a/src/presentation/readingPage/MBookmarkItem.qml b/src/presentation/readingPage/MBookmarkItem.qml index 88d494602..c713d75f8 100644 --- a/src/presentation/readingPage/MBookmarkItem.qml +++ b/src/presentation/readingPage/MBookmarkItem.qml @@ -4,6 +4,7 @@ import QtQuick.Layouts import Librum.style import Librum.icons import Librum.controllers +import Librum.fonts Rectangle { id: root @@ -52,7 +53,7 @@ Rectangle { Layout.leftMargin: 4 text: model.name color: Style.colorText - font.pointSize: 11 + font.pointSize: Fonts.baseSize selectionColor: Style.colorTextSelection clip: true @@ -89,7 +90,7 @@ Rectangle { Layout.rightMargin: 6 text: model.pageNumber + 1 color: Style.colorText - font.pointSize: 11 + font.pointSize: Fonts.baseSize } } diff --git a/src/presentation/readingPage/MBookmarksSidebar.qml b/src/presentation/readingPage/MBookmarksSidebar.qml index bb468a034..3e81fa716 100644 --- a/src/presentation/readingPage/MBookmarksSidebar.qml +++ b/src/presentation/readingPage/MBookmarksSidebar.qml @@ -5,6 +5,7 @@ import CustomComponents import Librum.style import Librum.icons import Librum.controllers +import Librum.fonts Item { id: root @@ -26,7 +27,7 @@ Item { Layout.alignment: Qt.AlignHCenter Layout.topMargin: 26 text: "Bookmarks" - font.pointSize: 14 + font.pointSize: Fonts.smallTitleSize font.weight: Font.Medium color: Style.colorText } @@ -48,7 +49,7 @@ Item { rightPadding: 15 selectByMouse: true color: Style.colorText - font.pointSize: 11 + font.pointSize: Fonts.baseSize font.weight: Font.Normal placeholderText: "Search..." placeholderTextColor: Style.colorPlaceholderText diff --git a/src/presentation/readingPage/MChapterSidebar.qml b/src/presentation/readingPage/MChapterSidebar.qml index 6763765bb..67aa6b011 100644 --- a/src/presentation/readingPage/MChapterSidebar.qml +++ b/src/presentation/readingPage/MChapterSidebar.qml @@ -5,6 +5,7 @@ import Librum.elements import Librum.models import Librum.style import Librum.icons +import Librum.fonts import Librum.controllers import Qt.labs.qmlmodels import QtQuick.Shapes @@ -32,7 +33,7 @@ Item { Layout.alignment: Qt.AlignHCenter Layout.topMargin: 26 text: "Contents" - font.pointSize: 14 + font.pointSize: Fonts.smallTitleSize font.weight: Font.Medium color: Style.colorText } @@ -54,7 +55,7 @@ Item { rightPadding: 15 selectByMouse: true color: Style.colorText - font.pointSize: 11 + font.pointSize: Fonts.baseSize font.weight: Font.Normal placeholderText: "Search..." placeholderTextColor: Style.colorPlaceholderText diff --git a/src/presentation/readingPage/MDictionaryPopup.qml b/src/presentation/readingPage/MDictionaryPopup.qml index 25a321c5e..7ea8ebc40 100644 --- a/src/presentation/readingPage/MDictionaryPopup.qml +++ b/src/presentation/readingPage/MDictionaryPopup.qml @@ -6,6 +6,7 @@ import Librum.elements import Librum.style import Librum.icons import Librum.controllers +import Librum.fonts Popup { id: root @@ -99,7 +100,7 @@ Popup { leftPadding: 12 color: Style.colorBaseInputText text: root.word - font.pointSize: 11 + font.pointSize: Fonts.baseSize placeholderText: "Search" placeholderTextColor: Style.colorPlaceholderText selectByMouse: true @@ -123,7 +124,7 @@ Popup { wrapMode: Text.NoWrap Layout.topMargin: 20 color: Style.colorText - font.pointSize: 20 + font.pointSize: Fonts.veryBigTitleSize font.weight: Font.DemiBold clip: true @@ -133,7 +134,7 @@ Popup { id: language Layout.topMargin: -4 color: Style.colorText - font.pointSize: 11 + font.pointSize: Fonts.baseSize } Pane { @@ -198,7 +199,7 @@ Popup { anchors.centerIn: parent text: modelData + 1 color: Style.colorBannerText - font.pointSize: 10 + font.pointSize: Fonts.smallSize font.bold: true } } @@ -212,7 +213,7 @@ Popup { wrapMode: Text.WordWrap text: DictionaryController.definition.wordTypes[modelData].partOfSpeech color: Style.colorText - font.pointSize: 13 + font.pointSize: Fonts.hugeSize font.weight: Font.DemiBold textFormat: Text.StyledText } @@ -244,7 +245,7 @@ Popup { Layout.alignment: Qt.AlignTop wrapMode: Text.WordWrap color: Style.colorText - font.pointSize: 11 + font.pointSize: Fonts.baseSize textFormat: Text.StyledText linkColor: Style.colorLinkText } @@ -255,7 +256,7 @@ Popup { text: DictionaryController.definition.wordTypes[type.index].definitions[modelData].definition wrapMode: Text.WordWrap color: Style.colorText - font.pointSize: 11 + font.pointSize: Fonts.baseSize textFormat: Text.StyledText linkColor: Style.colorLinkText @@ -315,7 +316,7 @@ Popup { text: DictionaryController.definition.wordTypes[type.index].definitions[definitionItem.index].examples[modelData] wrapMode: Text.WordWrap color: Style.colorLightText - font.pointSize: 10 + font.pointSize: Fonts.smallSize font.weight: Font.Light textFormat: Text.StyledText linkColor: Style.colorLinkText @@ -351,7 +352,7 @@ Popup { Label { color: Style.colorText Layout.alignment: Qt.AlignHCenter - font.pointSize: 14 + font.pointSize: Fonts.smallTitleSize text: "No definitions found" } @@ -363,7 +364,7 @@ Popup { + '; text-decoration: underline;">Search online' textFormat: Text.StyledText onLinkActivated: link => Qt.openUrlExternally(link) - font.pointSize: 14 + font.pointSize: Fonts.smallTitleSize color: Style.colorText MouseArea { diff --git a/src/presentation/readingPage/MExplanationPopup.qml b/src/presentation/readingPage/MExplanationPopup.qml index ba146b888..48ccbf2c9 100644 --- a/src/presentation/readingPage/MExplanationPopup.qml +++ b/src/presentation/readingPage/MExplanationPopup.qml @@ -5,6 +5,7 @@ import CustomComponents import Librum.style import Librum.icons import Librum.controllers +import Librum.fonts Popup { id: root @@ -171,7 +172,7 @@ Popup { width: answerFlick.width focus: true text: root.answer - font.pointSize: 13 + font.pointSize: Fonts.hugeSize color: Style.colorText readOnly: true wrapMode: Text.WordWrap @@ -204,7 +205,7 @@ Popup { text: "" color: Style.colorTitle font.weight: Font.Medium - font.pointSize: 14 + font.pointSize: Fonts.smallTitleSize onLinkActivated: Qt.openUrlExternally( AppInfoController.website + "/whyAiLimits") @@ -277,7 +278,7 @@ Popup { id: actionText Layout.topMargin: -1 text: "Note: AI responses can be inaccurate" - font.pointSize: 10 + font.pointSize: Fonts.smallSize color: Style.colorBasePurple } } diff --git a/src/presentation/readingPage/MSelectionOptionsPopup.qml b/src/presentation/readingPage/MSelectionOptionsPopup.qml index f5c7d20f9..b217f268b 100644 --- a/src/presentation/readingPage/MSelectionOptionsPopup.qml +++ b/src/presentation/readingPage/MSelectionOptionsPopup.qml @@ -5,6 +5,7 @@ import CustomComponents import Librum.style import Librum.icons import Librum.controllers +import Librum.fonts Popup { id: root @@ -94,7 +95,7 @@ Popup { padding: 10 text: action.text color: action.textColor - font.pointSize: 12 + font.pointSize: Fonts.bigSize } MouseArea { diff --git a/src/presentation/readingPage/readingSearchbar/MReadingSearchbar.qml b/src/presentation/readingPage/readingSearchbar/MReadingSearchbar.qml index c149252ce..a35c23c64 100644 --- a/src/presentation/readingPage/readingSearchbar/MReadingSearchbar.qml +++ b/src/presentation/readingPage/readingSearchbar/MReadingSearchbar.qml @@ -5,6 +5,7 @@ import CustomComponents import Librum.style import Librum.icons import Librum.controllers +import Librum.fonts Item { id: root @@ -136,7 +137,7 @@ Item { leftPadding: 4 selectByMouse: true color: Style.colorBaseInputText - font.pointSize: 12 + font.pointSize: Fonts.bigSize placeholderText: "Find" placeholderTextColor: Style.colorPlaceholderText background: Rectangle { diff --git a/src/presentation/readingPage/readingToolbar/MReadingToolBar.qml b/src/presentation/readingPage/readingToolbar/MReadingToolBar.qml index ae7cf0ce1..6635c35ea 100644 --- a/src/presentation/readingPage/readingToolbar/MReadingToolBar.qml +++ b/src/presentation/readingPage/readingToolbar/MReadingToolBar.qml @@ -6,10 +6,9 @@ import CustomComponents import Librum.style import Librum.icons import Librum.controllers +import Librum.fonts - -Pane -{ +Pane { id: root property bool fullScreenMode: false property string bookTitle: "Unknown name" @@ -29,55 +28,49 @@ Pane signal currentPageButtonClicked signal fullScreenButtonClicked signal optionsPopupVisibileChanged - + implicitHeight: 48 padding: 8 - background: Rectangle { color: Style.colorReadingToolbarBackground; radius: 4 } - - onVisibleChanged: if(optionsPopup.opened) optionsPopup.close() - - - Shortcut - { + background: Rectangle { + color: Style.colorReadingToolbarBackground + radius: 4 + } + + onVisibleChanged: if (optionsPopup.opened) + optionsPopup.close() + + Shortcut { id: openChapterSidebar sequences: [SettingsController.shortcuts.OpenChapters] onActivated: root.chapterButtonClicked() } - Shortcut - { + Shortcut { id: openBookmarks sequences: [SettingsController.shortcuts.OpenBookmarks] onActivated: root.bookMarkButtonClicked() } - Shortcut - { + Shortcut { id: search sequences: [SettingsController.shortcuts.Search] onActivated: root.searchButtonClicked() } - Shortcut - { + Shortcut { id: startFullScreenMode sequences: [SettingsController.shortcuts.StartFullScreenMode] onActivated: root.fullScreenButtonClicked() } - Shortcut - { + Shortcut { id: goBackToHome sequences: [SettingsController.shortcuts.GoToHome] onActivated: root.backButtonClicked() } - - - RowLayout - { + + RowLayout { id: layout anchors.fill: parent spacing: 8 - - - MButton - { + + MButton { id: backButton Layout.preferredWidth: 40 Layout.preferredHeight: 32 @@ -86,12 +79,11 @@ Pane imagePath: Icons.readingViewBack imageSize: 11 opacityOnPressed: 0.7 - + onClicked: root.backButtonClicked() } - - MButton - { + + MButton { id: chapterButton Layout.preferredWidth: 40 Layout.preferredHeight: 32 @@ -100,12 +92,11 @@ Pane imagePath: active ? Icons.readingViewChaptersSelected : Icons.readingViewChapters imageSize: 18 opacityOnPressed: 0.7 - + onClicked: root.chapterButtonClicked() } - - MButton - { + + MButton { id: bookmarksButton Layout.preferredWidth: 40 Layout.preferredHeight: 32 @@ -114,41 +105,36 @@ Pane imagePath: active ? Icons.readingViewBookmarkSelected : Icons.readingViewBookmark imageSize: 14 opacityOnPressed: 0.7 - + onClicked: root.bookMarkButtonClicked() } - - Item - { + + Item { id: currentPageSelection - Layout.preferredWidth: inputBox.width + pageInputLayout.spacing + totalPageText.implicitWidth + Layout.preferredWidth: inputBox.width + pageInputLayout.spacing + + totalPageText.implicitWidth Layout.preferredHeight: 34 - - RowLayout - { + + RowLayout { id: pageInputLayout anchors.fill: parent spacing: 8 - - Pane - { + + Pane { id: inputBox Layout.preferredWidth: 66 Layout.fillHeight: true padding: 0 horizontalPadding: 2 - background: Rectangle - { + background: Rectangle { id: backgroundRect border.width: 2 border.color: Style.colorContainerBorder radius: 5 color: Style.colorControlBackground } - - - TextField - { + + TextField { id: inputField anchors.fill: parent anchors.rightMargin: 2 @@ -158,69 +144,71 @@ Pane selectByMouse: true text: root.currentPage + 1 color: Style.colorBaseInputText - font.pointSize: 12 + font.pointSize: Fonts.bigSize font.weight: Font.Normal - validator: IntValidator { bottom: 0; top: 99999 } // No upper border - background: Rectangle - { + validator: IntValidator { + bottom: 0 + top: 99999 + } // No upper border + background: Rectangle { anchors.fill: parent radius: 5 color: "transparent" } - + // Select all the text when clicking it - onActiveFocusChanged: if(activeFocus) inputField.selectAll(); - + onActiveFocusChanged: if (activeFocus) + inputField.selectAll() + // Keep in mind that the pages actually go from 0 to pageCount - 1 (zero indexed), // but we present them as 1 to pageCount to the user. - onEditingFinished: - { - let newPage = Number(inputField.text); - if(root.currentPage == newPage - 1) - return; - - if(newPage < 1 || newPage > root.pageCount) - { - inputField.text = Qt.binding(() => root.currentPage + 1); - return; + onEditingFinished: { + let newPage = Number(inputField.text) + if (root.currentPage == newPage - 1) + return + + if (newPage < 1 || newPage > root.pageCount) { + inputField.text = Qt.binding( + () => root.currentPage + 1) + return } - - documentView.setPage(newPage - 1); - documentView.forceActiveFocus(); // Discard focus when finished + + documentView.setPage(newPage - 1) + documentView.forceActiveFocus( + ) // Discard focus when finished } } } - - Label - { + + Label { id: totalPageText Layout.fillWidth: true Layout.alignment: Qt.AlignVCenter text: "of " + root.pageCount.toString() - font.pointSize: 12 + font.pointSize: Fonts.bigSize font.weight: Font.Normal color: Style.colorText } } } - - Label - { + + Label { id: bookTitle Layout.fillWidth: true - Component.onCompleted: Layout.rightMargin = (Math.ceil(x + width/2) - Math.ceil(root.width / 2)) * 4 - Layout.alignment: Qt.AlignVCenter + Component.onCompleted: Layout.rightMargin = (Math.ceil( + x + width / 2) - Math.ceil( + root.width / 2)) * 4 + Layout.alignment: Qt.AlignVCenter horizontalAlignment: Text.AlignHCenter - text: JSON.parse(SettingsController.appearanceSettings.DisplayBookTitleInTitlebar) ? root.bookTitle : "" + text: JSON.parse( + SettingsController.appearanceSettings.DisplayBookTitleInTitlebar) ? root.bookTitle : "" color: Style.colorTitle font.weight: Font.DemiBold - font.pointSize: 13 + font.pointSize: Fonts.hugeSize elide: Text.ElideRight } - - - MComboBox - { + + MComboBox { id: zoomComboBox Layout.preferredHeight: 32 Layout.preferredWidth: 92 @@ -231,47 +219,74 @@ Pane dropdownIcon: Icons.dropdownDark dropdownIconSize: 9 checkBoxStyle: false - model: ListModel - { - ListElement { text: "15%" } - ListElement { text: "25%" } - ListElement { text: "33%" } - ListElement { text: "50%" } - ListElement { text: "66%" } - ListElement { text: "75%" } - ListElement { text: "100%" } - ListElement { text: "125%" } - ListElement { text: "150%" } - ListElement { text: "175%" } - ListElement { text: "250%" } - ListElement { text: "300%" } - ListElement { text: "400%" } - ListElement { text: "500%" } + model: ListModel { + ListElement { + text: "15%" + } + ListElement { + text: "25%" + } + ListElement { + text: "33%" + } + ListElement { + text: "50%" + } + ListElement { + text: "66%" + } + ListElement { + text: "75%" + } + ListElement { + text: "100%" + } + ListElement { + text: "125%" + } + ListElement { + text: "150%" + } + ListElement { + text: "175%" + } + ListElement { + text: "250%" + } + ListElement { + text: "300%" + } + ListElement { + text: "400%" + } + ListElement { + text: "500%" + } } - + // Need to run a timer to create the binding, since the combobox does not set the text correctly // when trying to just assign it during onCompleted Component.onCompleted: zoomAssignment.start() - Timer - { + Timer { id: zoomAssignment interval: 5 - onTriggered: zoomComboBox.text = Qt.binding(function () { return Math.round(BookController.zoom * 100) + "%" }) + onTriggered: zoomComboBox.text = Qt.binding(function () { + return Math.round(BookController.zoom * 100) + "%" + }) } - + // Remove % sign from text - onItemChanged: - { - if(text === "") - return; - - BookController.zoom = zoomComboBox.text.substring(0, zoomComboBox.text.length - 1) / 100; - zoomAssignment.start(); // Force rebinding + onItemChanged: { + if (text === "") + return + + BookController.zoom = zoomComboBox.text.substring( + 0, zoomComboBox.text.length - 1) / 100 + zoomAssignment.start() // Force rebinding } } - - MButton - { + + MButton { id: fullScreenButton Layout.preferredWidth: 40 Layout.preferredHeight: 32 @@ -280,12 +295,11 @@ Pane imagePath: active ? Icons.readingViewMaximizeSelected : Icons.readingViewMaximize imageSize: 20 opacityOnPressed: 0.7 - + onClicked: root.fullScreenButtonClicked() } - - MButton - { + + MButton { id: searchButton Layout.preferredWidth: 40 Layout.preferredHeight: 32 @@ -294,12 +308,11 @@ Pane imagePath: active ? Icons.readingViewSearchSelected : Icons.readingViewSearch imageSize: 18 opacityOnPressed: 0.7 - + onClicked: root.searchButtonClicked() } - - MButton - { + + MButton { id: optionsButton Layout.preferredWidth: 40 Layout.preferredHeight: 32 @@ -308,17 +321,17 @@ Pane imagePath: active ? Icons.readingViewOptionsPurple : Icons.readingViewOptions imageSize: 20 opacityOnPressed: 0.7 - - onClicked: optionsPopup.opened ? optionsPopup.close() : optionsPopup.open(); + + onClicked: optionsPopup.opened ? optionsPopup.close( + ) : optionsPopup.open() } } - - MReadingOptionsPopup - { + + MReadingOptionsPopup { id: optionsPopup x: optionsButton.x - width + optionsButton.width y: optionsButton.height + 12 - + onOpenedChanged: root.optionsPopupVisibileChanged() } -} \ No newline at end of file +} diff --git a/src/presentation/registerPage/MAcceptPolicy.qml b/src/presentation/registerPage/MAcceptPolicy.qml index 9846814a0..cef381c96 100644 --- a/src/presentation/registerPage/MAcceptPolicy.qml +++ b/src/presentation/registerPage/MAcceptPolicy.qml @@ -59,7 +59,7 @@ Item ' and the Privacy Policy' onLinkActivated: (link) => Qt.openUrlExternally(link) wrapMode: Text.WordWrap - font.pointSize: 11 + font.pointSize: Fonts.baseSize color: Style.colorText MouseArea diff --git a/src/presentation/registerPage/MRegisterPage.qml b/src/presentation/registerPage/MRegisterPage.qml index 768f4e654..67a983eff 100644 --- a/src/presentation/registerPage/MRegisterPage.qml +++ b/src/presentation/registerPage/MRegisterPage.qml @@ -88,7 +88,7 @@ MFlickWrapper color: Style.colorText text: "Welcome!" font.bold: true - font.pointSize: 26 + font.pointSize: Fonts.enormousTitleSize } Label @@ -100,7 +100,7 @@ MFlickWrapper horizontalAlignment: Text.AlignHCenter text: "Your credentials are only used to authenticate yourself. " + "Everything will be stored in a secure database." - font.pointSize: 13 + font.pointSize: Fonts.hugeSize color: Style.colorSubtitle wrapMode: Text.WordWrap } @@ -261,7 +261,7 @@ MFlickWrapper Layout.alignment: Qt.AlignHCenter Layout.topMargin: 14 text: "Already have an account? Login" - font.pointSize: 10.5 + font.pointSize: Fonts.mediumSize opacity: loginRedirecitonLinkArea.pressed ? 0.8 : 1 color: Style.colorBasePurple diff --git a/src/presentation/settings/MAboutPage.qml b/src/presentation/settings/MAboutPage.qml index 63d046ad0..717183bfc 100644 --- a/src/presentation/settings/MAboutPage.qml +++ b/src/presentation/settings/MAboutPage.qml @@ -6,33 +6,28 @@ import Librum.elements import Librum.controllers import Librum.style import Librum.icons +import Librum.fonts - -MFlickWrapper -{ +MFlickWrapper { id: root contentHeight: page.implicitHeight - - - Page - { + + Page { id: page width: parent.width horizontalPadding: 48 bottomPadding: 22 - background: Rectangle { anchors.fill: parent; color: Style.colorPageBackground } - - - - ColumnLayout - { + background: Rectangle { + anchors.fill: parent + color: Style.colorPageBackground + } + + ColumnLayout { id: layout width: parent.width spacing: 26 - - - MTitle - { + + MTitle { id: pageTitle Layout.topMargin: 64 titleText: "About" @@ -40,76 +35,65 @@ MFlickWrapper titleSize: 25 descriptionSize: 13.25 } - - Pane - { + + Pane { id: details Layout.fillWidth: true Layout.topMargin: 6 topPadding: 24 horizontalPadding: internal.pagePadding bottomPadding: 21 - background: Rectangle - { + background: Rectangle { color: Style.colorContainerBackground border.color: Style.colorContainerBorder radius: 4 antialiasing: true } - - - ColumnLayout - { + + ColumnLayout { id: inDetailsLayout anchors.fill: parent spacing: 0 - - - Label - { + + Label { id: detailsTitle text: "Details" color: Style.colorText - font.pointSize: 16.5 + font.pointSize: 17 font.weight: Font.DemiBold } - - Label - { + + Label { Layout.topMargin: 15 text: "CURRENT VERSION" color: Style.colorLightText - font.pointSize: 10.25 + font.pointSize: Fonts.smallSize font.weight: Font.Bold } - - Label - { + + Label { Layout.topMargin: 1 text: AppInfoController.currentVersion color: Style.colorText - font.pointSize: 13.5 + font.pointSize: 14 } - - Label - { + + Label { Layout.topMargin: 12 text: "QT VERSION" color: Style.colorLightText - font.pointSize: 10.25 + font.pointSize: Fonts.smallSize font.weight: Font.Bold } - - Label - { + + Label { Layout.topMargin: 1 text: AppInfoController.currentQtVersion color: Style.colorText - font.pointSize: 13.5 + font.pointSize: 14 } - - MButton - { + + MButton { Layout.topMargin: 21 Layout.preferredWidth: 120 Layout.preferredHeight: 32 @@ -122,202 +106,178 @@ MFlickWrapper textColor: Style.colorGreenText imageSpacing: 6 opacityOnPressed: 0.8 - - onClicked: loadSettingsPage(updatesPage, settingsSidebar.updatesItem) + + onClicked: loadSettingsPage(updatesPage, + settingsSidebar.updatesItem) } } } - - Pane - { + + Pane { id: creator Layout.fillWidth: true topPadding: 24 horizontalPadding: internal.pagePadding bottomPadding: 30 - background: Rectangle - { + background: Rectangle { color: Style.colorContainerBackground border.color: Style.colorContainerBorder radius: 4 antialiasing: true } - - - ColumnLayout - { + + ColumnLayout { id: inCreatorLayout anchors.fill: parent spacing: 0 - - - Label - { + + Label { id: creatorTitle text: "Creator" color: Style.colorText - font.pointSize: 16.5 + font.pointSize: 17 font.weight: Font.DemiBold } - - Label - { + + Label { Layout.topMargin: 18 text: "COMPANY NAME" color: Style.colorLightText - font.pointSize: 10.25 + font.pointSize: Fonts.smallSize font.weight: Font.Bold } - - Label - { + + Label { Layout.topMargin: 1 text: AppInfoController.companyName color: Style.colorBasePurple - font.pointSize: 13.5 + font.pointSize: 14 } - - Label - { + + Label { Layout.topMargin: 12 text: "WEBSITE" color: Style.colorLightText - font.pointSize: 10.25 + font.pointSize: Fonts.smallSize font.weight: Font.Bold } - - Label - { + + Label { text: AppInfoController.website color: Style.colorBasePurple - font.pointSize: 13.5 + font.pointSize: 14 opacity: websiteLinkArea.pressed ? 0.8 : 1 - - MouseArea - { + + MouseArea { id: websiteLinkArea anchors.fill: parent cursorShape: Qt.PointingHandCursor - - onClicked: Qt.openUrlExternally(AppInfoController.website) + + onClicked: Qt.openUrlExternally( + AppInfoController.website) } } - - Label - { + + Label { Layout.topMargin: 12 text: "CONTACT" color: Style.colorLightText - font.pointSize: 10.25 + font.pointSize: Fonts.smallSize font.weight: Font.Bold } - - Label - { + + Label { Layout.topMargin: 1 text: AppInfoController.companyEmail color: Style.colorBasePurple opacity: emailLinkArea.pressed ? 0.8 : 1 - font.pointSize: 13.5 - - MouseArea - { + font.pointSize: 14 + + MouseArea { id: emailLinkArea anchors.fill: parent cursorShape: Qt.PointingHandCursor - - onClicked: Qt.openUrlExternally("mailto:" + AppInfoController.companyEmail) + + onClicked: Qt.openUrlExternally( + "mailto:" + AppInfoController.companyEmail) } } - - Label - { + + Label { Layout.topMargin: 12 text: "GITHUB" color: Style.colorLightText - font.pointSize: 10.25 + font.pointSize: Fonts.smallSize font.weight: Font.Bold } - - Label - { + + Label { Layout.topMargin: 1 text: AppInfoController.githubLink color: Style.colorBasePurple opacity: githubLinkArea.pressed ? 0.8 : 1 - font.pointSize: 13.5 - - MouseArea - { + font.pointSize: 14 + + MouseArea { id: githubLinkArea anchors.fill: parent cursorShape: Qt.PointingHandCursor - - onClicked: Qt.openUrlExternally(AppInfoController.githubLink) + + onClicked: Qt.openUrlExternally( + AppInfoController.githubLink) } } } } - - Pane - { + + Pane { id: thisApp Layout.fillWidth: true Layout.minimumHeight: inThisAppLayout.height + 15 topPadding: 24 horizontalPadding: internal.pagePadding bottomPadding: 56 - background: Rectangle - { + background: Rectangle { color: Style.colorContainerBackground border.color: Style.colorContainerBorder radius: 4 antialiasing: true } - - - ColumnLayout - { + + ColumnLayout { id: inThisAppLayout anchors.fill: parent spacing: 0 - - - Label - { + + Label { id: thisAppTitle text: "This App" color: Style.colorText - font.pointSize: 16.5 + font.pointSize: 17 font.weight: Font.DemiBold } - - RowLayout - { + + RowLayout { id: heartRow Layout.fillWidth: true Layout.topMargin: 40 spacing: 0 - - - Image - { + + Image { id: heartImage source: Icons.heart fillMode: Image.PreserveAspectFit sourceSize.width: 80 } - - Label - { + + Label { id: thisAppText Layout.fillWidth: true Layout.leftMargin: 22 - text: "Librum is here for everyone who just wants to enjoy a good book.\n" + - "We hope you have a great time using it! Feel free to leave us a rating and some feedback." + text: "Librum is here for everyone who just wants to enjoy a good book.\n" + "We hope you have a great time using it! Feel free to leave us a rating and some feedback." wrapMode: Text.WordWrap color: Style.colorText - font.pointSize: 14.6 + font.pointSize: Fonts.modestTitleSize lineHeight: 1.10 } } @@ -325,10 +285,9 @@ MFlickWrapper } } } - - QtObject - { + + QtObject { id: internal property int pagePadding: 40 } -} \ No newline at end of file +} diff --git a/src/presentation/settings/MAppearancePage.qml b/src/presentation/settings/MAppearancePage.qml index 04c3b8356..1e74ebaa2 100644 --- a/src/presentation/settings/MAppearancePage.qml +++ b/src/presentation/settings/MAppearancePage.qml @@ -5,33 +5,29 @@ import QtQuick.Dialogs import CustomComponents import Librum.style import Librum.icons +import Librum.fonts import Librum.controllers - -Page -{ +Page { id: root horizontalPadding: 48 bottomPadding: 22 - background: Rectangle { anchors.fill: parent; color: Style.colorPageBackground } - - - ColumnLayout - { + background: Rectangle { + anchors.fill: parent + color: Style.colorPageBackground + } + + ColumnLayout { id: layout width: parent.width spacing: 0 - - - RowLayout - { + + RowLayout { id: titleRow Layout.fillWidth: true spacing: 0 - - - MTitle - { + + MTitle { id: pageTitle Layout.topMargin: 64 titleText: "Appearance" @@ -39,11 +35,12 @@ Page titleSize: 25 descriptionSize: 13.25 } - - Item { Layout.fillWidth: true } - - MButton - { + + Item { + Layout.fillWidth: true + } + + MButton { id: resetButton Layout.preferredWidth: 160 Layout.preferredHeight: 38 @@ -54,14 +51,12 @@ Page fontSize: 12 fontWeight: Font.Bold textColor: Style.colorFocusedButtonText - + onClicked: resetSettingsPopup.open() } } - - - MFlickWrapper - { + + MFlickWrapper { id: flickWrapper Layout.fillWidth: true // Calculate the scrollable height (Scrollable only if the page is bigger than the screen) @@ -72,263 +67,252 @@ Page flickDeceleration: 20000 maximumFlickVelocity: 2300 clip: true - - ScrollBar.vertical: ScrollBar { width: 10; policy: "AlwaysOn" } - - - ColumnLayout - { + + ScrollBar.vertical: ScrollBar { + width: 10 + policy: "AlwaysOn" + } + + ColumnLayout { id: contentLayout width: parent.width anchors.left: parent.left anchors.right: parent.right anchors.rightMargin: internal.scrollbarOffset spacing: 0 - - - Pane - { + + Pane { id: displayBlock Layout.fillWidth: true verticalPadding: 24 horizontalPadding: internal.pagePadding - background: Rectangle - { + background: Rectangle { color: Style.colorContainerBackground border.color: Style.colorContainerBorder radius: 4 antialiasing: true } - - - ColumnLayout - { + + ColumnLayout { id: displayLayout anchors.fill: parent spacing: 0 - - - Label - { + + Label { id: displayTitle Layout.fillWidth: true text: "Display" - font.pointSize: 17 + font.pointSize: Fonts.mediumTitleSize font.weight: Font.DemiBold color: Style.colorText } - - Label - { + + Label { id: themeTitle Layout.fillWidth: true Layout.topMargin: 24 text: "Theme" - font.pointSize: 13 + font.pointSize: Fonts.hugeSize font.weight: Font.DemiBold color: Style.colorText } - - MDualToggle - { + + MDualToggle { id: themeSwitch property string savedValue: SettingsController.appearanceSettings.Theme - + Layout.topMargin: 4 leftText: "Dark" rightText: "Light" leftSelected: savedValue === leftText rightSelected: savedValue === rightText - + // Need rebinding on reset - onSavedValueChanged: savedValue === leftText ? selectLeft() : selectRight() - onToggled: (newSelected) => internal.saveSetting(SettingKeys.Theme, newSelected) + onSavedValueChanged: savedValue === leftText ? selectLeft( + ) : selectRight() + onToggled: newSelected => internal.saveSetting( + SettingKeys.Theme, newSelected) } - - Label - { + + Label { id: pageColorModeTitle Layout.fillWidth: true Layout.topMargin: 18 text: "Page Color Mode" - font.pointSize: 13 + font.pointSize: Fonts.hugeSize font.weight: Font.DemiBold color: Style.colorText } - - MDualToggle - { + + MDualToggle { id: pageColorModeSwitch property string savedValue: SettingsController.appearanceSettings.PageColorMode - + Layout.topMargin: 4 leftText: "Normal" rightText: "Inverted" leftSelected: savedValue === leftText rightSelected: savedValue === rightText - + // Need rebinding on reset - onSavedValueChanged: savedValue === leftText ? selectLeft() : selectRight() - onToggled: (newSelected) => internal.saveSetting(SettingKeys.PageColorMode, newSelected) + onSavedValueChanged: savedValue === leftText ? selectLeft( + ) : selectRight() + onToggled: newSelected => internal.saveSetting( + SettingKeys.PageColorMode, + newSelected) } - } + } } - - Pane - { + + Pane { id: readingBlock Layout.fillWidth: true Layout.topMargin: 24 verticalPadding: 24 horizontalPadding: internal.pagePadding - background: Rectangle - { + background: Rectangle { color: Style.colorContainerBackground border.color: Style.colorContainerBorder radius: 4 antialiasing: true } - - - ColumnLayout - { + + ColumnLayout { id: readingLayout anchors.fill: parent spacing: 0 - - - Label - { + + Label { id: readingTitle Layout.fillWidth: true text: "Reading" - font.pointSize: 17 + font.pointSize: Fonts.mediumTitleSize font.weight: Font.DemiBold color: Style.colorText } - - Label - { + + Label { id: pageSpacingTitle Layout.fillWidth: true Layout.topMargin: 24 text: "Page spacing" - font.pointSize: 13 + font.pointSize: Fonts.hugeSize font.weight: Font.DemiBold color: Style.colorText } - - MSpinbox - { + + MSpinbox { id: pageSpacingSpinBox property string savedValue: SettingsController.appearanceSettings.PageSpacing - + Layout.preferredWidth: 76 Layout.topMargin: 4 value: savedValue minVal: 0 maxVal: 999 - + // Need rebinding on reset onSavedValueChanged: value = savedValue - onNewValueSelected: internal.saveSetting(SettingKeys.PageSpacing, value) + onNewValueSelected: internal.saveSetting( + SettingKeys.PageSpacing, + value) } - - Label - { + + Label { id: docTitleDisplayTitle Layout.fillWidth: true Layout.topMargin: 18 text: "Display book title in titlebar" - font.pointSize: 13 + font.pointSize: Fonts.hugeSize font.weight: Font.DemiBold color: Style.colorText } - - MOnOffToggle - { + + MOnOffToggle { id: displayBookTitleInTitlebarToggle - property bool savedValue: JSON.parse(SettingsController.appearanceSettings.DisplayBookTitleInTitlebar) - + property bool savedValue: JSON.parse( + SettingsController.appearanceSettings.DisplayBookTitleInTitlebar) + Layout.topMargin: 4 onByDefault: savedValue - + // Need rebinding on reset onSavedValueChanged: savedValue ? setOn() : setOff() - onToggled: (value) => internal.saveSetting(SettingKeys.DisplayBookTitleInTitlebar, - value === onText ? true : false ) + onToggled: value => internal.saveSetting( + SettingKeys.DisplayBookTitleInTitlebar, + value === onText ? true : false) } - - Label - { + + Label { id: layoutDirectionTitle Layout.fillWidth: true Layout.topMargin: 18 text: "Layout direction" - font.pointSize: 13 + font.pointSize: Fonts.hugeSize font.weight: Font.DemiBold color: Style.colorText } - - MRadioButtonSelector - { + + MRadioButtonSelector { id: layoutDirectionSelector property string savedValue: SettingsController.appearanceSettings.LayoutDirection - + Layout.fillWidth: true Layout.topMargin: 6 options: ["Vertical", "Horizontal"] - currentSelected: changeSelected(options.indexOf(savedValue)) - + currentSelected: changeSelected(options.indexOf( + savedValue)) + // Need rebinding on reset - onSavedValueChanged: changeSelected(options.indexOf(savedValue)) - onNewCurrentSelected: internal.saveSetting(SettingKeys.LayoutDirection, - currentSelected) + onSavedValueChanged: changeSelected(options.indexOf( + savedValue)) + onNewCurrentSelected: internal.saveSetting( + SettingKeys.LayoutDirection, + currentSelected) } - - Label - { + + Label { id: displayModeTitle Layout.fillWidth: true Layout.topMargin: 18 text: "Display mode" - font.pointSize: 13 + font.pointSize: Fonts.hugeSize font.weight: Font.DemiBold color: Style.colorText } - - MRadioButtonSelector - { + + MRadioButtonSelector { id: displayModeSelector property string savedValue: SettingsController.appearanceSettings.DisplayMode - + Layout.fillWidth: true Layout.topMargin: 6 options: ["Single Page", "Double Page"] - currentSelected: changeSelected(options.indexOf(savedValue)) - + currentSelected: changeSelected(options.indexOf( + savedValue)) + // Need rebinding on reset - onSavedValueChanged: changeSelected(options.indexOf(savedValue)) - onNewCurrentSelected: internal.saveSetting(SettingKeys.DisplayMode, - currentSelected) + onSavedValueChanged: changeSelected(options.indexOf( + savedValue)) + onNewCurrentSelected: internal.saveSetting( + SettingKeys.DisplayMode, + currentSelected) } - - Label - { + + Label { id: pageTransitionTitle Layout.fillWidth: true Layout.topMargin: 18 text: "Page transition" - font.pointSize: 13 + font.pointSize: Fonts.hugeSize font.weight: Font.DemiBold color: Style.colorText } - - MComboBox - { + + MComboBox { id: pageTransitionComboBox property string savedValue: SettingsController.appearanceSettings.PageTransition - + Layout.topMargin: 4 Layout.preferredHeight: 36 Layout.fillWidth: true @@ -341,120 +325,116 @@ Page fontSize: 12 checkBoxStyle: false maxHeight: 200 - model: ListModel - { - ListElement { text: "Instant" } - ListElement { text: "Fading" } - ListElement { text: "Swipe" } - ListElement { text: "Swap" } + model: ListModel { + ListElement { + text: "Instant" + } + ListElement { + text: "Fading" + } + ListElement { + text: "Swipe" + } + ListElement { + text: "Swap" + } } - - onItemChanged: internal.saveSetting(SettingKeys.PageTransition, text) + + onItemChanged: internal.saveSetting( + SettingKeys.PageTransition, text) // Need rebinding on reset - onSavedValueChanged: - { - let defaultIndex = calculateDefaultIndex(); - if(listView.currentIndex === defaultIndex) - return; - - deselectCurrenItem(); - selectItem(defaultIndex, true); + onSavedValueChanged: { + let defaultIndex = calculateDefaultIndex() + if (listView.currentIndex === defaultIndex) + return + + deselectCurrenItem() + selectItem(defaultIndex, true) } - - - function calculateDefaultIndex() - { - for(let i = 0; i < model.count; ++i) - { - if(model.get(i).text === savedValue) - return i; + + function calculateDefaultIndex() { + for (var i = 0; i < model.count; ++i) { + if (model.get(i).text === savedValue) + return i } - return -1; + return -1 } } - - Label - { + + Label { id: defaultZoomTitle Layout.fillWidth: true Layout.topMargin: 18 text: "Default Zoom" - font.pointSize: 13 + font.pointSize: Fonts.hugeSize font.weight: Font.DemiBold color: Style.colorText } - - MSpinbox - { + + MSpinbox { id: defaultZoomSpinBox property int savedValue: SettingsController.appearanceSettings.DefaultZoom - + Layout.preferredWidth: 76 Layout.topMargin: 4 value: savedValue maxVal: 300 minVal: 15 - + // Need rebinding on reset onSavedValueChanged: value = savedValue - onNewValueSelected: internal.saveSetting(SettingKeys.DefaultZoom, value) + onNewValueSelected: internal.saveSetting( + SettingKeys.DefaultZoom, + value) } } } - - Pane - { + + Pane { id: highlightsBlock Layout.fillWidth: true Layout.topMargin: 24 verticalPadding: 24 horizontalPadding: internal.pagePadding - background: Rectangle - { + background: Rectangle { color: Style.colorContainerBackground border.color: Style.colorContainerBorder radius: 4 antialiasing: true } - - - ColumnLayout - { + + ColumnLayout { id: highlightsLayout anchors.fill: parent spacing: 0 - - - Label - { + + Label { id: highlightsTitle Layout.fillWidth: true text: "Highlights" - font.pointSize: 17 + font.pointSize: Fonts.mediumTitleSize font.weight: Font.DemiBold color: Style.colorText } - - Label - { + + Label { Layout.fillWidth: true Layout.topMargin: 24 text: "Colors" - font.pointSize: 13 + font.pointSize: Fonts.hugeSize font.weight: Font.DemiBold color: Style.colorText } - - Pane - { + + Pane { id: highlightColorBox property var currentColorButton - - Layout.preferredWidth: highlightColorBoxLayout.implicitWidth + leftPadding + rightPadding + + Layout.preferredWidth: highlightColorBoxLayout.implicitWidth + + leftPadding + rightPadding Layout.preferredHeight: 40 Layout.topMargin: 8 - background: Rectangle - { + background: Rectangle { anchors.fill: parent border.width: 1 border.color: Style.colorContainerBorder @@ -463,268 +443,264 @@ Page leftPadding: 16 rightPadding: 16 verticalPadding: 0 - - RowLayout - { + + RowLayout { id: highlightColorBoxLayout height: parent.height spacing: 16 - - component HighlightColorButton: Rectangle - { + + component HighlightColorButton: Rectangle { property string settingName property string savedValue: SettingsController.appearanceSettings[settingName] - + implicitHeight: 18 implicitWidth: 18 Layout.alignment: Qt.AlignVCenter radius: 16 color: savedValue - - MouseArea - { + + MouseArea { anchors.fill: parent - + onClicked: { highlightColorBox.currentColorButton = parent colorDialog.selectedColor = savedValue colorDialog.open() } } - - function changeColor(color) - { - internal.saveSetting(SettingKeys[settingName], color) + + function changeColor(color) { + internal.saveSetting( + SettingKeys[settingName], + color) } - - function rebind() - { - savedValue = Qt.binding(function() { return SettingsController.appearanceSettings[settingName]; }) - color = Qt.binding(function() { return savedValue }); + + function rebind() { + savedValue = Qt.binding(function () { + return SettingsController.appearanceSettings[settingName] + }) + color = Qt.binding(function () { + return savedValue + }) } } - - component Separator: Rectangle - { + + component Separator: Rectangle { Layout.fillHeight: true Layout.preferredWidth: 1 color: Style.colorSeparator } - + HighlightColorButton { settingName: "HighlightColorA" } - + Separator {} - + HighlightColorButton { settingName: "HighlightColorB" } - + Separator {} - + HighlightColorButton { settingName: "HighlightColorC" } - + Separator {} - + HighlightColorButton { settingName: "HighlightColorD" } - + Separator {} - + HighlightColorButton { settingName: "HighlightColorE" } } - - ColorDialog - { + + ColorDialog { id: colorDialog - - onSelectedColorChanged: highlightColorBox.currentColorButton.color = selectedColor - + + onSelectedColorChanged: highlightColorBox.currentColorButton.color + = selectedColor + onAccepted: { - highlightColorBox.currentColorButton.changeColor(colorDialog.selectedColor) - highlightColorBox.currentColorButton.rebind() + highlightColorBox.currentColorButton.changeColor( + colorDialog.selectedColor) + highlightColorBox.currentColorButton.rebind( + ) } onRejected: highlightColorBox.currentColorButton.rebind() } } - - Label - { + + Label { Layout.fillWidth: true Layout.topMargin: 24 text: "Opacity" - font.pointSize: 13 + font.pointSize: Fonts.hugeSize font.weight: Font.DemiBold color: Style.colorText } - - RowLayout - { + + RowLayout { spacing: 16 - - MSlider - { + + MSlider { id: highlightOpacitySlider Layout.alignment: Qt.AlignVCenter value: SettingsController.appearanceSettings.HighlightOpacity - - onControlledValueChanged: (value) => internal.saveSetting(SettingKeys.HighlightOpacity, value) + + onControlledValueChanged: value => internal.saveSetting( + SettingKeys.HighlightOpacity, + value) } - - MLabeledInputBox - { + + MLabeledInputBox { Layout.preferredWidth: 72 Layout.preferredHeight: implicitHeight boxHeight: 36 hasHeader: false textPadding: 20 text: highlightOpacitySlider.value - validator: IntValidator { bottom: 0; top: 255 } - - onEdited: - { - if(text > 255) + validator: IntValidator { + bottom: 0 + top: 255 + } + + onEdited: { + if (text > 255) text = 255 - else if(text < 0) + else if (text < 0) text = 0 - - internal.saveSetting(SettingKeys.HighlightOpacity, text) + + internal.saveSetting( + SettingKeys.HighlightOpacity, + text) } } } } } - - Pane - { + + Pane { id: behaviorBlock Layout.fillWidth: true Layout.topMargin: 24 verticalPadding: 24 horizontalPadding: internal.pagePadding - background: Rectangle - { + background: Rectangle { color: Style.colorContainerBackground border.color: Style.colorContainerBorder radius: 4 antialiasing: true } - - - ColumnLayout - { + + ColumnLayout { id: behaviorLayout anchors.fill: parent spacing: 0 - - - Label - { + + Label { id: behaviorTitle Layout.fillWidth: true text: "Behavior" - font.pointSize: 17 + font.pointSize: Fonts.mediumTitleSize font.weight: Font.DemiBold color: Style.colorText } - - - Label - { + + Label { id: smoothScrollingTitle Layout.fillWidth: true Layout.topMargin: 24 text: "Smooth scrolling" - font.pointSize: 13 + font.pointSize: Fonts.hugeSize font.weight: Font.DemiBold color: Style.colorText } - - - MOnOffToggle - { + + MOnOffToggle { id: smoothScrollingToggle - property bool savedValue: JSON.parse(SettingsController.appearanceSettings.SmoothScrolling) - + property bool savedValue: JSON.parse( + SettingsController.appearanceSettings.SmoothScrolling) + Layout.topMargin: 4 onByDefault: savedValue - + // Need rebinding on reset onSavedValueChanged: savedValue ? setOn() : setOff() - onToggled: (value) => internal.saveSetting(SettingKeys.SmoothScrolling, - value === onText ? true : false) + onToggled: value => internal.saveSetting( + SettingKeys.SmoothScrolling, + value === onText ? true : false) } - - Label - { + + Label { id: loopAfterLastTitle Layout.fillWidth: true Layout.topMargin: 18 text: "Loop after last page" - font.pointSize: 13 + font.pointSize: Fonts.hugeSize font.weight: Font.DemiBold color: Style.colorText } - - - MOnOffToggle - { + + MOnOffToggle { id: loopAfterLastToggle - property bool savedValue: JSON.parse(SettingsController.appearanceSettings.LoopAfterLastPage) - + property bool savedValue: JSON.parse( + SettingsController.appearanceSettings.LoopAfterLastPage) + Layout.topMargin: 4 onByDefault: savedValue - + // Need rebinding on reset onSavedValueChanged: savedValue ? setOn() : setOff() - onToggled: (value) => internal.saveSetting(SettingKeys.LoopAfterLastPage, - value === onText ? true : false) + onToggled: value => internal.saveSetting( + SettingKeys.LoopAfterLastPage, + value === onText ? true : false) } - - Label - { + + Label { id: cursorModeTitle Layout.fillWidth: true Layout.topMargin: 18 text: "Cursor mode" - font.pointSize: 13 + font.pointSize: Fonts.hugeSize font.weight: Font.DemiBold color: Style.colorText } - - MRadioButtonSelector - { + + MRadioButtonSelector { id: cursorModeSelector property string savedValue: SettingsController.appearanceSettings.CursorMode - + Layout.fillWidth: true Layout.topMargin: 6 options: ["Hidden after delay", "Always visible"] - currentSelected: changeSelected(options.indexOf(savedValue)) - + currentSelected: changeSelected(options.indexOf( + savedValue)) + // Need rebinding on reset - onSavedValueChanged: changeSelected(options.indexOf(savedValue)) - onNewCurrentSelected: internal.saveSetting(SettingKeys.CursorMode, - currentSelected) + onSavedValueChanged: changeSelected(options.indexOf( + savedValue)) + onNewCurrentSelected: internal.saveSetting( + SettingKeys.CursorMode, + currentSelected) } } } } } } - - - MWarningPopup - { + + MWarningPopup { id: resetSettingsPopup - x: Math.round(root.width / 2 - implicitWidth / 2 - settingsSidebar.width / 2 - root.horizontalPadding) - y: Math.round(root.height / 2 - implicitHeight / 2 - root.topPadding - 50) + x: Math.round(root.width / 2 - implicitWidth / 2 - settingsSidebar.width + / 2 - root.horizontalPadding) + y: Math.round( + root.height / 2 - implicitHeight / 2 - root.topPadding - 50) visible: false title: "Reset settings?" message: "Resetting your settings is a permanent action, there\n will be no way to restore them!" @@ -732,25 +708,25 @@ Page rightButtonText: "Yes, Reset" buttonsWidth: 180 messageBottomSpacing: 10 - - onOpenedChanged: if(opened) resetSettingsPopup.giveFocus() + + onOpenedChanged: if (opened) + resetSettingsPopup.giveFocus() onDecisionMade: close() - onRightButtonClicked: SettingsController.resetSettingGroup(SettingGroups.Appearance) + onRightButtonClicked: SettingsController.resetSettingGroup( + SettingGroups.Appearance) } - - QtObject - { + + QtObject { id: internal property int pagePadding: 40 property int scrollbarOffset: 22 - - + + /* Higher order functions to simplify the call on the SettingsController */ - function saveSetting(key, value) - { - SettingsController.setSetting(key, value, SettingGroups.Appearance); + function saveSetting(key, value) { + SettingsController.setSetting(key, value, SettingGroups.Appearance) } } -} \ No newline at end of file +} diff --git a/src/presentation/settings/MGeneralSettingsPage.qml b/src/presentation/settings/MGeneralSettingsPage.qml index f2ec11689..5d5bfbff8 100644 --- a/src/presentation/settings/MGeneralSettingsPage.qml +++ b/src/presentation/settings/MGeneralSettingsPage.qml @@ -4,41 +4,35 @@ import QtQuick.Controls import CustomComponents import Librum.style import Librum.icons +import Librum.fonts import Librum.controllers - -MFlickWrapper -{ +MFlickWrapper { id: root contentHeight: page.implicitHeight flickDeceleration: 3500 - - - Page - { + + Page { id: page width: parent.width horizontalPadding: 48 bottomPadding: 22 - background: Rectangle { anchors.fill: parent; color: Style.colorPageBackground } - - - ColumnLayout - { + background: Rectangle { + anchors.fill: parent + color: Style.colorPageBackground + } + + ColumnLayout { id: layout width: parent.width spacing: 0 - - - RowLayout - { + + RowLayout { id: titleRow Layout.fillWidth: true spacing: 0 - - - MTitle - { + + MTitle { id: pageTitle Layout.topMargin: 64 titleText: "General settings" @@ -46,11 +40,12 @@ MFlickWrapper titleSize: 25 descriptionSize: 13.25 } - - Item { Layout.fillWidth: true } - - MButton - { + + Item { + Layout.fillWidth: true + } + + MButton { id: resetButton Layout.preferredWidth: 160 Layout.preferredHeight: 38 @@ -61,78 +56,73 @@ MFlickWrapper fontSize: 12 fontWeight: Font.Bold textColor: Style.colorFocusedButtonText - + onClicked: resetSettingsPopup.open() } } - - Pane - { + + Pane { id: downloadBlock Layout.fillWidth: true Layout.topMargin: 32 verticalPadding: 24 horizontalPadding: internal.pagePadding - background: Rectangle - { + background: Rectangle { color: Style.colorContainerBackground border.color: Style.colorContainerBorder radius: 4 antialiasing: true } - - - ColumnLayout - { + + ColumnLayout { id: downloadColumn anchors.fill: parent spacing: 0 - - Label - { + + Label { id: downloadTitle Layout.fillWidth: true text: "Books" - font.pointSize: 17 + font.pointSize: Fonts.mediumTitleSize font.weight: Font.DemiBold color: Style.colorText } - - - Label - { + + Label { id: openBookAfterCreationTitle Layout.fillWidth: true Layout.topMargin: 24 text: "Open books after creation" - font.pointSize: 13 + font.pointSize: Fonts.hugeSize font.weight: Font.DemiBold color: Style.colorText } - - MOnOffToggle - { + + MOnOffToggle { id: openBookAfterCreationToggle - property bool savedValue: JSON.parse(SettingsController.generalSettings.OpenBooksAfterCreation) - + property bool savedValue: JSON.parse( + SettingsController.generalSettings.OpenBooksAfterCreation) + Layout.topMargin: 4 onByDefault: savedValue - + // Need rebinding on reset onSavedValueChanged: savedValue ? setOn() : setOff() - onToggled: (value) => internal.saveSetting(SettingKeys.OpenBooksAfterCreation, - value === onText ? true : false) + onToggled: value => internal.saveSetting( + SettingKeys.OpenBooksAfterCreation, + value === onText ? true : false) } } } } } - - MWarningPopup - { + + MWarningPopup { id: resetSettingsPopup - x: Math.round(root.width / 2 - implicitWidth / 2 - settingsSidebar.width / 2 - page.horizontalPadding) - y: Math.round(root.height / 2 - implicitHeight / 2 - page.topPadding - 50) + x: Math.round(root.width / 2 - implicitWidth / 2 - settingsSidebar.width + / 2 - page.horizontalPadding) + y: Math.round( + root.height / 2 - implicitHeight / 2 - page.topPadding - 50) visible: false title: "Reset settings?" message: "Resetting your settings is a permanent action, there\n will be no way to restore them!" @@ -140,24 +130,24 @@ MFlickWrapper rightButtonText: "Yes, Reset" buttonsWidth: 180 messageBottomSpacing: 10 - - onOpenedChanged: if(opened) resetSettingsPopup.giveFocus() + + onOpenedChanged: if (opened) + resetSettingsPopup.giveFocus() onDecisionMade: close() - onRightButtonClicked: SettingsController.resetSettingGroup(SettingGroups.General) + onRightButtonClicked: SettingsController.resetSettingGroup( + SettingGroups.General) } - - QtObject - { + + QtObject { id: internal - property int pagePadding : 40 - - + property int pagePadding: 40 + + /* Higher order functions to simplify the call on the SettingsController */ - function saveSetting(key, value) - { - SettingsController.setSetting(key, value, SettingGroups.General); + function saveSetting(key, value) { + SettingsController.setSetting(key, value, SettingGroups.General) } } -} \ No newline at end of file +} diff --git a/src/presentation/settings/MStoragePage.qml b/src/presentation/settings/MStoragePage.qml index 347be641d..25be97c0e 100644 --- a/src/presentation/settings/MStoragePage.qml +++ b/src/presentation/settings/MStoragePage.qml @@ -4,43 +4,39 @@ import QtQuick.Controls import CustomComponents import Librum.style import Librum.icons +import Librum.fonts import Librum.controllers import Librum.models - -MFlickWrapper -{ +MFlickWrapper { id: root contentHeight: page.implicitHeight - - - Page - { + + Page { id: page width: parent.width horizontalPadding: 48 bottomPadding: 22 - background: Rectangle { anchors.fill: parent; color: Style.colorPageBackground } - - Component.onCompleted: { UserController.syncWithServer() } - - - ColumnLayout - { - id: layout + background: Rectangle { + anchors.fill: parent + color: Style.colorPageBackground + } + + Component.onCompleted: { + UserController.syncWithServer() + } + + ColumnLayout { + id: layout width: parent.width spacing: 0 - - - RowLayout - { + + RowLayout { id: titleRow Layout.fillWidth: true spacing: 0 - - - MTitle - { + + MTitle { id: pageTitle Layout.topMargin: 64 titleText: "Storage" @@ -48,11 +44,12 @@ MFlickWrapper titleSize: 25 descriptionSize: 13.25 } - - Item { Layout.fillWidth: true } - - MButton - { + + Item { + Layout.fillWidth: true + } + + MButton { id: upgradeButton Layout.preferredWidth: 118 Layout.preferredHeight: 38 @@ -65,38 +62,32 @@ MFlickWrapper textColor: Style.colorFocusedButtonText imagePath: Icons.heartHallow imageSize: 18 - + onClicked: upgradePopup.open() } } - - Pane - { + + Pane { id: container Layout.fillWidth: true Layout.topMargin: 32 padding: 28 - background: Rectangle - { + background: Rectangle { color: Style.colorContainerBackground border.color: Style.colorContainerBorder radius: 4 antialiasing: true } - - - ColumnLayout - { + + ColumnLayout { width: parent.width spacing: 26 - - RowLayout - { + + RowLayout { width: parent.width spacing: 26 - - Pane - { + + Pane { id: tierPane Layout.fillWidth: true Layout.preferredWidth: 470 @@ -104,59 +95,53 @@ MFlickWrapper Layout.minimumWidth: 235 Layout.preferredHeight: 325 horizontalPadding: 34 - background: Rectangle - { + background: Rectangle { anchors.fill: parent color: Style.colorPageBackground radius: 4 } - - ColumnLayout - { + + ColumnLayout { width: parent.width - - Label - { + + Label { id: tierTitle Layout.alignment: Qt.AlignLeft Layout.topMargin: 6 text: "YOUR TIER" color: Style.colorPageSubtitle font.weight: Font.Bold - font.pointSize: 10.5 + font.pointSize: Fonts.mediumSize } - - Label - { + + Label { id: tierName Layout.alignment: Qt.AlignHCenter Layout.topMargin: 46 text: "BASIC" color: Style.colorSubtitle font.weight: Font.Medium - font.pointSize: 22 + font.pointSize: Fonts.largeTitleSize } - - Label - { + + Label { id: storageAmount Layout.alignment: Qt.AlignHCenter Layout.topMargin: -8 - text: internal.bytesToGB(UserController.bookStorageLimit) + "GB" + text: internal.bytesToGB( + UserController.bookStorageLimit) + "GB" color: Style.colorMatteTitle font.weight: Font.Bold - font.pointSize: 46 + font.pointSize: Fonts.bigHeaderSize } - - RowLayout - { + + RowLayout { id: upgradeButtonRow Layout.fillWidth: true Layout.topMargin: 36 spacing: 12 - - MButton - { + + MButton { id: inlineUpgradeButton Layout.preferredWidth: 110 Layout.preferredHeight: 38 @@ -166,12 +151,11 @@ MFlickWrapper fontSize: 12 fontWeight: Font.Bold textColor: Style.colorFocusedButtonText - + onClicked: upgradePopup.open() } - - MButton - { + + MButton { id: whyOfferingTiersButton Layout.fillWidth: true Layout.preferredHeight: 38 @@ -183,121 +167,113 @@ MFlickWrapper fontSize: 12 fontWeight: Font.Medium textColor: Style.colorText - - onClicked: Qt.openUrlExternally(AppInfoController.website + "/whyTiers") + + onClicked: Qt.openUrlExternally( + AppInfoController.website + "/whyTiers") } } } } - - Pane - { + + Pane { id: usedStoragePaneBold Layout.fillWidth: true Layout.minimumWidth: 340 Layout.preferredHeight: 325 horizontalPadding: 34 - background: Rectangle - { + background: Rectangle { anchors.fill: parent color: Style.colorPageBackground radius: 4 } - - ColumnLayout - { + + ColumnLayout { width: parent.width spacing: 0 - - Label - { + + Label { id: usedStorageTitle Layout.alignment: Qt.AlignLeft Layout.topMargin: 6 text: "USED STORAGE" color: Style.colorPageSubtitle font.weight: Font.Bold - font.pointSize: 10.5 + font.pointSize: Fonts.mediumSize } - - RowLayout - { + + RowLayout { Layout.fillWidth: true Layout.topMargin: 85 spacing: 0 - - - Item - { + + Item { id: usedStorageBox Layout.preferredWidth: parent.width / 2 - height: usedStorageText.height + usedStorageExplenationText.height - - Label - { + height: usedStorageText.height + + usedStorageExplenationText.height + + Label { id: usedStorageText anchors.horizontalCenter: parent.horizontalCenter - text: internal.bytesToGB(UserController.usedBookStorage, 2) + "GB" + text: internal.bytesToGB( + UserController.usedBookStorage, + 2) + "GB" color: Style.colorBasePurple font.weight: Font.Bold - font.pointSize: 42 + font.pointSize: Fonts.baseHeaderSize } - - Label - { + + Label { id: usedStorageExplenationText anchors.horizontalCenter: parent.horizontalCenter anchors.top: usedStorageText.bottom anchors.topMargin: 2 text: "Used Storage" color: Style.colorLightText - font.pointSize: 11 + font.pointSize: Fonts.baseSize } } - - Item - { + + Item { id: availableStorageBox Layout.fillWidth: true - height: remainingStorageText.height + remainingStorageExplenationText.height - - Label - { + height: remainingStorageText.height + + remainingStorageExplenationText.height + + Label { id: remainingStorageText anchors.horizontalCenter: parent.horizontalCenter - text: internal.bytesToGB(UserController.bookStorageLimit) + "GB" + text: internal.bytesToGB( + UserController.bookStorageLimit) + "GB" color: Style.colorLightText font.weight: Font.Bold - font.pointSize: 42 + font.pointSize: Fonts.baseHeaderSize } - - Label - { + + Label { id: remainingStorageExplenationText anchors.horizontalCenter: parent.horizontalCenter anchors.top: remainingStorageText.bottom anchors.topMargin: 2 text: "Remaining Storage" color: Style.colorLightText - font.pointSize: 11 + font.pointSize: Fonts.baseSize } } } - - Rectangle - { + + Rectangle { id: progressBar Layout.fillWidth: true Layout.preferredHeight: 34 Layout.topMargin: 32 color: Style.colorLightPurple radius: 4 - - Rectangle - { + + Rectangle { id: progressBarFilling property int progress: parent.width * (UserController.usedBookStorage / UserController.bookStorageLimit) - + width: progress <= parent.width ? progress : parent.width height: parent.height color: Style.colorBasePurple @@ -306,16 +282,13 @@ MFlickWrapper } } } - } - - RowLayout - { + + RowLayout { width: parent.width spacing: 28 - - Pane - { + + Pane { id: yourBooksPane Layout.fillWidth: true Layout.preferredWidth: 470 @@ -323,47 +296,42 @@ MFlickWrapper Layout.minimumWidth: 235 Layout.preferredHeight: 325 horizontalPadding: 34 - background: Rectangle - { + background: Rectangle { anchors.fill: parent color: Style.colorPageBackground radius: 4 } - - ColumnLayout - { + + ColumnLayout { width: parent.width spacing: 0 - - Label - { + + Label { id: yourBooksTitle Layout.alignment: Qt.AlignLeft Layout.topMargin: 6 text: "YOUR BOOKS" color: Style.colorPageSubtitle font.weight: Font.Bold - font.pointSize: 10.5 + font.pointSize: Fonts.mediumSize } - - Label - { + + Label { id: bookCount Layout.alignment: Qt.AlignHCenter Layout.topMargin: 78 text: LibraryController.bookCount color: Style.colorMatteTitle font.weight: Font.Bold - font.pointSize: 46 + font.pointSize: Fonts.bigHeaderSize } - - Label - { + + Label { id: bookCountDescription Layout.alignment: Qt.AlignHCenter text: "Books in your Library" color: Style.colorLightText - font.pointSize: 12 + font.pointSize: Fonts.bigSize } } } @@ -372,46 +340,48 @@ MFlickWrapper } } } - - MWarningPopup - { + + MWarningPopup { id: upgradePopup - x: Math.round(page.width / 2 - implicitWidth / 2 - settingsSidebar.width / 2 - page.horizontalPadding) - y: Math.round(page.height / 2 - implicitHeight / 2 - page.topPadding - 50) + x: Math.round(page.width / 2 - implicitWidth / 2 - settingsSidebar.width + / 2 - page.horizontalPadding) + y: Math.round( + page.height / 2 - implicitHeight / 2 - page.topPadding - 50) visible: false title: "Upgrade Your Tier" - message: "We don't offer upgrading options at the moment.\n" + - "If you require additional storage, please contact us at: " + AppInfoController.companyEmail + message: "We don't offer upgrading options at the moment.\n" + + "If you require additional storage, please contact us at: " + + AppInfoController.companyEmail leftButtonText: "Close" rightButtonText: "Email Us" buttonsWidth: 180 messageBottomSpacing: 10 - - onOpenedChanged: if(opened) upgradePopup.giveFocus() - onRightButtonClicked: Qt.openUrlExternally("mailto:" + AppInfoController.companyEmail) + + onOpenedChanged: if (opened) + upgradePopup.giveFocus() + onRightButtonClicked: Qt.openUrlExternally( + "mailto:" + AppInfoController.companyEmail) onDecisionMade: close() } - - QtObject - { + + QtObject { id: internal - + // Convert bytes to GB and format them correctly, rules: // - Convert bytes to GB // - If bytes == 0, return "0" // - If result ends with a 0, e.g. "2.40" remove it, so "2.4" // - Else Round it up to "precision" amount - function bytesToGB(bytes, precision = 1) - { + function bytesToGB(bytes, precision = 1) { if (bytes === 0) { - return "0"; - } - - const gibibytes = bytes / (1024 * 1024 * 1024); - const rounded = gibibytes.toFixed(2); - const formatted = rounded.replace(/\.?0+$/, ""); - - return formatted; + return "0" + } + + const gibibytes = bytes / (1024 * 1024 * 1024) + const rounded = gibibytes.toFixed(2) + const formatted = rounded.replace(/\.?0+$/, "") + + return formatted } } -} \ No newline at end of file +} diff --git a/src/presentation/settings/MSupportUsPage.qml b/src/presentation/settings/MSupportUsPage.qml index 757060e3d..ac9e71318 100644 --- a/src/presentation/settings/MSupportUsPage.qml +++ b/src/presentation/settings/MSupportUsPage.qml @@ -4,99 +4,85 @@ import QtQuick.Controls import CustomComponents import Librum.style import Librum.icons +import Librum.fonts import Librum.elements import Librum.controllers - -MFlickWrapper -{ +MFlickWrapper { id: root contentHeight: page.implicitHeight - - - Page - { + + Page { id: page topPadding: 64 width: parent.width horizontalPadding: 48 bottomPadding: 22 - background: Rectangle { anchors.fill: parent; color: Style.colorPageBackground } - - - ColumnLayout - { + background: Rectangle { + anchors.fill: parent + color: Style.colorPageBackground + } + + ColumnLayout { id: layout width: parent.width spacing: 0 - - - MTitle - { + + MTitle { id: pageTitle titleText: "Support us" descriptionText: "Thanks for considering" titleSize: 25 descriptionSize: 13.25 } - - Pane - { + + Pane { id: container Layout.fillWidth: true Layout.topMargin: 32 topPadding: 24 horizontalPadding: 40 bottomPadding: 38 - background: Rectangle - { + background: Rectangle { color: Style.colorContainerBackground border.color: Style.colorContainerBorder radius: 4 antialiasing: true } - - - ColumnLayout - { + + ColumnLayout { id: contentLayout width: parent.width spacing: 0 - - - Label - { + + Label { id: contentTitle text: "Us" color: Style.colorText - font.pointSize: 20 + font.pointSize: Fonts.veryBigTitleSize font.weight: Font.DemiBold } - - Label - { + + Label { Layout.fillWidth: true Layout.topMargin: 15 - text: "We are a small team of opensource developers creating apps for the community. We love\n" + - "working on fun projects, supporting our community and trying to make the world a better place." + text: "We are a small team of opensource developers creating apps for the community. We love\n" + "working on fun projects, supporting our community and trying to make the world a better place." wrapMode: Text.WordWrap color: Style.colorLightText - font.pointSize: 14 + font.pointSize: Fonts.smallTitleSize } - - Label - { + + Label { id: supportOnPatreonText Layout.fillWidth: true Layout.topMargin: 36 text: "If you feel like supporting us and our projects, feel free to support us on patreon:" wrapMode: Text.WordWrap color: Style.colorLightText - font.pointSize: 14 + font.pointSize: Fonts.smallTitleSize } - - MButton - { + + MButton { id: patreonButton Layout.preferredWidth: 146 Layout.preferredHeight: 38 @@ -111,58 +97,56 @@ MFlickWrapper fontSize: 12 textColor: Style.colorFocusedButtonText radius: 4 - - onClicked: Qt.openUrlExternally("https://www.patreon.com/librumreader") + + onClicked: Qt.openUrlExternally( + "https://www.patreon.com/librumreader") } - - Label - { + + Label { id: otherSupportText Layout.fillWidth: true Layout.topMargin: 40 - text: "You can support us in many other ways as well, if you are a developer or a designer, feel free to " + - "contribute to Librum.
If you are not, you can still help us by spreading the word about Librum." - onLinkActivated: (link) => Qt.openUrlExternally(link) + text: "You can support us in many other ways as well, if you are a developer or a designer, feel free to " + + "contribute to Librum.
If you are not, you can still help us by spreading the word about Librum." + onLinkActivated: link => Qt.openUrlExternally(link) textFormat: Text.RichText wrapMode: Text.WordWrap color: Style.colorLightText - font.pointSize: 14 - - MouseArea - { + font.pointSize: Fonts.smallTitleSize + + MouseArea { id: mouseArea anchors.fill: parent acceptedButtons: Qt.NoButton // Don't eat the mouse clicks - cursorShape: otherSupportText.hoveredLink != "" ? Qt.PointingHandCursor : Qt.ArrowCursor + cursorShape: otherSupportText.hoveredLink + != "" ? Qt.PointingHandCursor : Qt.ArrowCursor } } - + // RowLayout needed to put icon next to text - RowLayout - { + RowLayout { id: heartColumn Layout.topMargin: 48 spacing: 0 - - Image - { + + Image { id: heartImage Layout.alignment: Qt.AlignBottom source: Icons.heart sourceSize.width: 80 fillMode: Image.PreserveAspectFit } - - Label - { + + Label { id: leaveText - Layout.fillWidth: true + Layout.fillWidth: true Layout.leftMargin: 16 text: "Thank you for your support. We hope you enjoy Librum!" wrapMode: Text.WordWrap color: Style.colorLightText - font.pointSize: 14 + font.pointSize: Fonts.smallTitleSize } } } diff --git a/src/presentation/settings/accountPage/MAccountPage.qml b/src/presentation/settings/accountPage/MAccountPage.qml index 6bbcd8fdf..b89d1b8cc 100644 --- a/src/presentation/settings/accountPage/MAccountPage.qml +++ b/src/presentation/settings/accountPage/MAccountPage.qml @@ -130,7 +130,7 @@ MFlickWrapper { id: profileTitle text: "Profile" color: Style.colorText - font.pointSize: 16.5 + font.pointSize: 17 font.weight: Font.DemiBold } @@ -234,7 +234,7 @@ MFlickWrapper { id: passwordTitle text: "Change password" color: Style.colorText - font.pointSize: 16.5 + font.pointSize: 17 font.weight: Font.DemiBold } @@ -313,7 +313,7 @@ MFlickWrapper { id: yourDataTitle text: "Your data" color: Style.colorText - font.pointSize: 16.5 + font.pointSize: 17 font.weight: Font.DemiBold } @@ -396,7 +396,7 @@ MFlickWrapper { id: yourAccountTitle text: "Your Account" color: Style.colorText - font.pointSize: 16.5 + font.pointSize: 17 font.weight: Font.DemiBold } diff --git a/src/presentation/settings/accountPage/MSelectProfilePictureArea.qml b/src/presentation/settings/accountPage/MSelectProfilePictureArea.qml index f8c6996a2..74b5de337 100644 --- a/src/presentation/settings/accountPage/MSelectProfilePictureArea.qml +++ b/src/presentation/settings/accountPage/MSelectProfilePictureArea.qml @@ -5,57 +5,53 @@ import Qt.labs.platform import Librum.style import Librum.icons import Librum.controllers +import Librum.fonts - -Item -{ +Item { id: root - property string currentImage: "" // Being set to "!" means DELETED - + property string currentImage: "" // Being set to "!" means DELETED + implicitWidth: 100 implicitHeight: 100 - - - Pane - { + + Pane { id: container anchors.fill: parent padding: 1 clip: true - background: Rectangle - { + background: Rectangle { color: Style.colorContainerBackground border.color: Style.colorContainerBorder radius: 4 } - - - DropArea - { + + DropArea { id: dropArea anchors.fill: parent - - onDropped: (drop) => root.currentImage = drop.urls[0] - + + onDropped: drop => root.currentImage = drop.urls[0] + + /* The image which is displayed when the dropArea owns an image */ - Image - { + Image { id: profilePicture anchors.fill: parent visible: internal.imageExists - source: root.currentImage.length > 0 ? (root.currentImage == "!" ? "" : root.currentImage) : UserController.profilePicture + source: root.currentImage.length + > 0 ? (root.currentImage + == "!" ? "" : root.currentImage) : UserController.profilePicture sourceSize.height: emptyDropArea.height fillMode: Image.PreserveAspectFit cache: false } - + + /* The illustation you see while hovering over the dropArea with a file */ - Rectangle - { + Rectangle { id: fileDropIllustration anchors.fill: parent z: 2 @@ -63,10 +59,8 @@ Item visible: dropArea.containsDrag color: Style.colorContainerBackground radius: 4 - - - Image - { + + Image { id: fileDropImage anchors.centerIn: parent source: Icons.addFileIllustration @@ -74,30 +68,29 @@ Item fillMode: Image.PreserveAspectFit } } - + + /* The empty look of the drop area */ - Pane - { + Pane { id: emptyDropArea anchors.fill: parent visible: !internal.imageExists padding: 0 clip: true - background: Rectangle { color: Style.colorDropArea; radius: 4 } - - - ColumnLayout - { + background: Rectangle { + color: Style.colorDropArea + radius: 4 + } + + ColumnLayout { id: emptyDropAreaLayout width: parent.width anchors.centerIn: parent spacing: 10 - - - Image - { + + Image { id: emptyDropAreaIcon Layout.alignment: Qt.AlignCenter Layout.topMargin: 10 @@ -105,9 +98,8 @@ Item sourceSize.width: 40 fillMode: Image.PreserveAspectFit } - - Label - { + + Label { id: emptyDropAreaText Layout.fillWidth: true Layout.maximumWidth: 237 @@ -116,7 +108,7 @@ Item horizontalAlignment: Qt.AlignHCenter wrapMode: Text.WordWrap color: Style.colorSubtitle - font.pointSize: 12 + font.pointSize: Fonts.bigSize font.weight: Font.DemiBold lineHeight: 0.9 } @@ -124,9 +116,8 @@ Item } } } - - Image - { + + Image { id: deletePictureButton z: 2 anchors.top: parent.top @@ -137,41 +128,39 @@ Item source: Icons.trashRed fillMode: Image.PreserveAspectFit opacity: deletePictureArea.pressed ? 0.6 : 0.8 - visible: (deletePictureArea.containsMouse || mainArea.containsMouse) && internal.imageExists - - MouseArea - { + visible: (deletePictureArea.containsMouse || mainArea.containsMouse) + && internal.imageExists + + MouseArea { id: deletePictureArea anchors.fill: parent hoverEnabled: true - - onClicked: root.currentImage = "!"; + + onClicked: root.currentImage = "!" } } - - MouseArea - { + + MouseArea { id: mainArea anchors.fill: parent hoverEnabled: true - + onClicked: fileDialog.open() } - - FileDialog - { + + FileDialog { id: fileDialog fileMode: FileDialog.OpenFiles folder: StandardPaths.writableLocation(StandardPaths.PicturesLocation) nameFilters: ["All files (*)", "png files (*.png)", "jpg files (*.jpg)", "jpeg files (*.jpeg)"] - + onAccepted: root.currentImage = file } - - QtObject - { + + QtObject { id: internal - property bool imageExists: ((root.currentImage.length > 0) || (UserController.profilePicture.length > 0)) + property bool imageExists: ((root.currentImage.length > 0) + || (UserController.profilePicture.length > 0)) && root.currentImage != "!" } -} \ No newline at end of file +} diff --git a/src/presentation/settings/settingsSidebar/MSettingsSidebar.qml b/src/presentation/settings/settingsSidebar/MSettingsSidebar.qml index abf6cfcfa..e98655b1f 100644 --- a/src/presentation/settings/settingsSidebar/MSettingsSidebar.qml +++ b/src/presentation/settings/settingsSidebar/MSettingsSidebar.qml @@ -5,10 +5,9 @@ import QtQuick.Window import CustomComponents import Librum.style import Librum.icons +import Librum.fonts - -Item -{ +Item { id: root property MSettingsSidebarItem aboutItem: aboutItem property MSettingsSidebarItem appearanceItem: appearanceItem @@ -18,23 +17,21 @@ Item property MSettingsSidebarItem accountItem: accountItem property MSettingsSidebarItem storageItem: storageItem property MSettingsSidebarItem supportUsItem: supportUsItem - property MSettingsSidebarItem currentItem : aboutItem - + property MSettingsSidebarItem currentItem: aboutItem + implicitWidth: 238 implicitHeight: Window.height - - + + /* Adds a border to the whole settings sidebar */ - Rectangle - { + Rectangle { id: background anchors.fill: parent color: Style.colorSettingsSidebarBackground - - Rectangle - { + + Rectangle { id: rightBorder width: 1 height: parent.height @@ -42,32 +39,26 @@ Item color: Style.colorContainerBorder } } - - MFlickWrapper - { + + MFlickWrapper { id: flickWrapper anchors.fill: parent contentHeight: layout.implicitHeight - - - ColumnLayout - { + + ColumnLayout { id: layout spacing: 0 - - - Label - { + + Label { Layout.topMargin: 28 Layout.leftMargin: 25 text: "Settings" - font.pointSize: 19 + font.pointSize: Fonts.bigTitleSize font.bold: true color: Style.colorTitle } - - Rectangle - { + + Rectangle { id: titleSeparator Layout.preferredWidth: 56 Layout.preferredHeight: 2 @@ -75,20 +66,17 @@ Item Layout.leftMargin: 26 color: Style.colorDarkSeparator } - - Label - { + + Label { Layout.topMargin: 38 Layout.leftMargin: 25 text: "GLOBAL SETTINGS" - font.pointSize: 10.2 + font.pointSize: Fonts.smallSize font.weight: Font.Bold color: Style.colorLightText } - - - MSettingsSidebarItem - { + + MSettingsSidebarItem { id: aboutItem Layout.preferredHeight: 32 Layout.preferredWidth: internal.sidebarItemWidth @@ -101,12 +89,11 @@ Item textContent: "About" defaultIcon: Icons.settingsSidebarAbout selectedIcon: Icons.settingsSidebarAboutSelected - - onClicked: loadSettingsPage(aboutPage, root.aboutItem); + + onClicked: loadSettingsPage(aboutPage, root.aboutItem) } - - MSettingsSidebarItem - { + + MSettingsSidebarItem { id: appearanceItem Layout.preferredHeight: 32 Layout.preferredWidth: internal.sidebarItemWidth @@ -117,13 +104,12 @@ Item labelLeftMargin: 8 textContent: "Appearance" defaultIcon: Icons.settingsSidebarAppearance - selectedIcon: Icons.settingsSidebarAppearanceSelected - + selectedIcon: Icons.settingsSidebarAppearanceSelected + onClicked: loadSettingsPage(appearancePage, root.appearanceItem) } - - MSettingsSidebarItem - { + + MSettingsSidebarItem { id: shortcutsItem Layout.preferredHeight: 32 Layout.preferredWidth: internal.sidebarItemWidth @@ -135,12 +121,11 @@ Item textContent: "Shortcuts" defaultIcon: Icons.settingsSidebarShortcuts selectedIcon: Icons.settingsSidebarShortcutsSelected - + onClicked: loadSettingsPage(shortcutsPage, root.shortcutsItem) } - - MSettingsSidebarItem - { + + MSettingsSidebarItem { id: updatesItem Layout.preferredHeight: 32 Layout.preferredWidth: internal.sidebarItemWidth @@ -152,12 +137,11 @@ Item textContent: "Updates" defaultIcon: Icons.settingsSidebarUpdates selectedIcon: Icons.settingsSidebarUpdatesSelected - + onClicked: loadSettingsPage(updatesPage, root.updatesItem) } - - MSettingsSidebarItem - { + + MSettingsSidebarItem { id: generalSettingsItem Layout.preferredHeight: 32 Layout.preferredWidth: internal.sidebarItemWidth @@ -169,23 +153,21 @@ Item textContent: "General Settings" defaultIcon: Icons.settingsSidebarSettings selectedIcon: Icons.settingsSidebarSettingsSelected - - onClicked: loadSettingsPage(generalSettingsPage, root.generalSettingsItem) + + onClicked: loadSettingsPage(generalSettingsPage, + root.generalSettingsItem) } - - - Label - { + + Label { Layout.topMargin: 25 Layout.leftMargin: 25 text: "USER & ACCOUNT" - font.pointSize: 10.2 + font.pointSize: Fonts.smallSize font.bold: true color: Style.colorLightText } - - MSettingsSidebarItem - { + + MSettingsSidebarItem { id: accountItem Layout.preferredHeight: 32 Layout.preferredWidth: internal.sidebarItemWidth @@ -198,13 +180,11 @@ Item textContent: "Account" defaultIcon: Icons.settingsSidebarAccount selectedIcon: Icons.settingsSidebarAccountSelected - - onClicked: - loadSettingsPage(accountPage, root.accountItem) + + onClicked: loadSettingsPage(accountPage, root.accountItem) } - - MSettingsSidebarItem - { + + MSettingsSidebarItem { id: storageItem Layout.preferredHeight: 32 Layout.preferredWidth: internal.sidebarItemWidth @@ -216,12 +196,11 @@ Item textContent: "Storage" defaultIcon: Icons.settingsSidebarStorage selectedIcon: Icons.settingsSidebarStorageSelected - + onClicked: loadSettingsPage(storagePage, root.storageItem) } - - MSettingsSidebarItem - { + + MSettingsSidebarItem { id: supportUsItem Layout.preferredHeight: 32 Layout.preferredWidth: internal.sidebarItemWidth @@ -234,23 +213,20 @@ Item textContent: "Support us" defaultIcon: Icons.settingsSidebarSupportUs selectedIcon: Icons.settingsSidebarSupportUsSelected - + onClicked: loadSettingsPage(supportUsPage, root.supportUsItem) } } } - - QtObject - { + + QtObject { id: internal property int sidebarItemWidth: root.width - 2 } - - - function changeSelectedSettingsItem(newItem) - { - root.currentItem.selected = false; - root.currentItem = newItem; - root.currentItem.selected = true; + + function changeSelectedSettingsItem(newItem) { + root.currentItem.selected = false + root.currentItem = newItem + root.currentItem.selected = true } -} \ No newline at end of file +} diff --git a/src/presentation/settings/settingsSidebar/MSettingsSidebarItem.qml b/src/presentation/settings/settingsSidebar/MSettingsSidebarItem.qml index 7ee6f84d9..5a316704e 100644 --- a/src/presentation/settings/settingsSidebar/MSettingsSidebarItem.qml +++ b/src/presentation/settings/settingsSidebar/MSettingsSidebarItem.qml @@ -2,12 +2,11 @@ import QtQuick import QtQuick.Layouts import QtQuick.Controls import Librum.style +import Librum.fonts - -Item -{ +Item { id: root - property bool selected : false + property bool selected: false property int imageLeftMargin: 0 property int imageWidth: 0 property int labelLeftMargin: 0 @@ -17,50 +16,45 @@ Item property string defaultIcon property string selectedIcon signal clicked - + implicitWidth: 235 implicitHeight: 32 - - - Rectangle - { + + Rectangle { id: container anchors.fill: parent color: root.selected ? Style.colorLightHighlight : "transparent" - - - RowLayout - { + + RowLayout { id: layout anchors.fill: parent spacing: 0 - - - Image - { + + Image { id: icon Layout.leftMargin: root.imageLeftMargin source: root.selected ? root.selectedIcon : root.defaultIcon fillMode: Image.PreserveAspectFit sourceSize.width: root.selected ? root.imageWidth + 1 : root.imageWidth } - - Label - { + + Label { id: text Layout.topMargin: root.labelTopMargin Layout.leftMargin: root.labelLeftMargin verticalAlignment: textVerticalAlignment text: root.textContent color: root.selected ? Style.colorBasePurple : Style.colorText - font.pointSize: 13 + font.pointSize: Fonts.hugeSize font.weight: root.selected ? Font.DemiBold : Font.Normal } - - Item { id: widthFiller; Layout.fillWidth: true } - - Rectangle - { + + Item { + id: widthFiller + Layout.fillWidth: true + } + + Rectangle { id: sideBorder visible: root.selected Layout.preferredWidth: 2 @@ -68,12 +62,11 @@ Item color: Style.colorBasePurple } } - - MouseArea - { + + MouseArea { anchors.fill: parent - + onClicked: root.clicked() } } -} \ No newline at end of file +} diff --git a/src/presentation/settings/shortcutsPage/MAddShortcutPopup.qml b/src/presentation/settings/shortcutsPage/MAddShortcutPopup.qml index c72454002..3375a9920 100644 --- a/src/presentation/settings/shortcutsPage/MAddShortcutPopup.qml +++ b/src/presentation/settings/shortcutsPage/MAddShortcutPopup.qml @@ -4,64 +4,61 @@ import QtQuick.Layouts import CustomComponents import Librum.style import Librum.icons +import Librum.fonts import Librum.controllers - -Popup -{ +Popup { id: root property int preselectedSettingIndex: -1 signal applied(string shortcut, string value) - + implicitWidth: 594 implicitHeight: layout.implicitHeight closePolicy: Popup.CloseOnPressOutside padding: 0 focus: true modal: true - background: Rectangle { color: Style.colorPopupBackground; radius: 6 } - Overlay.modal: Rectangle { color: Style.colorPopupDim; opacity: 1 } - - onOpened: - { - applyButton.forceActiveFocus(); - internal.setPreselectedItem(); + background: Rectangle { + color: Style.colorPopupBackground + radius: 6 + } + Overlay.modal: Rectangle { + color: Style.colorPopupDim + opacity: 1 + } + + onOpened: { + applyButton.forceActiveFocus() + internal.setPreselectedItem() } - - onClosed: - { + + onClosed: { internal.resetPopupData() - + // Reset the buttons, so that "Apply" has the focus again - cancelButton.active = false; - applyButton.active = true; + cancelButton.active = false + applyButton.active = true } - - - Shortcut - { + + Shortcut { sequence: "Ctrl+R" enabled: root.opened onActivated: recordKeyBox.startRecording() } - - Shortcut - { + + Shortcut { sequence: "Escape" enabled: root.opened - onActivated: if(!recordKeyBox.recording) root.close() + onActivated: if (!recordKeyBox.recording) + root.close() } - - - ColumnLayout - { + + ColumnLayout { id: layout width: parent.width spacing: 0 - - - MButton - { + + MButton { id: closeButton Layout.preferredHeight: 32 Layout.preferredWidth: 32 @@ -75,47 +72,42 @@ Popup borderColorOnPressed: Style.colorButtonBorder imagePath: Icons.closePopup imageSize: 14 - + onClicked: root.close() } - - Pane - { + + Pane { id: content Layout.fillWidth: true Layout.topMargin: 18 topPadding: 0 horizontalPadding: 52 bottomPadding: 42 - background: Rectangle { color: "transparent"; radius: 6 } - - - ColumnLayout - { + background: Rectangle { + color: "transparent" + radius: 6 + } + + ColumnLayout { id: contentLayout width: parent.width spacing: 0 - - Label - { + + Label { id: popupTitle text: "Edit Shortcuts" font.weight: Font.Bold - font.pointSize: 17 + font.pointSize: Fonts.mediumTitleSize color: Style.colorTitle } - - - RowLayout - { + + RowLayout { id: selectionLayout Layout.fillWidth: true Layout.topMargin: 42 spacing: 26 - - - MComboBox - { + + MComboBox { id: actionsComboBox Layout.fillWidth: true Layout.preferredHeight: 60 @@ -130,59 +122,52 @@ Popup emptyText: "None selected" dropdownIconSize: 11 contentPropertyName: "shortcut" - + fontSize: 11.5 checkBoxStyle: false model: SettingsController.shortcutsModel } - - - MRecordKeyBox - { + + MRecordKeyBox { id: recordKeyBox Layout.fillWidth: true Layout.preferredHeight: 60 itemToRedirectFocusTo: applyButton - - onTextChanged: - { - let conflictingShortcut = SettingsController.checkIfShortcutIsInUse(recordKeyBox.text); - if(conflictingShortcut.length !== 0) - { - shortcutIsAlreadyInUseLabel.conflictingShortcut = conflictingShortcut; - shortcutIsAlreadyInUseLabel.visible = true; - } - else - { - shortcutIsAlreadyInUseLabel.visible = false; + + onTextChanged: { + let conflictingShortcut = SettingsController.checkIfShortcutIsInUse( + recordKeyBox.text) + if (conflictingShortcut.length !== 0) { + shortcutIsAlreadyInUseLabel.conflictingShortcut + = conflictingShortcut + shortcutIsAlreadyInUseLabel.visible = true + } else { + shortcutIsAlreadyInUseLabel.visible = false } } } } - - Label - { + + Label { id: shortcutIsAlreadyInUseLabel property string conflictingShortcut: "" - + Layout.preferredWidth: parent.width Layout.topMargin: 16 visible: false - text: "The shortcut '" + recordKeyBox.text + "' is already used for '" + conflictingShortcut + "'." + text: "The shortcut '" + recordKeyBox.text + + "' is already used for '" + conflictingShortcut + "'." wrapMode: Text.WordWrap - font.pointSize: 11 + font.pointSize: Fonts.baseSize color: Style.colorErrorText } - - RowLayout - { + + RowLayout { id: buttonLayout Layout.topMargin: 96 spacing: 16 - - - MButton - { + + MButton { id: applyButton Layout.preferredWidth: 120 Layout.preferredHeight: 38 @@ -195,33 +180,28 @@ Popup fontSize: 12 KeyNavigation.right: cancelButton KeyNavigation.tab: cancelButton - + onClicked: apply() - + // Key navigation - Keys.onPressed: - (event) => - { - if(event.key === Qt.Key_Right || event.key === Qt.Key_Tab) - { - applyButton.active = false; - cancelButton.active = true; - } - else if(event.key === Qt.Key_Return) - { - apply(); - } - } - - function apply() - { - root.applied(actionsComboBox.text, recordKeyBox.text); - root.close(); + Keys.onPressed: event => { + if (event.key === Qt.Key_Right + || event.key === Qt.Key_Tab) { + applyButton.active = false + cancelButton.active = true + } else if (event.key === Qt.Key_Return) { + apply() + } + } + + function apply() { + root.applied(actionsComboBox.text, + recordKeyBox.text) + root.close() } } - - MButton - { + + MButton { id: cancelButton Layout.preferredWidth: 120 Layout.preferredHeight: 38 @@ -234,60 +214,49 @@ Popup fontSize: 12 KeyNavigation.left: applyButton KeyNavigation.tab: applyButton - + onClicked: root.close() - + // Key navigation - Keys.onPressed: - (event) => - { - if(event.key === Qt.Key_Left || event.key === Qt.Key_Tab) - { - cancelButton.active = false; - applyButton.active = true; - } - else if(event.key === Qt.Key_Return) - { - root.close(); - } - } + Keys.onPressed: event => { + if (event.key === Qt.Key_Left + || event.key === Qt.Key_Tab) { + cancelButton.active = false + applyButton.active = true + } else if (event.key === Qt.Key_Return) { + root.close() + } + } } } } } } - - MouseArea - { + + MouseArea { anchors.fill: parent - + propagateComposedEvents: true // If clicking anywhere on the popup, stop the recordKeyBox - onClicked: - (mouse) => - { - recordKeyBox.stopRecording(); - applyButton.forceActiveFocus(); - mouse.accepted = false; - } + onClicked: mouse => { + recordKeyBox.stopRecording() + applyButton.forceActiveFocus() + mouse.accepted = false + } } - - QtObject - { + + QtObject { id: internal - - - function setPreselectedItem() - { - if(root.preselectedSettingIndex !== -1) - actionsComboBox.selectItem(root.preselectedSettingIndex); + + function setPreselectedItem() { + if (root.preselectedSettingIndex !== -1) + actionsComboBox.selectItem(root.preselectedSettingIndex) } - - function resetPopupData() - { - actionsComboBox.deselectCurrenItem(); - recordKeyBox.stopRecording(); - recordKeyBox.clear(); + + function resetPopupData() { + actionsComboBox.deselectCurrenItem() + recordKeyBox.stopRecording() + recordKeyBox.clear() } } -} \ No newline at end of file +} diff --git a/src/presentation/settings/shortcutsPage/MRecordKeyBox.qml b/src/presentation/settings/shortcutsPage/MRecordKeyBox.qml index bd6a9aa7b..6a208ff08 100644 --- a/src/presentation/settings/shortcutsPage/MRecordKeyBox.qml +++ b/src/presentation/settings/shortcutsPage/MRecordKeyBox.qml @@ -5,35 +5,29 @@ import CustomComponents import Librum.elements import Librum.style import Librum.icons +import Librum.fonts - -Item -{ +Item { id: root property var itemToRedirectFocusTo property bool recording: false property string originalSequence: "" property alias text: recordLabel.text - - - ColumnLayout - { + + ColumnLayout { id: layout anchors.fill: parent spacing: 2 - - - Label - { + + Label { id: header text: "Key" font.weight: Font.DemiBold - font.pointSize: 12 + font.pointSize: Fonts.bigSize color: Style.colorTitle } - - Rectangle - { + + Rectangle { id: button Layout.fillWidth: true Layout.preferredHeight: 38 @@ -42,39 +36,33 @@ Item border.color: root.recording ? Style.colorRecordActiveBorder : Style.colorButtonBorder border.width: root.recording ? 2 : 1 opacity: mouseArea.pressed ? 0.8 : 1 - - onActiveFocusChanged: activeFocus ? root.startRecording() : root.stopRecording() - - - KeySequenceRecorder - { + + onActiveFocusChanged: activeFocus ? root.startRecording( + ) : root.stopRecording() + + KeySequenceRecorder { id: keySequenceRecorder originalSequence: root.originalSequence - + onReturnPressed: stopRecording() } - - - RowLayout - { + + RowLayout { id: contentLayout anchors.fill: parent spacing: 4 - - - Label - { + + Label { id: recordLabel Layout.fillWidth: true Layout.leftMargin: 12 text: internal.getRecordText() - font.pointSize: 12 + font.pointSize: Fonts.bigSize color: Style.colorLightInputText elide: Text.ElideLeft } - - Image - { + + Image { id: microphoneIcon Layout.alignment: Qt.AlignRight Layout.rightMargin: 12 @@ -85,57 +73,47 @@ Item } } } - - MouseArea - { + + MouseArea { id: mouseArea anchors.fill: parent - - onClicked: - { - if(root.recording) - { - stopRecording(); - root.forceActiveFocus(); - return; + + onClicked: { + if (root.recording) { + stopRecording() + root.forceActiveFocus() + return } - - startRecording(); + + startRecording() } } - - QtObject - { + + QtObject { id: internal - - - function getRecordText() - { - if(keySequenceRecorder.currentSequence) - return keySequenceRecorder.currentSequence; - - if(keySequenceRecorder.originalSequence) - return keySequenceRecorder.originalSequence; - - return "Press to record"; + + function getRecordText() { + if (keySequenceRecorder.currentSequence) + return keySequenceRecorder.currentSequence + + if (keySequenceRecorder.originalSequence) + return keySequenceRecorder.originalSequence + + return "Press to record" } } - - - function clear() - { - keySequenceRecorder.resetSequence(); + + function clear() { + keySequenceRecorder.resetSequence() } - - function startRecording() - { - keySequenceRecorder.forceActiveFocus(); - root.recording = true; + + function startRecording() { + keySequenceRecorder.forceActiveFocus() + root.recording = true } - - function stopRecording() - { - itemToRedirectFocusTo.forceActiveFocus(); - root.recording = false; + + function stopRecording() { + itemToRedirectFocusTo.forceActiveFocus() + root.recording = false } -} \ No newline at end of file +} diff --git a/src/presentation/settings/shortcutsPage/MShortcutDelegate.qml b/src/presentation/settings/shortcutsPage/MShortcutDelegate.qml index b71b6d9e4..b4ae4075e 100644 --- a/src/presentation/settings/shortcutsPage/MShortcutDelegate.qml +++ b/src/presentation/settings/shortcutsPage/MShortcutDelegate.qml @@ -4,93 +4,83 @@ import QtQuick.Controls import CustomComponents import Librum.style import Librum.icons +import Librum.fonts - -Item -{ +Item { id: root required property int index required property string shortcut required property string value - + // The gap width between ACTION and SETTING. When the page gets smaller the gap decreases, // this needs to be signaled to the header because it also needs to reize its gap aswell signal gapWidthChanged(int spacing) signal editClicked(int index) signal deleteClicked(string shortcut) - + height: 52 width: listView.width - - - ColumnLayout - { + + ColumnLayout { id: layout anchors.fill: parent spacing: 0 - - - Rectangle - { + + Rectangle { id: topBorder Layout.fillWidth: true Layout.preferredHeight: 2 color: Style.colorLightSeparator } - - RowLayout - { + + RowLayout { id: contentRow Layout.fillWidth: true Layout.fillHeight: true spacing: 0 - - - Label - { + + Label { id: shortcutText Layout.leftMargin: 12 Layout.preferredWidth: 150 Layout.alignment: Qt.AlignVCenter text: root.shortcut color: Style.colorText - font.pointSize: 12 + font.pointSize: Fonts.bigSize font.weight: Font.DemiBold } - - Item - { + + Item { id: widthFiller Layout.fillWidth: true Layout.maximumWidth: 247 - + onWidthChanged: root.gapWidthChanged(width) } - - Label - { + + Label { id: shortcutValue Layout.preferredWidth: 172 Layout.alignment: Qt.AlignVCenter text: root.value.length > 0 ? root.value : "None" color: Style.colorText opacity: valueLabelArea.pressed ? 0.6 : 1 - font.pointSize: 12 + font.pointSize: Fonts.bigSize font.weight: Font.DemiBold - - MouseArea - { + + MouseArea { id: valueLabelArea anchors.fill: parent - - onClicked: root.editClicked(root.index); + + onClicked: root.editClicked(root.index) } } - - Item { Layout.fillWidth: true } - - MButton - { + + Item { + Layout.fillWidth: true + } + + MButton { id: editButton Layout.preferredHeight: 37 Layout.preferredWidth: 37 @@ -101,12 +91,11 @@ Item borderColorOnPressed: Style.colorButtonBorder imagePath: Icons.edit imageSize: 23 - + onClicked: root.editClicked(root.index) } - - MButton - { + + MButton { id: deleteButton Layout.preferredHeight: 37 Layout.preferredWidth: 37 @@ -118,9 +107,9 @@ Item borderColorOnPressed: Style.colorButtonBorder imagePath: Icons.trash imageSize: 21 - + onClicked: root.deleteClicked(root.shortcut) } } } -} \ No newline at end of file +} diff --git a/src/presentation/settings/shortcutsPage/MShortcutsPage.qml b/src/presentation/settings/shortcutsPage/MShortcutsPage.qml index 589b91938..2ed8fa69f 100644 --- a/src/presentation/settings/shortcutsPage/MShortcutsPage.qml +++ b/src/presentation/settings/shortcutsPage/MShortcutsPage.qml @@ -5,51 +5,48 @@ import CustomComponents import Librum.style import Librum.icons import Librum.controllers +import Librum.fonts - -Page -{ +Page { id: root topPadding: 64 horizontalPadding: 48 - background: Rectangle { anchors.fill: parent; color: Style.colorPageBackground } - - onWidthChanged: if(searchButton.opened) searchButton.close() - - - Shortcut - { + background: Rectangle { + anchors.fill: parent + color: Style.colorPageBackground + } + + onWidthChanged: if (searchButton.opened) + searchButton.close() + + Shortcut { sequence: StandardKey.New onActivated: addShortcutPopup.open() } - - - ColumnLayout - { + + ColumnLayout { id: layout anchors.fill: parent spacing: 0 - - - RowLayout - { + + RowLayout { id: pageTitleRow Layout.fillWidth: true spacing: 0 - - MTitle - { + + MTitle { id: pageTitle titleText: "Shortcuts" descriptionText: "Make your own experience" titleSize: 25 descriptionSize: 13.25 } - - Item { Layout.fillWidth: true } - - MButton - { + + Item { + Layout.fillWidth: true + } + + MButton { id: addShortcutButton Layout.preferredWidth: 164 Layout.preferredHeight: 38 @@ -62,17 +59,15 @@ Page fontWeight: Font.Bold fontSize: 13 imagePath: Icons.addWhite - - onClicked: - { - addShortcutPopup.preselectedSettingIndex = -1; - addShortcutPopup.open(); + + onClicked: { + addShortcutPopup.preselectedSettingIndex = -1 + addShortcutPopup.open() } } } - - Pane - { + + Pane { id: container Layout.fillWidth: true Layout.fillHeight: true @@ -82,82 +77,77 @@ Page leftPadding: internal.containerPadding padding: 0 clip: true - background: Rectangle - { + background: Rectangle { color: Style.colorContainerBackground border.color: Style.colorContainerBorder radius: 4 antialiasing: true } - - - ColumnLayout - { + + ColumnLayout { id: containerLayout anchors.fill: parent spacing: 0 - - + + /* The shortcuts header labeling the different columns */ - RowLayout - { + RowLayout { id: headerLayout Layout.fillWidth: true Layout.rightMargin: internal.containerPadding spacing: 0 - - - Label - { + + Label { id: actionsLabel Layout.leftMargin: 12 text: "ACTION" color: Style.colorLightText - font.pointSize: 10.25 + font.pointSize: Fonts.smallSize font.bold: true } - - Item - { + + Item { id: headerLabelSpacer Layout.preferredWidth: internal.verticalSettingSpacing + 90 } - - Label - { + + Label { id: shortcutsLabel text: "SHORTCUTS" color: Style.colorLightText - font.pointSize: 10.25 + font.pointSize: Fonts.smallSize font.bold: true } - - Item { Layout.fillWidth: true } - - MSearchButton - { + + Item { + Layout.fillWidth: true + } + + MSearchButton { id: searchButton implicitWidth: 34 implicitHeight: 32 imageSize: 14 // Make sure that the searchButton does not overlap other items - expansionWidth: (headerLabelSpacer.width <= 445 ? headerLabelSpacer.width : 445) - - onTriggered: (query) => SettingsController.shortcutsModel.filterString = query - + expansionWidth: (headerLabelSpacer.width + <= 445 ? headerLabelSpacer.width : 445) + + onTriggered: query => SettingsController.shortcutsModel.filterString = query + // Reset filter when closing or leaving the page Component.onDestruction: SettingsController.shortcutsModel.filterString = "" - onOpenedChanged: if(!opened) SettingsController.shortcutsModel.filterString = "" + onOpenedChanged: if (!opened) + SettingsController.shortcutsModel.filterString = "" } } - + + /* The actual shortcuts view */ - ScrollView - { + ScrollView { id: shortcutScrollArea Layout.topMargin: 20 Layout.rightMargin: 20 @@ -165,10 +155,8 @@ Page Layout.fillWidth: true Layout.fillHeight: true ScrollBar.horizontal.policy: ScrollBar.AlwaysOff - - - ListView - { + + ListView { id: listView anchors.rightMargin: 28 anchors.fill: parent @@ -177,47 +165,45 @@ Page flickDeceleration: 15000 maximumFlickVelocity: 1600 boundsBehavior: Flickable.StopAtBounds - delegate: MShortcutDelegate - { - onGapWidthChanged: (spacing) => internal.verticalSettingSpacing = spacing - onEditClicked: - (index) => - { - addShortcutPopup.preselectedSettingIndex = index; - addShortcutPopup.open(); - } - - onDeleteClicked: (shortcut) => SettingsController.setSetting(shortcut, "", SettingGroups.Shortcuts); + delegate: MShortcutDelegate { + onGapWidthChanged: spacing => internal.verticalSettingSpacing = spacing + onEditClicked: index => { + addShortcutPopup.preselectedSettingIndex = index + addShortcutPopup.open() + } + + onDeleteClicked: shortcut => SettingsController.setSetting( + shortcut, "", + SettingGroups.Shortcuts) } - - MouseArea - { + + MouseArea { id: mouseEventInterceptor anchors.fill: parent propagateComposedEvents: true - + // Propagate click/pressed signals to lower MouseAreas - onWheel: (wheel) => wheel.accepted = false - onClicked: (mouse) => mouse.accepted = false - onPressed: (mouse) => mouse.accepted = false + onWheel: wheel => wheel.accepted = false + onClicked: mouse => mouse.accepted = false + onPressed: mouse => mouse.accepted = false } } } } } } - - MAddShortcutPopup - { + + MAddShortcutPopup { id: addShortcutPopup - x: Math.round(root.width / 2 - implicitWidth / 2 - settingsSidebar.width / 2 - sidebar.width / 2 - root.horizontalPadding) + x: Math.round(root.width / 2 - implicitWidth / 2 - settingsSidebar.width + / 2 - sidebar.width / 2 - root.horizontalPadding) y: Math.round(root.height / 2 - implicitHeight / 2 - 115) - - onApplied: (shortcut, value) => SettingsController.setSetting(shortcut, value, SettingGroups.Shortcuts) + + onApplied: (shortcut, value) => SettingsController.setSetting( + shortcut, value, SettingGroups.Shortcuts) } - - QtObject - { + + QtObject { id: internal property int containerPadding: 48 property int verticalSettingSpacing: 340 diff --git a/src/presentation/settings/updatesPage/MUpToDate.qml b/src/presentation/settings/updatesPage/MUpToDate.qml index 61bab0b26..aed654ff5 100644 --- a/src/presentation/settings/updatesPage/MUpToDate.qml +++ b/src/presentation/settings/updatesPage/MUpToDate.qml @@ -6,80 +6,69 @@ import Librum.style import Librum.icons import Librum.elements import Librum.controllers +import Librum.fonts - -Item -{ +Item { id: root height: content.height - - - Pane - { + + Pane { id: content anchors.left: parent.left anchors.right: parent.right horizontalPadding: 40 topPadding: 32 bottomPadding: 42 - background: Rectangle - { + background: Rectangle { color: Style.colorContainerBackground border.color: Style.colorContainerBorder radius: 4 antialiasing: true } - - - ColumnLayout - { + + ColumnLayout { id: layout width: parent.width spacing: 0 - - Label - { + + Label { id: newUpdateTitle Layout.fillWidth: true text: "You are up to date!" wrapMode: Text.WordWrap color: Style.colorText - font.pointSize: 23 + font.pointSize: Fonts.hugeTitleSize font.weight: Font.Bold } - - Label - { + + Label { Layout.fillWidth: true Layout.topMargin: 7 text: "Make sure to check for updates regularly, so you dont miss out on any great features." wrapMode: Text.WordWrap color: Style.colorLightText - font.pointSize: 15 + font.pointSize: Fonts.modestTitleSize } - - Label - { + + Label { Layout.fillWidth: true Layout.topMargin: 24 text: "Your current version is:" wrapMode: Text.WordWrap color: Style.colorLightText - font.pointSize: 14.5 + font.pointSize: Fonts.hugeSize } - - Label - { + + Label { Layout.fillWidth: true text: AppInfoController.currentVersion wrapMode: Text.WordWrap color: Style.colorBasePurple - font.pointSize: 14.2 + font.pointSize: Fonts.smallTitleSize font.bold: true } - - Image - { + + Image { id: checkIllustration z: -1 Layout.topMargin: 8 @@ -88,38 +77,35 @@ Item sourceSize.width: 320 fillMode: Image.PreserveAspectFit } - - - Label - { + + Label { Layout.fillWidth: true Layout.topMargin: 32 text: "See our latest changes at:" wrapMode: Text.WordWrap color: Style.colorLightText - font.pointSize: 13.5 + font.pointSize: 14 } - - Label - { + + Label { Layout.preferredWidth: implicitWidth Layout.minimumWidth: implicitWidth text: AppInfoController.newsWebsite wrapMode: Text.WordWrap font.underline: true color: Style.colorBasePurple - font.pointSize: 13.5 + font.pointSize: 14 opacity: newsWebsiteLinkArea.pressed ? 0.8 : 1 - - MouseArea - { + + MouseArea { id: newsWebsiteLinkArea anchors.fill: parent cursorShape: Qt.PointingHandCursor - - onClicked: Qt.openUrlExternally(AppInfoController.newsWebsite) + + onClicked: Qt.openUrlExternally( + AppInfoController.newsWebsite) } } } } -} \ No newline at end of file +} diff --git a/src/presentation/settings/updatesPage/MUpdatesAvailable.qml b/src/presentation/settings/updatesPage/MUpdatesAvailable.qml index 2c4021754..0c566391c 100644 --- a/src/presentation/settings/updatesPage/MUpdatesAvailable.qml +++ b/src/presentation/settings/updatesPage/MUpdatesAvailable.qml @@ -6,6 +6,7 @@ import Librum.style import Librum.icons import Librum.elements import Librum.controllers +import Librum.fonts Item { id: root @@ -49,7 +50,7 @@ Item { text: "A new update is available!" wrapMode: Text.WordWrap color: Style.colorText - font.pointSize: 23 + font.pointSize: Fonts.hugeTitleSize font.weight: Font.Bold } @@ -59,7 +60,7 @@ Item { text: "Download the new version to get great new improvements." wrapMode: Text.WordWrap color: Style.colorLightText - font.pointSize: 15 + font.pointSize: Fonts.modestTitleSize } Label { @@ -68,7 +69,7 @@ Item { text: "The newest version is:" wrapMode: Text.WordWrap color: Style.colorLightText - font.pointSize: 14.5 + font.pointSize: Fonts.hugeSize } Label { @@ -76,7 +77,7 @@ Item { text: AppInfoController.newestVersion wrapMode: Text.WordWrap color: Style.colorLightText - font.pointSize: 14.2 + font.pointSize: Fonts.smallTitleSize font.bold: true } @@ -112,7 +113,7 @@ Item { text: "See the exact changes on our website at:" wrapMode: Text.WordWrap color: Style.colorLightText - font.pointSize: 13.5 + font.pointSize: 14 } Label { @@ -122,7 +123,7 @@ Item { wrapMode: Text.WordWrap font.underline: true color: Style.colorBasePurple - font.pointSize: 13.5 + font.pointSize: 14 opacity: newsWebsiteLinkArea.pressed ? 0.8 : 1 MouseArea { diff --git a/src/presentation/settings/updatesPage/MWindowsUpdatingPopup.qml b/src/presentation/settings/updatesPage/MWindowsUpdatingPopup.qml index bf9b2b011..511254466 100644 --- a/src/presentation/settings/updatesPage/MWindowsUpdatingPopup.qml +++ b/src/presentation/settings/updatesPage/MWindowsUpdatingPopup.qml @@ -68,14 +68,14 @@ Popup Layout.bottomMargin: 100 text: "Updating" font.weight: Font.Bold - font.pointSize: 22 + font.pointSize: Fonts.largeTitleSize color: Style.colorBasePurple } Label { text: "Downloading..." - font.pointSize: 13 + font.pointSize: Fonts.hugeSize color: Style.colorText } diff --git a/src/presentation/sidebar/MProfileBox.qml b/src/presentation/sidebar/MProfileBox.qml index 35b5938b2..61740feb2 100644 --- a/src/presentation/sidebar/MProfileBox.qml +++ b/src/presentation/sidebar/MProfileBox.qml @@ -5,38 +5,33 @@ import Librum.elements import Librum.style import Librum.icons import Librum.controllers +import Librum.fonts - -Item -{ +Item { id: root property int currentSidebarWidth property int closedSidebarWidth property int arrowRotation signal clicked - + implicitWidth: root.closedSidebarWidth implicitHeight: 60 - - - Pane - { + + Pane { id: container padding: 0 anchors.fill: parent - background: Rectangle { color: "transparent" } - - - RowLayout - { + background: Rectangle { + color: "transparent" + } + + RowLayout { // Make the button go over the sidebar border width: root.currentSidebarWidth + expandButton.width / 2.2 height: parent.height spacing: 0 - - - Rectangle - { + + Rectangle { id: profilePicture Layout.preferredWidth: 36 Layout.preferredHeight: 36 @@ -45,22 +40,21 @@ Item clip: true radius: width antialiasing: true - color: UserController.profilePicture.length === 0 ? Style.colorDefaultProfilePicture : "transparent" - - - Label - { + color: UserController.profilePicture.length + === 0 ? Style.colorDefaultProfilePicture : "transparent" + + Label { id: initials anchors.centerIn: parent visible: UserController.profilePicture.length === 0 - text: UserController.firstName[0].toUpperCase() + UserController.lastName[0].toUpperCase() - font.pointSize: 12 + text: UserController.firstName[0].toUpperCase( + ) + UserController.lastName[0].toUpperCase() + font.pointSize: Fonts.bigSize font.bold: true color: Style.colorFocusedButtonText } - - Image - { + + Image { id: profileImage visible: UserController.profilePicture.length > 0 anchors.centerIn: parent @@ -70,20 +64,19 @@ Item fillMode: Image.PreserveAspectFit cache: false } - - MouseArea - { + + MouseArea { anchors.fill: parent - + onClicked: root.clicked() } } - + + /* Button to expand the sidebar */ - Rectangle - { + Rectangle { id: expandButton Layout.preferredWidth: 23 Layout.preferredHeight: 24 @@ -93,10 +86,8 @@ Item radius: 2 border.width: 1 border.color: Style.colorButtonBorder - - - Image - { + + Image { id: rightArrowImage rotation: root.arrowRotation sourceSize.width: 20 @@ -105,27 +96,23 @@ Item source: Icons.arrowheadNextIcon cache: false } - - MouseArea - { + + MouseArea { id: expandButtonMouseArea anchors.fill: parent - - onClicked: - { - if(SidebarState.currentState === SidebarState.Opened) - closeSidebar(); + + onClicked: { + if (SidebarState.currentState === SidebarState.Opened) + closeSidebar() else - openSidebar(); + openSidebar() } } } } } - - - function giveFocus() - { - root.forceActiveFocus(); + + function giveFocus() { + root.forceActiveFocus() } } diff --git a/src/presentation/sidebar/MProfilePopupItem.qml b/src/presentation/sidebar/MProfilePopupItem.qml index 895b1049e..54448a880 100644 --- a/src/presentation/sidebar/MProfilePopupItem.qml +++ b/src/presentation/sidebar/MProfilePopupItem.qml @@ -2,53 +2,49 @@ import QtQuick import QtQuick.Layouts import QtQuick.Controls import Librum.style +import Librum.fonts - -Item -{ +Item { id: root property string image property int imageWidth: 15 property string text property int textSpacing: 5 signal clicked - + implicitWidth: 125 implicitHeight: layout.implicitHeight - - - RowLayout - { + + RowLayout { id: layout anchors.fill: parent spacing: root.textSpacing opacity: mouseArea.pressed ? 0.8 : 1 - - Image - { + + Image { id: icon source: root.image fillMode: Image.PreserveAspectFit sourceSize.width: root.imageWidth } - - Label - { + + Label { id: labels text: root.text color: Style.colorLightText - font.pointSize: 10.5 + font.pointSize: Fonts.mediumSize font.weight: Font.Medium } - - Item { Layout.fillWidth: true } + + Item { + Layout.fillWidth: true + } } - - MouseArea - { + + MouseArea { id: mouseArea anchors.fill: parent - + onClicked: root.clicked() } -} \ No newline at end of file +} diff --git a/src/presentation/sidebar/MSidebar.qml b/src/presentation/sidebar/MSidebar.qml index 92736a4ee..14ba15d9f 100644 --- a/src/presentation/sidebar/MSidebar.qml +++ b/src/presentation/sidebar/MSidebar.qml @@ -7,9 +7,9 @@ import Librum.elements import Librum.style import Librum.icons import Librum.controllers +import Librum.fonts -Item -{ +Item { id: root property alias freeBooksItem: freeBooksItem property alias homeItem: homeItem @@ -18,133 +18,114 @@ Item property alias settingsItem: settingsItem property MSidebarItem currentItem: internal.defaultItem property bool open: false - + implicitWidth: internal.closedWidth implicitHeight: Window.height - - + + /* Shortcuts to switch between pages */ - Shortcut - { + Shortcut { sequence: "Ctrl+O" - onActivated: SidebarState.currentState === SidebarState.Opened ? root.closeSidebar() : root.openSidebar() + onActivated: SidebarState.currentState + === SidebarState.Opened ? root.closeSidebar( + ) : root.openSidebar() } - Shortcut - { + Shortcut { sequence: "Ctrl+1" onActivated: loadPage(freeBooksPage, root.freeBooksItem) } - Shortcut - { + Shortcut { sequence: "Ctrl+2" onActivated: loadPage(homePage, root.homeItem) } - Shortcut - { + Shortcut { sequence: "Ctrl+3" onActivated: loadPage(statisticsPage, root.statisticsItem) } - Shortcut - { + Shortcut { sequence: "Ctrl+4" onActivated: loadPage(addOnsPage, root.addOnsItem) } - Shortcut - { + Shortcut { sequence: "Ctrl+5" onActivated: loadPage(settings, root.settingsItem) } - - - Pane - { + + Pane { id: container anchors.fill: parent padding: 0 - background: RowLayout - { + background: RowLayout { spacing: 0 - - Rectangle - { + + Rectangle { Layout.fillWidth: true Layout.fillHeight: true color: Style.colorContainerBackground } - - Rectangle - { - Layout.preferredWidth: 1 + + Rectangle { + Layout.preferredWidth: 1 Layout.fillHeight: true color: Style.colorContainerBorder } } - - - MFlickWrapper - { + + MFlickWrapper { id: flickWrapper anchors.fill: parent contentHeight: layout.implicitHeight - - - ColumnLayout - { + + ColumnLayout { id: layout width: parent.width height: container.height spacing: 0 - - RowLayout - { + + RowLayout { id: logo Layout.topMargin: 14 Layout.leftMargin: 14 spacing: 20 - - MLogo - { + + MLogo { id: logoIcon Layout.preferredWidth: 44 Layout.preferredHeight: 44 } - - Label - { + + Label { id: logoLabel visible: false text: AppInfoController.applicationName font.bold: true - font.pointSize: 16 + font.pointSize: Fonts.baseTitleSize color: Style.colorTitle } } - - Rectangle - { + + Rectangle { id: topSeparator Layout.fillWidth: true Layout.preferredHeight: 2 Layout.topMargin: 15 color: Style.colorSeparator } - - MSidebarItem - { + + MSidebarItem { id: freeBooksItem Layout.topMargin: 16 Layout.leftMargin: 10 imageWidth: 31 image: Icons.sidebarDownload text: "Free books" - + onClicked: loadPage(freeBooksPage, root.freeBooksItem) - } - - Rectangle - { + } + + Rectangle { id: smallSeperator1 Layout.preferredWidth: parent.width * 0.61 Layout.preferredHeight: 2 @@ -152,9 +133,8 @@ Item Layout.topMargin: 16 color: Style.colorSeparator } - - MSidebarItem - { + + MSidebarItem { id: homeItem Layout.topMargin: 15 Layout.leftMargin: 10 @@ -163,24 +143,22 @@ Item imageHeight: 28 image: Icons.sidebarHome text: "Home" - + onClicked: loadPage(homePage, root.homeItem) } - - MSidebarItem - { + + MSidebarItem { id: statisticsItem Layout.topMargin: 13 Layout.leftMargin: 10 imageWidth: 28 image: Icons.sidebarPieChart text: "Statistics" - + onClicked: loadPage(statisticsPage, root.statisticsItem) } - - Rectangle - { + + Rectangle { id: smallSeperator2 Layout.preferredWidth: parent.width * 0.61 Layout.preferredHeight: 2 @@ -188,130 +166,115 @@ Item Layout.topMargin: 15 color: Style.colorSeparator } - - MSidebarItem - { + + MSidebarItem { id: addOnsItem Layout.topMargin: 13 Layout.leftMargin: 10 imageWidth: 30 image: Icons.sidebarAddOns text: "Add-ons" - + onClicked: loadPage(addOnsPage, root.addOnsItem) } - - MSidebarItem - { + + MSidebarItem { id: settingsItem Layout.topMargin: 13 Layout.leftMargin: 10 imageWidth: 36 image: Icons.sidebarSettings text: "Settings" - + onClicked: loadPage(settings, root.settingsItem) } - - Item - { + + Item { id: heightFiller Layout.fillHeight: true Layout.minimumHeight: 30 } - - Rectangle - { + + Rectangle { id: bottomSeparator Layout.fillWidth: true Layout.preferredHeight: 2 color: Style.colorSeparator } - - + + /* Box which contains the profile picture */ - MProfileBox - { + MProfileBox { id: profileBox currentSidebarWidth: root.width closedSidebarWidth: internal.closedWidth Layout.alignment: Qt.AlignBottom Layout.topMargin: 2 - - onClicked: - { - if(profilePopup.opened) - profilePopup.close(); + + onClicked: { + if (profilePopup.opened) + profilePopup.close() else - profilePopup.open(); + profilePopup.open() } } - + + /* Popup which is spawned after clicking the profile picture */ - MProfilePopup - { + MProfilePopup { id: profilePopup x: 12 y: profileBox.y - implicitHeight + 6 } } - } - - MSidebarAnimations - { + + MSidebarAnimations { id: animations sidebar: root closedSidebarWidth: internal.closedWidth openedSidebarWidth: internal.openedWidth } } - - QtObject - { + + QtObject { id: internal property int closedWidth: 72 property int openedWidth: 232 property bool isOpened: false - + property MSidebarItem defaultItem: homeItem } - - - function changeSelectedItem(newItem) - { - root.currentItem.selected = false; - root.currentItem = newItem; - root.currentItem.selected = true; + + function changeSelectedItem(newItem) { + root.currentItem.selected = false + root.currentItem = newItem + root.currentItem.selected = true + } + + function openSidebar() { + animations.openAnimation.start() + root.currentItem.openAnimation.start() + root.open = true } - - function openSidebar() - { - animations.openAnimation.start(); - root.currentItem.openAnimation.start(); - root.open = true; + + function closeSidebar() { + animations.closeAnimation.start() + root.currentItem.closeAnimation.start() + root.open = false } - - function closeSidebar() - { - animations.closeAnimation.start(); - root.currentItem.closeAnimation.start(); - root.open = false; + + function resetSidebar() { + closeSidebar() + changeSelectedItem(internal.defaultItem) + root.open = false } - - function resetSidebar() - { - closeSidebar(); - changeSelectedItem(internal.defaultItem); - root.open = false; + + function giveFocus() { + root.forceActiveFocus() } - - function giveFocus() - { - root.forceActiveFocus(); - } -} \ No newline at end of file +} diff --git a/src/presentation/sidebar/MSidebarItem.qml b/src/presentation/sidebar/MSidebarItem.qml index 7dd44499a..2f546d0bc 100644 --- a/src/presentation/sidebar/MSidebarItem.qml +++ b/src/presentation/sidebar/MSidebarItem.qml @@ -2,10 +2,9 @@ import QtQuick import QtQuick.Controls import QtQuick.Layouts import Librum.style +import Librum.fonts - -Item -{ +Item { id: root property bool selected: false property string text @@ -17,77 +16,67 @@ Item property alias closeAnimation: closeAnim property alias labelVisibility: label.visible property real textOpacity: 0 - signal clicked() - + signal clicked + implicitWidth: (labelVisibility ? internal.openedWidth : internal.closedWidth) implicitHeight: 44 - - - Pane - { + + Pane { id: container anchors.fill: parent padding: 0 - background: Rectangle - { + background: Rectangle { color: root.selected ? Style.colorLightHighlight : "transparent" radius: 4 } - - - RowLayout - { + + RowLayout { id: layout height: parent.height spacing: 0 - + + /* Needs a container because the actual item is bigger than just the icon */ - Rectangle - { + Rectangle { id: iconContainer Layout.preferredWidth: 52 Layout.preferredHeight: 44 radius: 4 color: "transparent" - - Image - { + + Image { id: icon sourceSize.width: root.imageWidth sourceSize.height: root.imageHeight fillMode: root.preserveImageFit ? Image.PreserveAspectFit : Image.Stretch anchors.centerIn: parent source: root.image - antialiasing: false + antialiasing: false } } - - Label - { + + Label { id: label Layout.leftMargin: 10 visible: false opacity: root.textOpacity text: root.text font.weight: Font.Medium - font.pointSize: 13 + font.pointSize: Fonts.hugeSize color: Style.colorLightText } } } - - MouseArea - { + + MouseArea { anchors.fill: parent - - onClicked: root.clicked(); + + onClicked: root.clicked() } - - - PropertyAnimation - { + + PropertyAnimation { id: openAnim target: container property: "width" @@ -95,9 +84,8 @@ Item duration: 250 easing.type: Easing.InOutQuad } - - PropertyAnimation - { + + PropertyAnimation { id: closeAnim target: container property: "width" @@ -105,17 +93,14 @@ Item duration: 250 easing.type: Easing.InOutQuad } - - QtObject - { + + QtObject { id: internal property int closedWidth: 52 property int openedWidth: 177 } - - - function giveFocus() - { - root.forceActiveFocus(); - } -} \ No newline at end of file + + function giveFocus() { + root.forceActiveFocus() + } +} diff --git a/src/presentation/statisticsPage/MStatisticsPage.qml b/src/presentation/statisticsPage/MStatisticsPage.qml index eaa62fec3..ec3a81a5e 100644 --- a/src/presentation/statisticsPage/MStatisticsPage.qml +++ b/src/presentation/statisticsPage/MStatisticsPage.qml @@ -2,34 +2,37 @@ import QtQuick import QtQuick.Controls import QtQuick.Layouts import Librum.style +import Librum.fonts -Page -{ +Page { id: root - background: Rectangle { color: Style.colorPageBackground } - - Item { id: topSpacer; height: parent.height / 2.3 } - - Label - { + background: Rectangle { + color: Style.colorPageBackground + } + + Item { + id: topSpacer + height: parent.height / 2.3 + } + + Label { id: title anchors.horizontalCenter: parent.horizontalCenter anchors.top: topSpacer.bottom text: "Statistics Page" color: Style.colorTitle - font.pointSize: 22 + font.pointSize: Fonts.largeTitleSize font.bold: true } - - Label - { + + Label { id: description anchors.horizontalCenter: parent.horizontalCenter anchors.top: title.bottom anchors.topMargin: 6 text: "Currently in Development" color: Style.colorPageSubtitle - font.pointSize: 16 + font.pointSize: Fonts.baseTitleSize font.bold: true } -} \ No newline at end of file +}