diff --git a/TODO.md b/TODO.md index 9f286ed0..ea14e9a3 100644 --- a/TODO.md +++ b/TODO.md @@ -1,10 +1,6 @@ - Refactoring - Banners - - Theming - - File format - - Have a default background - - Composer - Room Sidepane - Hide when window too small @@ -84,6 +80,7 @@ - Spinner when loading past room events or images - Theming + - File format - Distribute fonts - icons.preferredPack: accept multiple values - Find icon packs in user data dir diff --git a/src/qml/UI.qml b/src/qml/UI.qml index 2c348a45..f0e66ffb 100644 --- a/src/qml/UI.qml +++ b/src/qml/UI.qml @@ -7,7 +7,8 @@ import "SidePane" Rectangle { id: mainUI - color: theme.ui.background + color: "transparent" + Component.onCompleted: window.mainUI = mainUI property alias shortcuts: shortcuts @@ -43,6 +44,20 @@ Rectangle { asynchronous: false } + Rectangle { + id: mainUIGradient + anchors.fill: parent + scale: Math.max( + 1.6, Math.ceil(parent.parent.width / parent.parent.height) + ) + rotation: theme.ui.gradientRotation + gradient: Gradient { + GradientStop { position: 0.0; color: theme.ui.gradientLeft } + GradientStop { position: 1.0; color: theme.ui.gradientRight } + } + } + + HSplitView { id: uiSplitView anchors.fill: parent diff --git a/src/themes/Default.qpl b/src/themes/Default.qpl index a73be18f..4961a3dc 100644 --- a/src/themes/Default.qpl +++ b/src/themes/Default.qpl @@ -37,7 +37,7 @@ fontFamily: string mono: "Hack" colors: - int hue: 260 + int hue: 264 int saturation: 40 real intensity: 1.0 real opacity: 1.0 @@ -192,9 +192,21 @@ controls: // Special UI parts ui: - // Supported: local file path or web URL + // Image can be an URL or local file path. + // If not specified, the gradient will be shown instead. url image: "" - color background: colors.weakBackground + + int gradientRotation: 45 * 3 + color gradientRight: + Utils.hsluv(colors.hue - 50, 100, colors.intensity * 8, colors.opacity) + color gradientLeft: + Utils.hsluv(colors.hue + 20, 31, colors.intensity * 22, colors.opacity) + + // To have a solid color instead, + // set gradientLeft and gradientRight to the same value. + // color gradientLeft: colors.weakBackground + // color gradientRight: colors.weakBackground + sidePane: @@ -257,13 +269,13 @@ chat: int radius: theme.radius color background: colors.strongBackground color ownBackground: hsluv( - colors.hue, colors.saturation + 30, colors.intensity * 6, opacity + colors.hue, colors.saturation + 25, colors.intensity * 6, opacity ) - color body: colors.text - color date: colors.dimText + color body: colors.text + color date: colors.dimText - color greenText: hsluv(135, colors.saturation * 2.25, 80) + color greenText: hsluv(135, colors.saturation * 2.25, 75) color link: colors.link color code: colors.code