nextcloud
/
desktop
зеркало из https://github.com/nextcloud/desktop.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Merge pull request #7101 from nextcloud/bugfix/native-ui 

Fix native UI
This commit is contained in:
Matthieu Gallien 2024-09-13 13:40:32 +02:00 коммит произвёл GitHub
Родитель 78082808a9 6cde9c8cc8
Коммит 6fc3eb5d7a
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: B5690EEEBB952194
22 изменённых файлов: 189 добавлений и 91 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

3
src/gui/PredefinedStatusButton.qml
Просмотреть файл

@ -36,7 +36,8 @@ AbstractButton {
background: Rectangle { background: Rectangle {
color: root.hovered || root.checked ? palette.highlight : palette.base color: root.hovered || root.checked ? palette.highlight : palette.base
radius: Style.slightlyRoundedButtonRadius // TODO: fix radius borders - they were showing for each item
// radius: Style.slightlyRoundedButtonRadius
} }
contentItem: Row { contentItem: Row {

2
src/gui/UserStatusSelector.qml
Просмотреть файл

@ -186,7 +186,7 @@ ColumnLayout {
anchors.centerIn: Overlay.overlay anchors.centerIn: Overlay.overlay
background: Rectangle { background: Rectangle {
color: palette.toolTipBase color: palette.window
border.width: Style.normalBorderWidth border.width: Style.normalBorderWidth
border.color: palette.dark border.color: palette.dark
radius: Style.slightlyRoundedButtonRadius radius: Style.slightlyRoundedButtonRadius

2
src/gui/filedetails/FileDetailsPage.qml
Просмотреть файл

@ -224,7 +224,6 @@ Page {
NCTabButton { NCTabButton {
svgCustomColorSource: "image://svgimage-custom-color/activity.svg" svgCustomColorSource: "image://svgimage-custom-color/activity.svg"
text: qsTr("Activity") text: qsTr("Activity")
accentColor: root.accentColor
checked: swipeView.currentIndex === fileActivityView.swipeIndex checked: swipeView.currentIndex === fileActivityView.swipeIndex
onClicked: swipeView.currentIndex = fileActivityView.swipeIndex onClicked: swipeView.currentIndex = fileActivityView.swipeIndex
} }
@ -234,7 +233,6 @@ Page {
height: visible ? implicitHeight : 0 height: visible ? implicitHeight : 0
svgCustomColorSource: "image://svgimage-custom-color/share.svg" svgCustomColorSource: "image://svgimage-custom-color/share.svg"
text: qsTr("Sharing") text: qsTr("Sharing")
accentColor: root.accentColor
checked: swipeView.currentIndex === shareViewLoader.swipeIndex checked: swipeView.currentIndex === shareViewLoader.swipeIndex
onClicked: swipeView.currentIndex = shareViewLoader.swipeIndex onClicked: swipeView.currentIndex = shareViewLoader.swipeIndex
visible: root.fileDetails.sharingAvailable visible: root.fileDetails.sharingAvailable

4
src/gui/filedetails/FileDetailsView.qml
Просмотреть файл

@ -37,8 +37,8 @@ StackView {
initialItem: FileDetailsPage { initialItem: FileDetailsPage {
id: fileDetailsPage id: fileDetailsPage
width: parent.width width: root.width
height: parent.height height: root.height
backgroundsVisible: root.backgroundsVisible backgroundsVisible: root.backgroundsVisible
rootStackView: root rootStackView: root
onCloseButtonClicked: root.closeButtonClicked() onCloseButtonClicked: root.closeButtonClicked()

12
src/gui/filedetails/NCInputTextEdit.qml
Просмотреть файл

@ -22,7 +22,7 @@ import Style
TextEdit { TextEdit {
id: root id: root
readonly property color accentColor: Style.ncBlue readonly property color accentColor: palette.highlight
readonly property color secondaryColor: palette.dark readonly property color secondaryColor: palette.dark
readonly property alias submitButton: submitButton readonly property alias submitButton: submitButton
@ -33,6 +33,16 @@ TextEdit {
selectByMouse: true selectByMouse: true
height: Math.max(Style.talkReplyTextFieldPreferredHeight, contentHeight) height: Math.max(Style.talkReplyTextFieldPreferredHeight, contentHeight)
Rectangle {
id: textFieldBorder
anchors.fill: parent
radius: Style.trayWindowRadius
border.width: Style.normalBorderWidth
border.color: root.activeFocus ? root.accentColor : root.secondaryColor
color: palette.window
z: -1
}
Button { Button {
id: submitButton id: submitButton

9
src/gui/filedetails/NCInputTextField.qml
Просмотреть файл

@ -27,7 +27,7 @@ TextField {
readonly property alias submitButton: submitButton readonly property alias submitButton: submitButton
property bool validInput: true property bool validInput: true
implicitHeight: Style.talkReplyTextFieldPreferredHeight implicitHeight: Math.max(Style.talkReplyTextFieldPreferredHeight, contentHeight)
rightPadding: submitButton.width rightPadding: submitButton.width
@ -52,5 +52,12 @@ TextField {
onClicked: root.accepted() onClicked: root.accepted()
} }
verticalAlignment: Qt.AlignVCenter
background: Rectangle {
border.color: palette.dark
radius: Style.trayWindowRadius
color: palette.window
}
} }

5
src/gui/filedetails/NCTabButton.qml
Просмотреть файл

@ -25,7 +25,6 @@ TabButton {
id: tabButton id: tabButton
property string svgCustomColorSource: "" property string svgCustomColorSource: ""
property color accentColor: Style.ncBlue
padding: Style.smallSpacing padding: Style.smallSpacing
background: Rectangle { background: Rectangle {
@ -36,7 +35,7 @@ TabButton {
contentItem: ColumnLayout { contentItem: ColumnLayout {
id: tabButtonLayout id: tabButtonLayout
property var elementColors: tabButton.checked || tabButton.hovered ? palette.buttonText : palette.midlight property var elementColors: tabButton.checked || tabButton.hovered ? palette.buttonText : palette.windowText
// We'd like to just set the height of the Image, but this causes crashing. // We'd like to just set the height of the Image, but this causes crashing.
// So we use a wrapping Item and use anchors to adjust the size. // So we use a wrapping Item and use anchors to adjust the size.
@ -82,7 +81,7 @@ TabButton {
implicitWidth: textWidth + Style.standardSpacing * 2 implicitWidth: textWidth + Style.standardSpacing * 2
implicitHeight: 2 implicitHeight: 2
color: tabButton.checked ? tabButton.accentColor : tabButton.hovered ? palette.highlight : palette.base color: tabButton.checked || tabButton.hovered ? palette.highlight : palette.base
} }
} }
} }

8
src/gui/filedetails/ShareeSearchField.qml
Просмотреть файл

@ -47,6 +47,14 @@ TextField {
placeholderText: enabled ? qsTr("Search for users or groups…") : qsTr("Sharing is not available for this folder") placeholderText: enabled ? qsTr("Search for users or groups…") : qsTr("Sharing is not available for this folder")
placeholderTextColor: placeholderColor placeholderTextColor: placeholderColor
verticalAlignment: Qt.AlignVCenter
implicitHeight: Math.max(Style.talkReplyTextFieldPreferredHeight, contentHeight)
background: Rectangle {
border.color: palette.dark
radius: Style.trayWindowRadius
color: palette.window
}
onActiveFocusChanged: triggerSuggestionsVisibility() onActiveFocusChanged: triggerSuggestionsVisibility()
onTextChanged: triggerSuggestionsVisibility() onTextChanged: triggerSuggestionsVisibility()

2
src/gui/iconutils.cpp
Просмотреть файл

@ -111,7 +111,7 @@ QImage createSvgImageWithCustomColor(const QString &fileName,
const auto sizeToUse = requestedSize.isValid() || originalSize == nullptr ? requestedSize : *originalSize; const auto sizeToUse = requestedSize.isValid() || originalSize == nullptr ? requestedSize : *originalSize;
// some icons are present in white or black only, so, we need to check both when needed // some icons are present in white or black only, so, we need to check both when needed
const auto iconBaseColors = QStringList{QStringLiteral("black"), QStringLiteral("white")}; const auto iconBaseColors = QStringList{QStringLiteral("black"), QStringLiteral("white"), QStringLiteral("colored")};
const auto customColorImage = findImageWithCustomColor(fileName, customColor, iconBaseColors, sizeToUse); const auto customColorImage = findImageWithCustomColor(fileName, customColor, iconBaseColors, sizeToUse);
if (!customColorImage.isNull()) { if (!customColorImage.isNull()) {

3
src/gui/tray/CallNotificationDialog.qml
Просмотреть файл

@ -75,11 +75,10 @@ ApplicationWindow {
onStopNotifying: root.closeNotification() onStopNotifying: root.closeNotification()
} }
Audio { SoundEffect {
id: ringSound id: ringSound
source: root.ringtonePath source: root.ringtonePath
loops: 9 // about 45 seconds of audio playing loops: 9 // about 45 seconds of audio playing
audioRole: Audio.RingtoneRole
} }
Rectangle { Rectangle {

7
src/gui/tray/TalkReplyTextField.qml
Просмотреть файл

@ -17,6 +17,13 @@ TextField {
onAccepted: sendReplyMessage() onAccepted: sendReplyMessage()
verticalAlignment: Qt.AlignVCenter
background: Rectangle {
border.color: palette.dark
radius: Style.trayWindowRadius
color: palette.window
}
Button { Button {
id: sendReplyMessageButton id: sendReplyMessageButton

1
src/gui/tray/TrayFolderListItem.qml
Просмотреть файл

@ -37,6 +37,7 @@ MenuItem {
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.normalBorderWidth anchors.margins: Style.normalBorderWidth
color: parent.parent.hovered || parent.parent.visualFocus ? palette.highlight : palette.window color: parent.parent.hovered || parent.parent.visualFocus ? palette.highlight : palette.window
radius: Style.halfTrayWindowRadius
} }
} }

14
src/gui/tray/TrayFoldersMenuButton.qml
Просмотреть файл

@ -114,7 +114,7 @@ HeaderButton {
cache: true cache: true
source: "image://svgimage-custom-color/folder.svg/" source: "image://svgimage-custom-color/folder.svg/" + palette.windowText
sourceSize { sourceSize {
width: imageWidth width: imageWidth
height: imageHeight height: imageHeight
@ -144,7 +144,7 @@ HeaderButton {
cache: true cache: true
source: "image://svgimage-custom-color/caret-down.svg/" source: "image://svgimage-custom-color/caret-down.svg/" + palette.windowText
sourceSize { sourceSize {
width: openLocalFolderButtonCaretIconLoader.imageWidth width: openLocalFolderButtonCaretIconLoader.imageWidth
height: openLocalFolderButtonCaretIconLoader.imageHeight height: openLocalFolderButtonCaretIconLoader.imageHeight
@ -178,6 +178,12 @@ HeaderButton {
height: implicitHeight + y > Style.trayWindowHeight ? Style.trayWindowHeight - y : implicitHeight height: implicitHeight + y > Style.trayWindowHeight ? Style.trayWindowHeight - y : implicitHeight
closePolicy: Menu.CloseOnPressOutsideParent | Menu.CloseOnEscape closePolicy: Menu.CloseOnPressOutsideParent | Menu.CloseOnEscape
background: Rectangle {
border.color: palette.dark
color: palette.window
radius: Style.trayWindowRadius
}
contentItem: ScrollView { contentItem: ScrollView {
id: foldersMenuScrollView id: foldersMenuScrollView
@ -208,9 +214,9 @@ HeaderButton {
subline: model.modelData.parentPath subline: model.modelData.parentPath
width: foldersMenuListView.width width: foldersMenuListView.width
height: Style.standardPrimaryButtonHeight height: Style.standardPrimaryButtonHeight
backgroundIconSource: "image://svgimage-custom-color/folder.svg/" backgroundIconSource: "image://svgimage-custom-color/folder.svg/" + palette.windowText
iconSource: isGroupFolder iconSource: isGroupFolder
? "image://svgimage-custom-color/account-group.svg/" ? "image://svgimage-custom-color/account-group.svg/" + palette.windowText
: "" : ""
onTriggered: { onTriggered: {

7
src/gui/tray/UnifiedSearchInputContainer.qml
Просмотреть файл

@ -41,9 +41,16 @@ TextField {
rightPadding: trayWindowUnifiedSearchTextFieldClearTextButton.width + trayWindowUnifiedSearchTextFieldClearTextButton.anchors.rightMargin + textFieldHorizontalPaddingOffset rightPadding: trayWindowUnifiedSearchTextFieldClearTextButton.width + trayWindowUnifiedSearchTextFieldClearTextButton.anchors.rightMargin + textFieldHorizontalPaddingOffset
placeholderText: qsTr("Search files, messages, events …") placeholderText: qsTr("Search files, messages, events …")
verticalAlignment: Qt.AlignVCenter
selectByMouse: true selectByMouse: true
background: Rectangle {
border.color: palette.dark
radius: Style.trayWindowRadius
color: palette.window
}
Image { Image {
id: trayWindowUnifiedSearchTextFieldSearchIcon id: trayWindowUnifiedSearchTextFieldSearchIcon
width: Style.trayListItemIconSize - anchors.leftMargin width: Style.trayListItemIconSize - anchors.leftMargin

29
src/gui/tray/UserLine.qml
Просмотреть файл

@ -40,6 +40,7 @@ AbstractButton {
color: (userLine.hovered || userLine.visualFocus) && color: (userLine.hovered || userLine.visualFocus) &&
!(userMoreButton.hovered || userMoreButton.visualFocus) ? !(userMoreButton.hovered || userMoreButton.visualFocus) ?
palette.highlight : palette.window palette.highlight : palette.window
radius: Style.halfTrayWindowRadius
} }
contentItem: RowLayout { contentItem: RowLayout {
@ -48,7 +49,7 @@ AbstractButton {
Image { Image {
id: accountAvatar id: accountAvatar
Layout.leftMargin: 7 Layout.leftMargin: Style.accountIconsMenuMargin
verticalAlignment: Qt.AlignCenter verticalAlignment: Qt.AlignCenter
cache: false cache: false
source: model.avatar !== "" ? model.avatar : Theme.darkMode ? "image://avatars/fallbackWhite" : "image://avatars/fallbackBlack" source: model.avatar !== "" ? model.avatar : Theme.darkMode ? "image://avatars/fallbackWhite" : "image://avatars/fallbackBlack"
@ -62,7 +63,7 @@ AbstractButton {
height: width height: width
anchors.bottom: accountAvatar.bottom anchors.bottom: accountAvatar.bottom
anchors.right: accountAvatar.right anchors.right: accountAvatar.right
radius: width*0.5 radius: width * Style.trayFolderStatusIndicatorRadiusFactor
} }
Image { Image {
@ -148,14 +149,21 @@ AbstractButton {
Image { Image {
anchors.fill: parent anchors.fill: parent
source: "image://svgimage-custom-color/more.svg/" source: "image://svgimage-custom-color/more.svg/" + palette.windowText
fillMode: Image.PreserveAspectFit fillMode: Image.PreserveAspectFit
anchors.rightMargin: Style.accountLabelsAnchorsMargin
} }
AutoSizingMenu { AutoSizingMenu {
id: userMoreButtonMenu id: userMoreButtonMenu
closePolicy: Menu.CloseOnPressOutsideParent | Menu.CloseOnEscape closePolicy: Menu.CloseOnPressOutsideParent | Menu.CloseOnEscape
background: Rectangle {
border.color: palette.dark
radius: Style.halfTrayWindowRadius
color: palette.window
}
MenuItem { MenuItem {
visible: model.isConnected && model.serverHasUserStatus visible: model.isConnected && model.serverHasUserStatus
height: visible ? implicitHeight : 0 height: visible ? implicitHeight : 0
@ -163,6 +171,11 @@ AbstractButton {
font.pixelSize: Style.topLinePixelSize font.pixelSize: Style.topLinePixelSize
hoverEnabled: true hoverEnabled: true
onClicked: showUserStatusSelector(index) onClicked: showUserStatusSelector(index)
background: Rectangle {
radius: Style.halfTrayWindowRadius
color: parent.hovered ? palette.highlight : palette.window
}
} }
MenuItem { MenuItem {
@ -185,6 +198,11 @@ AbstractButton {
} }
accountMenu.close() accountMenu.close()
} }
background: Rectangle {
radius: Style.halfTrayWindowRadius
color: parent.hovered ? palette.highlight : palette.window
}
} }
MenuItem { MenuItem {
@ -200,6 +218,11 @@ AbstractButton {
Accessible.role: Accessible.Button Accessible.role: Accessible.Button
Accessible.name: text Accessible.name: text
Accessible.onPressAction: removeAccountButton.clicked() Accessible.onPressAction: removeAccountButton.clicked()
background: Rectangle {
radius: Style.halfTrayWindowRadius
color: parent.hovered ? palette.highlight : palette.window
}
} }
} }
} }

110
src/gui/tray/Window.qml
Просмотреть файл

@ -243,7 +243,7 @@ ApplicationWindow {
anchors.right: trayWindowMainItem.right anchors.right: trayWindowMainItem.right
anchors.top: trayWindowMainItem.top anchors.top: trayWindowMainItem.top
height: Style.trayWindowHeaderHeight height: Style.trayWindowHeaderHeight
color: Style.currentUserHeaderColor color: palette.window
RowLayout { RowLayout {
id: trayWindowHeaderLayout id: trayWindowHeaderLayout
@ -289,7 +289,7 @@ ApplicationWindow {
background: Rectangle { background: Rectangle {
border.color: palette.dark border.color: palette.dark
color: palette.window color: palette.window
radius: Style.currentAccountButtonRadius radius: Style.halfTrayWindowRadius
} }
onClosed: { onClosed: {
@ -324,11 +324,12 @@ ApplicationWindow {
spacing: 0 spacing: 0
Image { Image {
Layout.leftMargin: 12 Layout.leftMargin: Style.accountIconsMenuMargin
verticalAlignment: Qt.AlignCenter verticalAlignment: Qt.AlignVCenter
source: "image://svgimage-custom-color/add.svg" horizontalAlignment: Qt.AlignCenter
sourceSize.width: Style.headerButtonIconSize source: "image://svgimage-custom-color/add.svg/" + palette.windowText
sourceSize.height: Style.headerButtonIconSize sourceSize.width: Style.addButtonIconSize
sourceSize.height: Style.addButtonIconSize
} }
EnforcedPlainTextLabel { EnforcedPlainTextLabel {
Layout.leftMargin: 14 Layout.leftMargin: 14
@ -346,6 +347,12 @@ ApplicationWindow {
Accessible.role: Accessible.MenuItem Accessible.role: Accessible.MenuItem
Accessible.name: qsTr("Add new account") Accessible.name: qsTr("Add new account")
Accessible.onPressAction: addAccountButton.clicked() Accessible.onPressAction: addAccountButton.clicked()
background: Rectangle {
radius: Style.halfTrayWindowRadius
color: palette.highlight
visible: addAccountButton.hovered
}
} }
Rectangle { Rectangle {
@ -363,6 +370,12 @@ ApplicationWindow {
Accessible.role: Accessible.MenuItem Accessible.role: Accessible.MenuItem
Accessible.name: Systray.syncIsPaused ? qsTr("Resume sync for all") : qsTr("Pause sync for all") Accessible.name: Systray.syncIsPaused ? qsTr("Resume sync for all") : qsTr("Pause sync for all")
Accessible.onPressAction: syncPauseButton.clicked() Accessible.onPressAction: syncPauseButton.clicked()
background: Rectangle {
radius: Style.halfTrayWindowRadius
color: palette.highlight
visible: syncPauseButton.hovered
}
} }
MenuItem { MenuItem {
@ -374,6 +387,12 @@ ApplicationWindow {
Accessible.role: Accessible.MenuItem Accessible.role: Accessible.MenuItem
Accessible.name: text Accessible.name: text
Accessible.onPressAction: settingsButton.clicked() Accessible.onPressAction: settingsButton.clicked()
background: Rectangle {
radius: Style.halfTrayWindowRadius
color: palette.highlight
visible: settingsButton.hovered
}
} }
MenuItem { MenuItem {
@ -385,6 +404,12 @@ ApplicationWindow {
Accessible.role: Accessible.MenuItem Accessible.role: Accessible.MenuItem
Accessible.name: text Accessible.name: text
Accessible.onPressAction: exitButton.clicked() Accessible.onPressAction: exitButton.clicked()
background: Rectangle {
radius: Style.halfTrayWindowRadius
color: palette.highlight
visible: exitButton.hovered
}
} }
} }
@ -416,22 +441,22 @@ ApplicationWindow {
height: width height: width
anchors.bottom: currentAccountAvatar.bottom anchors.bottom: currentAccountAvatar.bottom
anchors.right: currentAccountAvatar.right anchors.right: currentAccountAvatar.right
color: Style.currentUserHeaderColor
radius: width * Style.trayFolderStatusIndicatorRadiusFactor radius: width * Style.trayFolderStatusIndicatorRadiusFactor
} }
Rectangle { // TODO: check if we want add any hover effect
id: currentAccountStatusIndicatorMouseHover // Rectangle {
visible: UserModel.currentUser && UserModel.currentUser.isConnected // id: currentAccountStatusIndicatorMouseHover
&& UserModel.currentUser.serverHasUserStatus // visible: UserModel.currentUser && UserModel.currentUser.isConnected
width: Style.accountAvatarStateIndicatorSize + + Style.trayFolderStatusIndicatorSizeOffset // && UserModel.currentUser.serverHasUserStatus
height: width // width: Style.accountAvatarStateIndicatorSize + + Style.trayFolderStatusIndicatorSizeOffset
anchors.bottom: currentAccountAvatar.bottom // height: width
anchors.right: currentAccountAvatar.right // anchors.bottom: currentAccountAvatar.bottom
color: currentAccountButton.hovered ? Style.currentUserHeaderTextColor : palette.window // anchors.right: currentAccountAvatar.right
opacity: Style.trayFolderStatusIndicatorMouseHoverOpacityFactor // color: currentAccountButton.hovered ? palette.highlight : palette.window
radius: width * Style.trayFolderStatusIndicatorRadiusFactor // opacity: Style.trayFolderStatusIndicatorMouseHoverOpacityFactor
} // radius: width * Style.trayFolderStatusIndicatorRadiusFactor
// }
Image { Image {
id: currentAccountStatusIndicator id: currentAccountStatusIndicator
@ -505,15 +530,12 @@ ApplicationWindow {
} }
} }
ColorOverlay { Image {
cached: true
width: source.width
height: source.height
source: Image {
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
verticalAlignment: Qt.AlignCenter verticalAlignment: Qt.AlignCenter
Layout.margins: Style.accountDropDownCaretMargin horizontalAlignment: Qt.AlignRight
source: "image://svgimage-custom-color/caret-down.svg/" Layout.leftMargin: Style.accountDropDownCaretMargin
source: "image://svgimage-custom-color/caret-down.svg/" + palette.windowText
sourceSize.width: Style.accountDropDownCaretSize sourceSize.width: Style.accountDropDownCaretSize
sourceSize.height: Style.accountDropDownCaretSize sourceSize.height: Style.accountDropDownCaretSize
Accessible.role: Accessible.PopupMenu Accessible.role: Accessible.PopupMenu
@ -521,7 +543,6 @@ ApplicationWindow {
} }
} }
} }
}
// Add space between items // Add space between items
Item { Item {
@ -564,7 +585,7 @@ ApplicationWindow {
HeaderButton { HeaderButton {
id: trayWindowAppsButton id: trayWindowAppsButton
icon.source: "image://svgimage-custom-color/more-apps.svg/" icon.source: "image://svgimage-custom-color/more-apps.svg/" + palette.windowText
onClicked: { onClicked: {
if(appsMenuListView.count <= 0) { if(appsMenuListView.count <= 0) {
@ -590,8 +611,8 @@ ApplicationWindow {
background: Rectangle { background: Rectangle {
border.color: palette.dark border.color: palette.dark
radius: Style.halfTrayWindowRadius
color: palette.window color: palette.window
radius: 2
} }
contentItem: ScrollView { contentItem: ScrollView {
@ -615,11 +636,19 @@ ApplicationWindow {
text: model.appName text: model.appName
font.pixelSize: Style.topLinePixelSize font.pixelSize: Style.topLinePixelSize
icon.source: model.appIconUrl icon.source: model.appIconUrl
icon.color: palette.windowText
onTriggered: UserAppsModel.openAppUrl(appUrl) onTriggered: UserAppsModel.openAppUrl(appUrl)
hoverEnabled: true hoverEnabled: true
Accessible.role: Accessible.MenuItem Accessible.role: Accessible.MenuItem
Accessible.name: qsTr("Open %1 in browser").arg(model.appName) Accessible.name: qsTr("Open %1 in browser").arg(model.appName)
Accessible.onPressAction: appEntry.triggered() Accessible.onPressAction: appEntry.triggered()
background: Rectangle {
anchors.fill: parent
anchors.margins: 1
color: appEntry.hovered ? palette.highlight : palette.window
radius: Style.halfTrayWindowRadius
}
} }
} }
} }
@ -630,7 +659,7 @@ ApplicationWindow {
UnifiedSearchInputContainer { UnifiedSearchInputContainer {
id: trayWindowUnifiedSearchInputContainer id: trayWindowUnifiedSearchInputContainer
height: Style.trayWindowHeaderHeight * 0.65 height: Math.max(Style.talkReplyTextFieldPreferredHeight, contentHeight)
anchors { anchors {
top: trayWindowHeaderBackground.bottom top: trayWindowHeaderBackground.bottom
@ -648,17 +677,18 @@ ApplicationWindow {
onTextEdited: { UserModel.currentUser.unifiedSearchResultsListModel.searchTerm = trayWindowUnifiedSearchInputContainer.text } onTextEdited: { UserModel.currentUser.unifiedSearchResultsListModel.searchTerm = trayWindowUnifiedSearchInputContainer.text }
onClearText: { UserModel.currentUser.unifiedSearchResultsListModel.searchTerm = "" } onClearText: { UserModel.currentUser.unifiedSearchResultsListModel.searchTerm = "" }
Rectangle { // TODO: consult designers, this line looks weird atm
id: bottomUnifiedSearchInputSeparator // Rectangle {
// id: bottomUnifiedSearchInputSeparator
anchors.left: parent.left // anchors.left: parent.left
anchors.right: parent.right // anchors.right: parent.right
anchors.bottom: parent.bottom // anchors.bottom: parent.bottom
height: 1 // height: 1
color: Style.menuBorder // color: Style.menuBorder
visible: trayWindowMainItem.isUnifiedSearchActive // visible: trayWindowMainItem.isUnifiedSearchActive
} // }
} }
ErrorBox { ErrorBox {

36
src/gui/tray/activitylistmodel.cpp
Просмотреть файл

@ -226,19 +226,17 @@ QVariant ActivityListModel::data(const QModelIndex &index, int role) const
}; };
const auto generateIconPath = [&]() { const auto generateIconPath = [&]() {
auto colorIconPath = QStringLiteral("image://svgimage-custom-color/");//role == DarkIconRole ? QStringLiteral("qrc:///client/theme/white/") : QStringLiteral("qrc:///client/theme/black/"); auto colorIconPath = role == DarkIconRole ? QStringLiteral("image://svgimage-custom-color/%1/white") : QStringLiteral("image://svgimage-custom-color/%1/black");
if (a._type == Activity::NotificationType && !a._talkNotificationData.userAvatar.isEmpty()) { if (a._type == Activity::NotificationType && !a._talkNotificationData.userAvatar.isEmpty()) {
return QStringLiteral("image://svgimage-custom-color/talk-app.svg"); return QStringLiteral("image://svgimage-custom-color/talk-bordered.svg");
} else if (a._type == Activity::SyncResultType) { } else if (a._type == Activity::SyncResultType) {
colorIconPath.append("state-error.svg"); return colorIconPath.arg("state-error.svg");
return colorIconPath;
} else if (a._type == Activity::SyncFileItemType) { } else if (a._type == Activity::SyncFileItemType) {
if (a._syncFileItemStatus == SyncFileItem::NormalError if (a._syncFileItemStatus == SyncFileItem::NormalError
|| a._syncFileItemStatus == SyncFileItem::FatalError || a._syncFileItemStatus == SyncFileItem::FatalError
|| a._syncFileItemStatus == SyncFileItem::DetailError || a._syncFileItemStatus == SyncFileItem::DetailError
|| a._syncFileItemStatus == SyncFileItem::BlacklistedError) { || a._syncFileItemStatus == SyncFileItem::BlacklistedError) {
colorIconPath.append("state-error.svg"); return colorIconPath.arg("state-error.svg");
return colorIconPath;
} else if (a._syncFileItemStatus == SyncFileItem::SoftError } else if (a._syncFileItemStatus == SyncFileItem::SoftError
|| a._syncFileItemStatus == SyncFileItem::Conflict || a._syncFileItemStatus == SyncFileItem::Conflict
|| a._syncFileItemStatus == SyncFileItem::Restoration || a._syncFileItemStatus == SyncFileItem::Restoration
@ -246,29 +244,26 @@ QVariant ActivityListModel::data(const QModelIndex &index, int role) const
|| a._syncFileItemStatus == SyncFileItem::FileNameInvalid || a._syncFileItemStatus == SyncFileItem::FileNameInvalid
|| a._syncFileItemStatus == SyncFileItem::FileNameInvalidOnServer || a._syncFileItemStatus == SyncFileItem::FileNameInvalidOnServer
|| a._syncFileItemStatus == SyncFileItem::FileNameClash) { || a._syncFileItemStatus == SyncFileItem::FileNameClash) {
colorIconPath.append("state-warning.svg"); return colorIconPath.arg("state-warning.svg");
return colorIconPath;
} else if (a._syncFileItemStatus == SyncFileItem::FileIgnored) { } else if (a._syncFileItemStatus == SyncFileItem::FileIgnored) {
colorIconPath.append("state-info.svg"); return colorIconPath.arg("state-info.svg");
return colorIconPath;
} else { } else {
// File sync successful // File sync successful
if (a._fileAction == "file_created") { if (a._fileAction == "file_created") {
return a._previews.empty() ? QStringLiteral("image://svgimage-custom-color/add.svg") return a._previews.empty() ? QStringLiteral("image://svgimage-custom-color/add.svg/")
: QStringLiteral("image://svgimage-custom-color/add-bordered.svg"); : QStringLiteral("image://svgimage-custom-color/add-bordered.svg/");
} else if (a._fileAction == "file_deleted") { } else if (a._fileAction == "file_deleted") {
return a._previews.empty() ? QStringLiteral("image://svgimage-custom-color/delete.svg") return a._previews.empty() ? QStringLiteral("image://svgimage-custom-color/delete.svg/")
: QStringLiteral("image://svgimage-custom-color/delete-bordered.svg"); : QStringLiteral("image://svgimage-custom-color/delete-bordered.svg/");
} else { } else {
return a._previews.empty() ? colorIconPath % QStringLiteral("change.svg") return a._previews.empty() ? colorIconPath.arg(QStringLiteral("change.svg"))
: QStringLiteral("image://svgimage-custom-color/change-bordered.svg"); : QStringLiteral("image://svgimage-custom-color/change-bordered.svg/");
} }
} }
} else { } else {
// We have an activity // We have an activity
if (a._icon.isEmpty()) { if (a._icon.isEmpty()) {
colorIconPath.append("activity.svg"); return colorIconPath.arg("activity.svg");
return colorIconPath;
} }
const QString basePath = QStringLiteral("image://tray-image-provider/") % a._icon % QStringLiteral("/"); const QString basePath = QStringLiteral("image://tray-image-provider/") % a._icon % QStringLiteral("/");
@ -302,8 +297,9 @@ QVariant ActivityListModel::data(const QModelIndex &index, int role) const
} }
case DarkIconRole: case DarkIconRole:
case LightIconRole: case LightIconRole: {
return generateIconPath(); return generateIconPath();
}
case ObjectTypeRole: case ObjectTypeRole:
return a._objectType; return a._objectType;
case ObjectIdRole: case ObjectIdRole:
@ -511,7 +507,7 @@ void ActivityListModel::insertOrRemoveDummyFetchingActivity()
_dummyFetchingActivities._objectType = dummyFetchingActivityObjectType; _dummyFetchingActivities._objectType = dummyFetchingActivityObjectType;
_dummyFetchingActivities._subject = tr("Fetching activities …"); _dummyFetchingActivities._subject = tr("Fetching activities …");
_dummyFetchingActivities._dateTime = QDateTime::currentDateTime(); _dummyFetchingActivities._dateTime = QDateTime::currentDateTime();
_dummyFetchingActivities._icon = QLatin1String("image://svgimage-custom-color/change-bordered.svg"); _dummyFetchingActivities._icon = QLatin1String("image://svgimage-custom-color/change-bordered.svg/");
addEntriesToActivityList({_dummyFetchingActivities}); addEntriesToActivityList({_dummyFetchingActivities});
} else if (!_finalList.isEmpty() && _finalList.first()._objectType == dummyFetchingActivityObjectType) { } else if (!_finalList.isEmpty() && _finalList.first()._objectType == dummyFetchingActivityObjectType) {

2
theme.qrc.in
Просмотреть файл

@ -236,10 +236,10 @@
<file>theme/colored/user-status-dnd.svg</file> <file>theme/colored/user-status-dnd.svg</file>
<file>theme/black/email.svg</file> <file>theme/black/email.svg</file>
<file>theme/black/edit.svg</file> <file>theme/black/edit.svg</file>
<file>theme/black/more-apps.svg</file>
<file>theme/delete.svg</file> <file>theme/delete.svg</file>
<file>theme/send.svg</file> <file>theme/send.svg</file>
<file>theme/call-notification.wav</file> <file>theme/call-notification.wav</file>
<file>theme/more-apps.svg</file>
<file>theme/talk-app.svg</file> <file>theme/talk-app.svg</file>
</qresource> </qresource>
</RCC> </RCC>

8
theme/Style/Style.qml
Просмотреть файл

@ -50,7 +50,10 @@ QtObject {
// Dimensions and sizes // Dimensions and sizes
property int trayWindowWidth: variableSize(400) property int trayWindowWidth: variableSize(400)
property int trayWindowHeight: variableSize(510) property int trayWindowHeight: variableSize(510)
// text input and main windows radius
property int trayWindowRadius: 10 property int trayWindowRadius: 10
// dropdown menus radius
property int halfTrayWindowRadius: 5
property int trayWindowBorderWidth: variableSize(1) property int trayWindowBorderWidth: variableSize(1)
property int trayWindowHeaderHeight: variableSize(60) property int trayWindowHeaderHeight: variableSize(60)
property int trayHorizontalMargin: 10 property int trayHorizontalMargin: 10
@ -93,7 +96,7 @@ QtObject {
property int folderStateIndicatorSize: 16 property int folderStateIndicatorSize: 16
property int accountLabelWidth: 128 property int accountLabelWidth: 128
property int accountDropDownCaretSize: 20 property int accountDropDownCaretSize: 10
property int accountDropDownCaretMargin: 8 property int accountDropDownCaretMargin: 8
property int trayFoldersMenuButtonStateIndicatorBottomOffset: 5 property int trayFoldersMenuButtonStateIndicatorBottomOffset: 5
@ -103,9 +106,12 @@ QtObject {
property int addAccountButtonHeight: 50 property int addAccountButtonHeight: 50
property int headerButtonIconSize: 32 property int headerButtonIconSize: 32
property int addButtonIconSize: 26
property int dismissButtonSize: 26 property int dismissButtonSize: 26
property int minimumActivityItemHeight: 24 property int minimumActivityItemHeight: 24
property int accountIconsMenuMargin: 7
property int activityLabelBaseWidth: 240 property int activityLabelBaseWidth: 240
property int talkReplyTextFieldPreferredHeight: 34 property int talkReplyTextFieldPreferredHeight: 34

1
theme/black/more-apps.svg Normal file
Просмотреть файл

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#000"><path d="M230.67-160q-29.67 0-50.17-20.5T160-230.67q0-29.66 20.5-50.16 20.5-20.5 50.17-20.5 29.66 0 50.16 20.5 20.5 20.5 20.5 50.16 0 29.67-20.5 50.17T230.67-160ZM480-160q-29.67 0-50.17-20.5t-20.5-50.17q0-29.66 20.5-50.16 20.5-20.5 50.17-20.5t50.17 20.5q20.5 20.5 20.5 50.16 0 29.67-20.5 50.17T480-160Zm249.33 0q-29.66 0-50.16-20.5-20.5-20.5-20.5-50.17 0-29.66 20.5-50.16 20.5-20.5 50.16-20.5 29.67 0 50.17 20.5t20.5 50.16q0 29.67-20.5 50.17T729.33-160ZM230.67-409.33q-29.67 0-50.17-20.5T160-480q0-29.67 20.5-50.17t50.17-20.5q29.66 0 50.16 20.5 20.5 20.5 20.5 50.17t-20.5 50.17q-20.5 20.5-50.16 20.5Zm249.33 0q-29.67 0-50.17-20.5T409.33-480q0-29.67 20.5-50.17t50.17-20.5q29.67 0 50.17 20.5t20.5 50.17q0 29.67-20.5 50.17T480-409.33Zm249.33 0q-29.66 0-50.16-20.5-20.5-20.5-20.5-50.17t20.5-50.17q20.5-20.5 50.16-20.5 29.67 0 50.17 20.5T800-480q0 29.67-20.5 50.17t-50.17 20.5ZM230.67-658.67q-29.67 0-50.17-20.5T160-729.33q0-29.67 20.5-50.17t50.17-20.5q29.66 0 50.16 20.5 20.5 20.5 20.5 50.17 0 29.66-20.5 50.16-20.5 20.5-50.16 20.5Zm249.33 0q-29.67 0-50.17-20.5t-20.5-50.16q0-29.67 20.5-50.17T480-800q29.67 0 50.17 20.5t20.5 50.17q0 29.66-20.5 50.16-20.5 20.5-50.17 20.5Zm249.33 0q-29.66 0-50.16-20.5-20.5-20.5-20.5-50.16 0-29.67 20.5-50.17t50.16-20.5q29.67 0 50.17 20.5t20.5 50.17q0 29.66-20.5 50.16-20.5 20.5-50.17 20.5Z"/></svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 1.4 KiB

1
theme/more-apps.svg
Просмотреть файл

@ -1 +0,0 @@
<svg viewBox="0 0 32 32" height="32" width="32" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M13.333 2.667H2.667c-.734 0-1.327.6-1.327 1.333l-.007 8c0 .733.6 1.333 1.334 1.333h10.666c.734 0 1.334-.6 1.334-1.333V4c0-.733-.6-1.333-1.334-1.333Zm0 2.666L8 8.667 2.667 5.333V4L8 7.333 13.333 4v1.333Z" style="fill-rule:nonzero" transform="translate(0 16)"/><path d="M6 14c-.55 0-1.021-.196-1.412-.587A1.93 1.93 0 0 1 4 12c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 6 10c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413a1.931 1.931 0 0 1-.587 1.413c-.37.382-.881.594-1.413.587Zm6 0c-.55 0-1.021-.196-1.412-.587A1.93 1.93 0 0 1 10 12c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 12 10c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413a1.931 1.931 0 0 1-.587 1.413c-.37.382-.881.594-1.413.587Zm6 0c-.55 0-1.021-.196-1.412-.587A1.93 1.93 0 0 1 16 12c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 18 10c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413a1.931 1.931 0 0 1-.587 1.413c-.37.382-.881.594-1.413.587Z" style="fill-rule:nonzero" transform="matrix(.875 0 0 .875 13.5 13.558)"/><path d="M5 22c-.55 0-1.021-.196-1.412-.587A1.93 1.93 0 0 1 3 20V6c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 5 4h1V2h2v2h8V2h2v2h1c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413v14a1.931 1.931 0 0 1-.587 1.413c-.37.382-.881.594-1.413.587H5Zm0-2h14V10H5v10Z" style="fill-rule:nonzero" transform="matrix(.73887 0 0 .73887 -.924 -.495)"/><path d="M1 20v-2.8c0-.567.146-1.087.438-1.563A2.916 2.916 0 0 1 2.6 14.55a14.859 14.859 0 0 1 3.15-1.163A13.738 13.738 0 0 1 9 13c1.1 0 2.183.129 3.25.387 1.067.259 2.117.646 3.15 1.163.483.25.871.613 1.163 1.087.291.476.437.996.437 1.563V20H1Zm18 0v-3c0-.733-.204-1.437-.612-2.113-.409-.675-.988-1.254-1.738-1.737 1.575.179 3.102.654 4.5 1.4.6.333 1.058.704 1.375 1.113.317.408.475.854.475 1.337v3h-4ZM9 12c-1.1 0-2.042-.392-2.825-1.175C5.392 10.042 5 9.1 5 8s.392-2.042 1.175-2.825C6.958 4.392 7.9 4 9 4s2.042.392 2.825 1.175C12.608 5.958 13 6.9 13 8s-.392 2.042-1.175 2.825C11.042 11.608 10.1 12 9 12Zm10-4c0 1.1-.392 2.042-1.175 2.825C17.042 11.608 16.1 12 15 12c-.183 0-.417-.021-.7-.062a6.142 6.142 0 0 1-.7-.138 5.956 5.956 0 0 0 1.038-1.775A5.785 5.785 0 0 0 15 8c0-.7-.121-1.375-.362-2.025A5.956 5.956 0 0 0 13.6 4.2c.233-.083.467-.137.7-.163.233-.025.467-.037.7-.037 1.1 0 2.042.392 2.825 1.175C18.608 5.958 19 6.9 19 8Z" style="fill-rule:nonzero" transform="matrix(.62273 0 0 .62273 16.416 1.062)"/></svg>
Режим "рядом"

До

Ширина:  |  Высота:  |  Размер: 2.5 KiB

2
theme/white/more-apps.svg
Просмотреть файл

@ -1 +1 @@
<svg viewBox="0 0 32 32" height="32" width="32" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M13.333 2.667H2.667c-.734 0-1.327.6-1.327 1.333l-.007 8c0 .733.6 1.333 1.334 1.333h10.666c.734 0 1.334-.6 1.334-1.333V4c0-.733-.6-1.333-1.334-1.333Zm0 2.666L8 8.667 2.667 5.333V4L8 7.333 13.333 4v1.333Z" style="fill:#fff;fill-rule:nonzero" transform="translate(0 16)"/><path d="M6 14c-.55 0-1.021-.196-1.412-.587A1.93 1.93 0 0 1 4 12c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 6 10c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413a1.931 1.931 0 0 1-.587 1.413c-.37.382-.881.594-1.413.587Zm6 0c-.55 0-1.021-.196-1.412-.587A1.93 1.93 0 0 1 10 12c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 12 10c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413a1.931 1.931 0 0 1-.587 1.413c-.37.382-.881.594-1.413.587Zm6 0c-.55 0-1.021-.196-1.412-.587A1.93 1.93 0 0 1 16 12c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 18 10c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413a1.931 1.931 0 0 1-.587 1.413c-.37.382-.881.594-1.413.587Z" style="fill:#fff;fill-rule:nonzero" transform="matrix(.875 0 0 .875 13.5 13.558)"/><path d="M5 22c-.55 0-1.021-.196-1.412-.587A1.93 1.93 0 0 1 3 20V6c0-.55.196-1.021.588-1.413A1.925 1.925 0 0 1 5 4h1V2h2v2h8V2h2v2h1c.55 0 1.021.196 1.413.587.391.392.587.863.587 1.413v14a1.931 1.931 0 0 1-.587 1.413c-.37.382-.881.594-1.413.587H5Zm0-2h14V10H5v10Z" style="fill:#fff;fill-rule:nonzero" transform="matrix(.73887 0 0 .73887 -.924 -.495)"/><path d="M1 20v-2.8c0-.567.146-1.087.438-1.563A2.916 2.916 0 0 1 2.6 14.55a14.859 14.859 0 0 1 3.15-1.163A13.738 13.738 0 0 1 9 13c1.1 0 2.183.129 3.25.387 1.067.259 2.117.646 3.15 1.163.483.25.871.613 1.163 1.087.291.476.437.996.437 1.563V20H1Zm18 0v-3c0-.733-.204-1.437-.612-2.113-.409-.675-.988-1.254-1.738-1.737 1.575.179 3.102.654 4.5 1.4.6.333 1.058.704 1.375 1.113.317.408.475.854.475 1.337v3h-4ZM9 12c-1.1 0-2.042-.392-2.825-1.175C5.392 10.042 5 9.1 5 8s.392-2.042 1.175-2.825C6.958 4.392 7.9 4 9 4s2.042.392 2.825 1.175C12.608 5.958 13 6.9 13 8s-.392 2.042-1.175 2.825C11.042 11.608 10.1 12 9 12Zm10-4c0 1.1-.392 2.042-1.175 2.825C17.042 11.608 16.1 12 15 12c-.183 0-.417-.021-.7-.062a6.142 6.142 0 0 1-.7-.138 5.956 5.956 0 0 0 1.038-1.775A5.785 5.785 0 0 0 15 8c0-.7-.121-1.375-.362-2.025A5.956 5.956 0 0 0 13.6 4.2c.233-.083.467-.137.7-.163.233-.025.467-.037.7-.037 1.1 0 2.042.392 2.825 1.175C18.608 5.958 19 6.9 19 8Z" style="fill:#fff;fill-rule:nonzero" transform="matrix(.62273 0 0 .62273 16.416 1.062)"/></svg> <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#fff"><path d="M230.67-160q-29.67 0-50.17-20.5T160-230.67q0-29.66 20.5-50.16 20.5-20.5 50.17-20.5 29.66 0 50.16 20.5 20.5 20.5 20.5 50.16 0 29.67-20.5 50.17T230.67-160ZM480-160q-29.67 0-50.17-20.5t-20.5-50.17q0-29.66 20.5-50.16 20.5-20.5 50.17-20.5t50.17 20.5q20.5 20.5 20.5 50.16 0 29.67-20.5 50.17T480-160Zm249.33 0q-29.66 0-50.16-20.5-20.5-20.5-20.5-50.17 0-29.66 20.5-50.16 20.5-20.5 50.16-20.5 29.67 0 50.17 20.5t20.5 50.16q0 29.67-20.5 50.17T729.33-160ZM230.67-409.33q-29.67 0-50.17-20.5T160-480q0-29.67 20.5-50.17t50.17-20.5q29.66 0 50.16 20.5 20.5 20.5 20.5 50.17t-20.5 50.17q-20.5 20.5-50.16 20.5Zm249.33 0q-29.67 0-50.17-20.5T409.33-480q0-29.67 20.5-50.17t50.17-20.5q29.67 0 50.17 20.5t20.5 50.17q0 29.67-20.5 50.17T480-409.33Zm249.33 0q-29.66 0-50.16-20.5-20.5-20.5-20.5-50.17t20.5-50.17q20.5-20.5 50.16-20.5 29.67 0 50.17 20.5T800-480q0 29.67-20.5 50.17t-50.17 20.5ZM230.67-658.67q-29.67 0-50.17-20.5T160-729.33q0-29.67 20.5-50.17t50.17-20.5q29.66 0 50.16 20.5 20.5 20.5 20.5 50.17 0 29.66-20.5 50.16-20.5 20.5-50.16 20.5Zm249.33 0q-29.67 0-50.17-20.5t-20.5-50.16q0-29.67 20.5-50.17T480-800q29.67 0 50.17 20.5t20.5 50.17q0 29.66-20.5 50.16-20.5 20.5-50.17 20.5Zm249.33 0q-29.66 0-50.16-20.5-20.5-20.5-20.5-50.16 0-29.67 20.5-50.17t50.16-20.5q29.67 0 50.17 20.5t20.5 50.17q0 29.66-20.5 50.16-20.5 20.5-50.17 20.5Z"/></svg>
Режим "рядом" Свайп Оверлей

До

Ширина:  |  Высота:  |  Размер: 2.5 KiB

После

Ширина:  |  Высота:  |  Размер: 1.4 KiB