diff options
| -rw-r--r-- | Button/NavLink.ui.qml | 21 | ||||
| -rw-r--r-- | Button/NavLink/TabsLine.ui.qml | 19 | ||||
| -rw-r--r-- | Course/Detail/Classic/Content/Main.ui.qml | 18 | ||||
| -rw-r--r-- | Eduport.qrc | 3 | ||||
| -rw-r--r-- | Home/Default.ui.qml | 3 | ||||
| -rw-r--r-- | TabItem.ui.qml | 23 | ||||
| -rw-r--r-- | imports/Bootstrap/Bootstrap.qml | 15 |
7 files changed, 55 insertions, 47 deletions
diff --git a/Button/NavLink.ui.qml b/Button/NavLink.ui.qml new file mode 100644 index 0000000..45bffe3 --- /dev/null +++ b/Button/NavLink.ui.qml @@ -0,0 +1,21 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import Bootstrap 5.3 + +Btn { + id: button + font: Bootstrap.bodyFont + contentItem: Text { + text: modelData + font: button.font + color: checked + ? Bootstrap.navPillsLinkActiveColor : Bootstrap.primary + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + } + background: Rectangle { + color: checked + ? Bootstrap.navPillsLinkActiveBg : Bootstrap.btnBg + radius: Bootstrap.navPillsBorderRadius + } +} diff --git a/Button/NavLink/TabsLine.ui.qml b/Button/NavLink/TabsLine.ui.qml new file mode 100644 index 0000000..0d17f21 --- /dev/null +++ b/Button/NavLink/TabsLine.ui.qml @@ -0,0 +1,19 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import Bootstrap 5.3 +import ".." + +NavLink { + id: button + contentItem: Text { + text: modelData + font: button.font + color: Bootstrap.primary + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + } + background: Rectangle { + color: checked ? "#1a066ac9" : Bootstrap.btnBg + radius: Bootstrap.navPillsBorderRadius + } +} diff --git a/Course/Detail/Classic/Content/Main.ui.qml b/Course/Detail/Classic/Content/Main.ui.qml index a1071e7..91cbce3 100644 --- a/Course/Detail/Classic/Content/Main.ui.qml +++ b/Course/Detail/Classic/Content/Main.ui.qml @@ -3,8 +3,8 @@ import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 import QtGraphicalEffects 1.15 import Bootstrap 5.3 -import "../../../.." import "../../../../Label" as Lbl +import "../../../../Button/NavLink" as NavLink import "Main/TabContents" as MainTabContents ColumnLayout { @@ -58,21 +58,7 @@ ColumnLayout { model: ["Overview", "Curriculum", "Instructor", "Reviews", "FAQs", "Comment"] - delegate: TabItem { - contentItem: Text { - text: modelData - color: "#066ac9" - font { - family: Bootstrap.bodyFont.family - weight: Bootstrap.bodyFont.weight - pointSize: Bootstrap.bodyFont.pointSize - } - } - background: Rectangle { - color: index == currentIndex ? "#1a0fffff" : "transparent" - radius: 5.2 - } - } + delegate: NavLink.TabsLine {} } StackLayout { diff --git a/Eduport.qrc b/Eduport.qrc index d7c38f0..3b3f6c5 100644 --- a/Eduport.qrc +++ b/Eduport.qrc @@ -19,7 +19,8 @@ <file>Button/Btn.ui.qml</file> <file>Button/Primary.ui.qml</file> <file>Button/Success.ui.qml</file> + <file>Button/NavLink.ui.qml</file> + <file>Button/NavLink/TabsLine.ui.qml</file> <file>Header.ui.qml</file> - <file>TabItem.ui.qml</file> </qresource> </RCC> diff --git a/Home/Default.ui.qml b/Home/Default.ui.qml index 5d1a8ee..999b74d 100644 --- a/Home/Default.ui.qml +++ b/Home/Default.ui.qml @@ -6,6 +6,7 @@ import Bootstrap 5.3 import Eduport 1.4 import ".." import "../Label" as Lbl +import "../Button" as Btn import "Default" as Default Flickable { @@ -234,7 +235,7 @@ Flickable { model: ["Web Design", "Development", "Graphic Design", "Marketing", "Finance"] - delegate: TabItem {} + delegate: Btn.NavLink {} } } diff --git a/TabItem.ui.qml b/TabItem.ui.qml deleted file mode 100644 index 82c8c7d..0000000 --- a/TabItem.ui.qml +++ /dev/null @@ -1,23 +0,0 @@ -import QtQuick 2.15 -import QtQuick.Controls 2.15 -import Bootstrap 5.3 - -Button { - property int currentIndex: 0 - - height: 38 - horizontalPadding: 16 - verticalPadding: 8 - contentItem: Text { - text: modelData - color: index == currentIndex ? "white" : "#066ac9" - font { - family: Bootstrap.bodyFont.family - pointSize: Bootstrap.bodyFont.pointSize - } - } - background: Rectangle { - color: index == currentIndex ? "#066ac9" : "transparent" - radius: 5.2 - } -} diff --git a/imports/Bootstrap/Bootstrap.qml b/imports/Bootstrap/Bootstrap.qml index 827b7a2..845e4f1 100644 --- a/imports/Bootstrap/Bootstrap.qml +++ b/imports/Bootstrap/Bootstrap.qml @@ -2,6 +2,7 @@ pragma Singleton import QtQuick 2.15 QtObject { + readonly property color primary: "#066ac9" readonly property real badgeFontSize: 13.6 readonly property real btnPaddingX: 16 @@ -18,20 +19,22 @@ QtObject { readonly property real btnBorderRadius: 5.2 readonly property real btnLgFontSize: 16 readonly property real btnLgBorderRadius: 8 - readonly property color btnPrimaryBg: "#066ac9" - readonly property color btnPrimaryBorderColor: btnPrimaryBg + readonly property color btnPrimaryBg: primary + readonly property color btnPrimaryBorderColor: primary readonly property color btnPrimaryActiveBg: "#0555a1" readonly property color btnPrimaryActiveBorderColor: "#055097" readonly property color btnPrimaryDisabledBg: "#a6066ac9" - readonly property color btnPrimaryDisabledBorderColor - : btnPrimaryDisabledBg + readonly property color btnPrimaryDisabledBorderColor: btnPrimaryDisabledBg readonly property color btnSuccessBg: "#0cbc87" readonly property color btnSuccessBorderColor: btnSuccessBg readonly property color btnSuccessActiveBg: "#0a966c" readonly property color btnSuccessActiveBorderColor: "#098d65" readonly property color btnSuccessDisabledBg: "#a60cbc87" - readonly property color btnSuccessDisabledBorderColor - : btnSuccessDisabledBg + readonly property color btnSuccessDisabledBorderColor: btnSuccessDisabledBg + + readonly property real navPillsBorderRadius: btnBorderRadius + readonly property color navPillsLinkActiveColor: btnColor + readonly property color navPillsLinkActiveBg: primary readonly property font bodyFont: Qt.font({ family: haveRoboto ? "Roboto" : regular.name, |