da4a5ab5cd
- Refactor everything about HBox, and adapt all the pages and popups that used it - Replace HTabContainer by HTabbedBox - Make boxes swippable - Make esc presses in boxes click the cancel button - Make all boxes and popups scrollable when needed - Replace generic apply button icons in popups - Fix tab focus for error and invite popups - Rework (still WIP) the account settings page: - Use the standard tabbed design of other pages - Ditch the horizontal profile layout, hacky and impossible to extend - Add real-time coloring for the display name field - Implement a device list in account settings (Sessions, still WIP)
501 lines
15 KiB
QML
501 lines
15 KiB
QML
// vim: syntax=qml
|
|
|
|
// Base variables
|
|
|
|
real uiScale: 1.0
|
|
|
|
int minimumSupportedWidth: 240 * uiScale
|
|
int minimumSupportedHeight: 120 * uiScale
|
|
int contentIsWideAbove: 472 * uiScale
|
|
|
|
int baseElementsHeight: 36 * uiScale
|
|
int spacing: 12 * uiScale
|
|
int radius: 4 * uiScale
|
|
int animationDuration: 100
|
|
real loadingElementsOpacity: 0.8
|
|
real disabledElementsOpacity: 0.3
|
|
|
|
|
|
fontSize:
|
|
int smaller: 13 * uiScale
|
|
int small: 13 * uiScale
|
|
int normal: 16 * uiScale
|
|
int big: 22 * uiScale
|
|
int bigger: 32 * uiScale
|
|
int biggest: 48 * uiScale
|
|
|
|
fontFamily:
|
|
string sans: "Roboto"
|
|
string mono: "Hack"
|
|
|
|
colors:
|
|
int hue: 240
|
|
|
|
real intensity: 1.0
|
|
real coloredTextIntensity: intensity * 71
|
|
real dimColoredTextIntensity: intensity * 60
|
|
|
|
int saturation: 60
|
|
int bgSaturation: saturation / 1.5
|
|
int coloredTextSaturation: saturation + 20
|
|
int dimColoredTextSaturation: saturation
|
|
|
|
real opacity: 0.7
|
|
|
|
color weakBackground: hsluv(hue, bgSaturation, intensity * 2.5, opacity)
|
|
color mediumBackground: hsluv(hue, bgSaturation, intensity * 7, opacity)
|
|
color strongBackground: hsluv(hue, bgSaturation * 2, intensity, opacity)
|
|
|
|
color accentBackground: hsluv(hue, saturation, intensity * 42, 1)
|
|
color accentElement: hsluv(hue, saturation * 1.5, intensity * 52, 1)
|
|
color strongAccentElement: hsluv(hue, saturation * 1.5, intensity * 72, 1)
|
|
|
|
color positiveBackground:
|
|
hsluv(155, saturation * 1.5, intensity * 52, opacity)
|
|
|
|
color middleBackground:
|
|
hsluv(60, saturation * 1.5, intensity * 52, opacity)
|
|
|
|
color negativeBackground:
|
|
hsluv(0, saturation * 1.5, intensity * 52, opacity)
|
|
|
|
color alertBackground: negativeBackground
|
|
|
|
color brightText: hsluv(0, 0, intensity * 100)
|
|
color text: hsluv(0, 0, intensity * 85)
|
|
color halfDimText: hsluv(0, 0, intensity * 72)
|
|
color dimText: hsluv(0, 0, intensity * 60)
|
|
|
|
color positiveText: hsluv(155, coloredTextSaturation, coloredTextIntensity)
|
|
color warningText: hsluv(60, coloredTextSaturation, coloredTextIntensity)
|
|
color errorText: hsluv(0, coloredTextSaturation, coloredTextIntensity)
|
|
color accentText: hsluv(hue, coloredTextSaturation, coloredTextIntensity)
|
|
|
|
color link: hsluv(hue, coloredTextSaturation, coloredTextIntensity)
|
|
color code: hsluv(hue + 10, coloredTextSaturation, coloredTextIntensity)
|
|
|
|
// Example of an animation, set running: true to enable
|
|
NumberAnimation on hue
|
|
running: false
|
|
from: 0
|
|
to: 360
|
|
duration: 10000
|
|
loops: Animation.Infinite
|
|
|
|
icons:
|
|
string preferredPack: "thin"
|
|
|
|
// "transparent" to disable colorizing
|
|
color colorize: hsluv(0, 0, colors.intensity * 90)
|
|
color disabledColorize: "white"
|
|
|
|
int smallDimension: 16 * uiScale
|
|
int dimension: 22 * uiScale
|
|
|
|
|
|
// Generic UI controls
|
|
|
|
controls:
|
|
scrollbar:
|
|
int width: theme.spacing
|
|
|
|
color track: colors.strongBackground
|
|
|
|
color slider: colors.accentElement
|
|
color hoveredSlider: colors.accentElement
|
|
color pressedSlider: colors.strongAccentElement
|
|
|
|
int sliderPadding: 2
|
|
int sliderRadius: theme.radius
|
|
|
|
box:
|
|
int defaultWidth: minimumSupportedWidth
|
|
color background: colors.mediumBackground
|
|
int radius: theme.radius
|
|
|
|
popup:
|
|
int defaultWidth: minimumSupportedWidth * 1.75
|
|
color background: colors.mediumBackground
|
|
color windowOverlay: hsluv(0, 0, 0, 0.7)
|
|
|
|
header:
|
|
color background: colors.mediumBackground
|
|
|
|
button:
|
|
color background: colors.strongBackground
|
|
color text: colors.text
|
|
color focusedBorder: colors.accentElement
|
|
int focusedBorderWidth: 1
|
|
|
|
color hoveredOverlay: hsluv(0, 0, 50, 0.2)
|
|
color pressedOverlay: hsluv(0, 0, 50, 0.5)
|
|
color checkedOverlay: colors.accentBackground
|
|
|
|
tab:
|
|
color text: controls.button.text
|
|
color background: controls.button.background
|
|
color alternateBackground: hsluv(
|
|
colors.hue,
|
|
colors.bgSaturation * 1.25,
|
|
colors.intensity * 4,
|
|
Math.max(0.6, colors.opacity)
|
|
)
|
|
|
|
color bottomLine: background
|
|
color focusedBorder: colors.accentElement
|
|
int focusedBorderWidth: 1
|
|
|
|
color hoveredOverlay: controls.button.hoveredOverlay
|
|
color pressedOverlay: controls.button.pressedOverlay
|
|
color checkedOverlay: controls.button.checkedOverlay
|
|
|
|
menu:
|
|
color background: controls.button.background
|
|
color border: "black"
|
|
real borderWidth: 2
|
|
|
|
menuItem:
|
|
color background: "transparent"
|
|
color text: controls.button.text
|
|
|
|
color hoveredOverlay: controls.button.hoveredOverlay
|
|
color pressedOverlay: controls.button.hoveredOverlay
|
|
color checkedOverlay: controls.button.hoveredOverlay
|
|
|
|
checkBox:
|
|
color checkIconColorize: colors.accentElement
|
|
color boxBackground: controls.button.background
|
|
int boxSize: 24 * uiScale
|
|
|
|
color boxBorder: "black"
|
|
color boxHoveredBorder: colors.accentElement
|
|
color boxPressedBorder: colors.strongAccentElement
|
|
|
|
color text: controls.button.text
|
|
color subtitle: colors.dimText
|
|
|
|
listView:
|
|
color highlight: hsluv(
|
|
colors.hue, colors.bgSaturation * 2, 0, colors.opacity / 2,
|
|
)
|
|
color smallPaneHighlight: colors.accentBackground
|
|
|
|
textField:
|
|
color background: colors.strongBackground
|
|
color focusedBackground: background
|
|
|
|
int borderWidth: 1
|
|
color border: "transparent"
|
|
color focusedBorder: colors.accentElement
|
|
color errorBorder: colors.negativeBackground
|
|
|
|
color text: colors.text
|
|
color focusedText: colors.text
|
|
color placeholderText: colors.dimText
|
|
|
|
textArea:
|
|
color background: colors.strongBackground
|
|
|
|
int borderWidth: 1
|
|
color border: "transparent"
|
|
color focusedBorder: colors.accentElement
|
|
color errorBorder: colors.negativeBackground
|
|
|
|
color text: colors.text
|
|
color placeholderText: controls.textField.placeholderText
|
|
|
|
toolTip:
|
|
int delay: 500
|
|
color background: colors.strongBackground
|
|
color text: colors.text
|
|
color border: "black"
|
|
int borderWidth: 2
|
|
|
|
progressBar:
|
|
int height: Math.max(2, spacing / 2)
|
|
color background: colors.strongBackground
|
|
color foreground: colors.accentElement
|
|
color pausedForeground: colors.middleBackground
|
|
color errorForeground: colors.negativeBackground
|
|
|
|
circleProgressBar:
|
|
int thickness: Math.max(2, spacing / 2)
|
|
color background: colors.strongBackground
|
|
color foreground: colors.accentElement
|
|
color errorForeground: colors.negativeBackground
|
|
color text: colors.text
|
|
real indeterminateSpan: 0.5 // 0-1
|
|
|
|
slider:
|
|
int radius: 2
|
|
int height: controls.progressBar.height
|
|
color background: controls.progressBar.background
|
|
color foreground: controls.progressBar.foreground
|
|
|
|
handle:
|
|
int size: 20
|
|
color inside: hsluv(0, 0, 90)
|
|
color pressedInside: "white"
|
|
color border: "black"
|
|
color pressedBorder: colors.strongAccentElement
|
|
|
|
image:
|
|
int maxPauseIndicatorSize: 64
|
|
|
|
avatar:
|
|
int size: baseElementsHeight
|
|
int compactSize: baseElementsHeight / 2
|
|
int radius: theme.radius
|
|
|
|
hoveredImage:
|
|
int size: 192
|
|
color background: hsluv(0, 0, 0, 0.4)
|
|
|
|
background:
|
|
int saturation: colors.saturation
|
|
int lightness: Math.min(50, colors.intensity * 23)
|
|
real opacity: 1.0
|
|
|
|
letter:
|
|
int saturation: colors.saturation + 20
|
|
int lightness: colors.intensity * 60
|
|
real opacity: 1.0
|
|
|
|
displayName:
|
|
int saturation: colors.coloredTextSaturation
|
|
int lightness: colors.coloredTextIntensity
|
|
int dimSaturation: colors.dimColoredTextSaturation
|
|
int dimLightness: colors.dimColoredTextIntensity
|
|
|
|
|
|
// Specific interface parts
|
|
|
|
ui:
|
|
// The background image can be an URL or local file path
|
|
// (in the form file://<path>, e.g. file:///home/user/images/foo.png).
|
|
// If not specified, the gradient will be shown instead.
|
|
url image: ""
|
|
|
|
point gradientStart: Qt.point(0, 0)
|
|
point gradientEnd: Qt.point(window.width, window.height)
|
|
|
|
color gradientStartColor: hsluv(0, 0, 0, 0.5)
|
|
color gradientEndColor: hsluv(0, 0, 0, 0.5)
|
|
|
|
|
|
mainPane:
|
|
int minimumSize: 144 * uiScale
|
|
color background: "transparent"
|
|
|
|
topBar:
|
|
color background: colors.strongBackground
|
|
color nameVersionLabel: colors.text
|
|
|
|
accountBar:
|
|
color background: colors.mediumBackground
|
|
|
|
account:
|
|
real collapsedOpacity: 0.3
|
|
color background: "transparent"
|
|
int avatarRadius: controls.avatar.radius
|
|
|
|
color selectedBackground: colors.accentBackground
|
|
real selectedBackgroundOpacity: 0.3
|
|
color selectedBorder: colors.strongAccentElement
|
|
int selectedBorderSize: 1
|
|
|
|
unreadIndicator:
|
|
color background: colors.accentBackground
|
|
color mentionBackground: colors.alertBackground
|
|
|
|
listView:
|
|
color background: colors.mediumBackground
|
|
|
|
account:
|
|
real collapsedOpacity: 0.3
|
|
color background: "transparent"
|
|
color name: colors.text
|
|
|
|
int avatarRadius: controls.avatar.radius
|
|
int collapsedAvatarRadius: controls.avatar.size / 2
|
|
|
|
room:
|
|
real leftRoomOpacity: 0.65
|
|
|
|
color background: "transparent"
|
|
color name: colors.text
|
|
color lastEventDate: colors.halfDimText
|
|
|
|
color subtitle: colors.dimText
|
|
color subtitleQuote: chat.message.quote
|
|
|
|
int avatarRadius: controls.avatar.radius
|
|
int collapsedAvatarRadius: controls.avatar.radius
|
|
|
|
unreadIndicator:
|
|
color background: colors.accentBackground
|
|
color mentionBackground: colors.alertBackground
|
|
|
|
bottomBar:
|
|
color background: "transparent"
|
|
color settingsButtonBackground: colors.strongBackground
|
|
color filterFieldBackground: colors.strongBackground
|
|
|
|
|
|
chat:
|
|
roomHeader:
|
|
color background: colors.strongBackground
|
|
color name: colors.text
|
|
color topic: colors.dimText
|
|
|
|
roomPane:
|
|
color background: "transparent"
|
|
|
|
topBar:
|
|
color background: colors.strongBackground
|
|
|
|
listView:
|
|
color background: colors.mediumBackground
|
|
|
|
member:
|
|
real invitedOpacity: 0.5
|
|
|
|
color background: "transparent"
|
|
color name: colors.text
|
|
color subtitle: colors.dimText
|
|
|
|
color adminIcon: hsluv(60, colors.saturation * 2.25, 60)
|
|
color moderatorIcon: adminIcon
|
|
color invitedIcon: hsluv(0, colors.saturation * 2.25, 60)
|
|
|
|
roomSettings:
|
|
color background: colors.mediumBackground
|
|
|
|
bottomBar:
|
|
color background: colors.strongBackground
|
|
|
|
inviteButton:
|
|
color background: "transparent"
|
|
|
|
filterMembers:
|
|
color background: "transparent"
|
|
|
|
eventList:
|
|
color background: "transparent"
|
|
|
|
message:
|
|
int avatarSize: 56 * uiScale
|
|
int collapsedAvatarSize: 32 * uiScale
|
|
int avatarRadius: controls.avatar.radius
|
|
|
|
int radius: theme.radius
|
|
int horizontalSpacing: theme.spacing / 1.25
|
|
int verticalSpacing: theme.spacing / 1.75
|
|
|
|
color focusedHighlight: colors.accentBackground
|
|
real focusedHighlightOpacity: 0.4
|
|
|
|
color background: colors.weakBackground
|
|
color ownBackground: colors.mediumBackground
|
|
color checkedBackground: colors.accentBackground
|
|
|
|
color body: colors.text
|
|
color date: colors.dimText
|
|
|
|
color redactedBody: colors.dimText
|
|
|
|
color noticeBody: colors.halfDimText
|
|
int noticeLineWidth: 1 * uiScale
|
|
|
|
color quote: hsluv(
|
|
135, colors.coloredTextSaturation, colors.coloredTextIntensity,
|
|
)
|
|
color link: colors.link
|
|
color code: colors.code
|
|
|
|
string styleSheet:
|
|
"* { white-space: pre-wrap }" +
|
|
"a { color: " + link + " }" +
|
|
"p { margin-top: 0 }" +
|
|
|
|
"code { font-family: " + fontFamily.mono + "; " +
|
|
"color: " + code + " }" +
|
|
|
|
"h1, h2, h3 { font-weight: normal }" +
|
|
"h1 { font-size: " + fontSize.biggest + "px }" +
|
|
"h2 { font-size: " + fontSize.bigger + "px }" +
|
|
"h3 { font-size: " + fontSize.big + "px }" +
|
|
"h4 { font-size: " + fontSize.normal + "px }" +
|
|
"h5 { font-size: " + fontSize.small + "px }" +
|
|
"h6 { font-size: " + fontSize.smaller + "px }" +
|
|
|
|
".sender { margin-bottom: " + spacing / 2 + " }" +
|
|
".quote { color: " + quote + " }" +
|
|
|
|
".mention { text-decoration: none; }" +
|
|
".room-id-mention, .room-alias-mention { font-weight: bold; }"
|
|
|
|
string styleInclude:
|
|
'<style type"text/css">\n' + styleSheet + '\n</style>\n'
|
|
|
|
// Prefered minimum width of file messages
|
|
int fileMinWidth: 256 * uiScale
|
|
|
|
// Don't scale down thumbnails below this size in pixels, if
|
|
// the becomes too small to show it at normal size.
|
|
size thumbnailMinSize: Qt.size(256 * uiScale, 256 * uiScale)
|
|
|
|
// How much of the chat height thumbnails can take at most,
|
|
// by default 0.4 for 40%.
|
|
real thumbnailMaxHeightRatio: 0.4 * Math.min(1, uiScale)
|
|
|
|
real thumbnailCheckedOverlayOpacity: 0.4
|
|
|
|
daybreak:
|
|
color background: colors.mediumBackground
|
|
color text: colors.text
|
|
int radius: theme.radius
|
|
|
|
inviteBanner:
|
|
color background: colors.mediumBackground
|
|
|
|
leftBanner:
|
|
color background: colors.mediumBackground
|
|
|
|
unknownDevices:
|
|
color background: colors.mediumBackground
|
|
|
|
typingMembers:
|
|
color background: hsluv(
|
|
colors.hue, colors.saturation, colors.intensity * 9, 0.52
|
|
)
|
|
|
|
replyBar:
|
|
color background: chat.typingMembers.background
|
|
|
|
fileTransfer:
|
|
color background: chat.typingMembers.background
|
|
|
|
composer:
|
|
color background: colors.strongBackground
|
|
|
|
uploadButton:
|
|
color background: "transparent"
|
|
|
|
|
|
mediaPlayer:
|
|
hoverPreview:
|
|
int maxHeight: 192
|
|
|
|
progress:
|
|
int height: 8
|
|
color background: hsluv(0, 0, 0, 0.5)
|
|
|
|
controls:
|
|
int iconSize: icons.dimension
|
|
int volumeSliderWidth: 100
|
|
int speedSliderWidth: 100
|
|
color background: hsluv(
|
|
colors.hue, colors.saturation * 1.25, colors.intensity * 2, 0.85,
|
|
)
|