mirror of
https://github.com/status-im/status-desktop.git
synced 2025-01-17 18:11:54 +00:00
Alexandra Betouni
Michał Cieślak
parent
67330d68ae
commit
11071a903e
@ -299,14 +299,14 @@ Rectangle {
|
||||
StatusChatList {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
chatListItems.model: demoChatListItems
|
||||
chatListItems.model: models.demoChatListItems
|
||||
selectedChatId: "0"
|
||||
onChatItemSelected: selectedChatId = id
|
||||
onChatItemUnmuted: {
|
||||
for (var i = 0; i < demoChatListItems.count; i++) {
|
||||
let item = demoChatListItems.get(i);
|
||||
for (var i = 0; i < models.demoChatListItems.count; i++) {
|
||||
let item = models.demoChatListItems.get(i);
|
||||
if (item.chatId === id) {
|
||||
demoChatListItems.setProperty(i, "muted", false)
|
||||
models.demoChatListItems.setProperty(i, "muted", false)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -412,7 +412,7 @@ Rectangle {
|
||||
handle: Rectangle {
|
||||
implicitWidth: 5
|
||||
color: SplitHandle.pressed ? Theme.palette.baseColor2
|
||||
: (SplitHandle.hovered ? Qt.darker(Theme.palette.baseColor5, 1.1) : "transparent")
|
||||
: (SplitHandle.hovered ? Qt.darker(Theme.palette.baseColor5, 1.1) : "transparent")
|
||||
}
|
||||
leftPanel: Item {
|
||||
id: leftPanel
|
||||
@ -467,8 +467,8 @@ Rectangle {
|
||||
width: leftPanel.width
|
||||
height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
|
||||
|
||||
chatList.model: demoCommunityChatListItems
|
||||
categoryList.model: demoCommunityCategoryItems
|
||||
chatList.model: models.demoCommunityChatListItems
|
||||
categoryList.model: models.demoCommunityCategoryItems
|
||||
|
||||
showCategoryActionButtons: true
|
||||
onChatItemSelected: selectedChatId = id
|
||||
@ -557,6 +557,7 @@ Rectangle {
|
||||
|
||||
centerPanel: Item {
|
||||
StatusChatToolBar {
|
||||
id: statusChatToolBar
|
||||
anchors.top: parent.top
|
||||
width: parent.width
|
||||
|
||||
@ -564,12 +565,61 @@ Rectangle {
|
||||
chatInfoButton.subTitle: "Community Chat"
|
||||
chatInfoButton.icon.color: Theme.palette.miscColor6
|
||||
chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
|
||||
searchButton.onClicked: searchButton.highlighted = !searchButton.highlighted
|
||||
onSearchButtonClicked: {
|
||||
searchButton.highlighted = !searchButton.highlighted;
|
||||
searchPopup.searchSelectionButton.primaryText = demoCommunityDetailModal.header.title;
|
||||
searchPopup.searchSelectionButton.image.source = demoCommunityDetailModal.header.image.source;
|
||||
searchPopup.open();
|
||||
}
|
||||
membersButton.onClicked: membersButton.highlighted = !membersButton.highlighted
|
||||
onMembersButtonClicked: {
|
||||
root.showRightPanel = !root.showRightPanel;
|
||||
}
|
||||
}
|
||||
|
||||
StatusSearchPopup {
|
||||
id: searchPopup
|
||||
searchOptionsPopupMenu: searchPopupMenu
|
||||
onAboutToHide: {
|
||||
if (searchPopupMenu.visible) {
|
||||
searchPopupMenu.close();
|
||||
}
|
||||
//clear menu
|
||||
for (var i = 2; i < searchPopupMenu.count; i++) {
|
||||
searchPopupMenu.removeItem(searchPopupMenu.takeItem(i));
|
||||
}
|
||||
}
|
||||
onClosed: {
|
||||
statusChatToolBar.searchButton.highlighted = false
|
||||
searchPopupMenu.dismiss();
|
||||
}
|
||||
onSearchTextChanged: {
|
||||
if (searchPopup.searchText !== "") {
|
||||
searchPopup.loading = true;
|
||||
searchModelSimTimer.start();
|
||||
} else {
|
||||
searchPopup.searchResults = [];
|
||||
searchModelSimTimer.stop();
|
||||
}
|
||||
}
|
||||
Timer {
|
||||
id: searchModelSimTimer
|
||||
interval: 500
|
||||
onTriggered: {
|
||||
if (searchPopup.searchText.startsWith("c")) {
|
||||
searchPopup.searchResults = models.searchResultsA;
|
||||
} else {
|
||||
searchPopup.searchResults = models.searchResultsB;
|
||||
}
|
||||
searchPopup.loading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
StatusSearchLocationMenu {
|
||||
id: searchPopupMenu
|
||||
searchPopup: searchPopup
|
||||
locatioModel: models.optionsModel
|
||||
}
|
||||
}
|
||||
|
||||
rightPanel: Item {
|
||||
@ -654,7 +704,7 @@ Rectangle {
|
||||
spacing: 4
|
||||
|
||||
Repeater {
|
||||
model: demoProfileGeneralMenuItems
|
||||
model: models.demoProfileGeneralMenuItems
|
||||
delegate: StatusNavigationListItem {
|
||||
title: model.title
|
||||
icon.name: model.icon
|
||||
@ -664,7 +714,7 @@ Rectangle {
|
||||
StatusListSectionHeadline { text: "Settings" }
|
||||
|
||||
Repeater {
|
||||
model: demoProfileSettingsMenuItems
|
||||
model: models.demoProfileSettingsMenuItems
|
||||
delegate: StatusNavigationListItem {
|
||||
title: model.title
|
||||
icon.name: model.icon
|
||||
@ -678,7 +728,7 @@ Rectangle {
|
||||
}
|
||||
|
||||
Repeater {
|
||||
model: demoProfileOtherMenuItems
|
||||
model: models.demoProfileOtherMenuItems
|
||||
delegate: StatusNavigationListItem {
|
||||
title: model.title
|
||||
icon.name: model.icon
|
||||
@ -833,194 +883,7 @@ Rectangle {
|
||||
}
|
||||
}
|
||||
|
||||
ListModel {
|
||||
id: demoChatListItems
|
||||
ListElement {
|
||||
chatId: "0"
|
||||
name: "#status"
|
||||
chatType: StatusChatListItem.Type.PublicChat
|
||||
muted: false
|
||||
unreadMessagesCount: 0
|
||||
mentionsCount: 0
|
||||
color: "blue"
|
||||
}
|
||||
ListElement {
|
||||
chatId: "1"
|
||||
name: "status-desktop"
|
||||
chatType: StatusChatListItem.Type.PublicChat
|
||||
muted: false
|
||||
color: "red"
|
||||
unreadMessagesCount: 1
|
||||
mentionsCount: 1
|
||||
}
|
||||
ListElement {
|
||||
chatId: "2"
|
||||
name: "Amazing Funny Squirrel"
|
||||
chatType: StatusChatListItem.Type.OneToOneChat
|
||||
muted: false
|
||||
color: "green"
|
||||
identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
|
||||
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
||||
unreadMessagesCount: 0
|
||||
}
|
||||
ListElement {
|
||||
chatId: "3"
|
||||
name: "Black Ops"
|
||||
chatType: StatusChatListItem.Type.GroupChat
|
||||
muted: false
|
||||
color: "purple"
|
||||
unreadMessagesCount: 0
|
||||
}
|
||||
ListElement {
|
||||
chatId: "4"
|
||||
name: "Spectacular Growing Otter"
|
||||
chatType: StatusChatListItem.Type.OneToOneChat
|
||||
muted: true
|
||||
color: "Orange"
|
||||
unreadMessagesCount: 0
|
||||
}
|
||||
ListElement {
|
||||
chatId: "5"
|
||||
name: "channel-with-a-super-duper-long-name"
|
||||
chatType: StatusChatListItem.Type.PublicChat
|
||||
muted: false
|
||||
color: "green"
|
||||
unreadMessagesCount: 0
|
||||
}
|
||||
}
|
||||
|
||||
ListModel {
|
||||
id: demoCommunityChatListItems
|
||||
ListElement {
|
||||
chatId: "0"
|
||||
name: "general"
|
||||
chatType: StatusChatListItem.Type.CommunityChat
|
||||
muted: false
|
||||
unreadMessagesCount: 0
|
||||
color: "orange"
|
||||
}
|
||||
ListElement {
|
||||
chatId: "1"
|
||||
name: "random"
|
||||
chatType: StatusChatListItem.Type.CommunityChat
|
||||
muted: false
|
||||
unreadMessagesCount: 0
|
||||
color: "orange"
|
||||
categoryId: "public"
|
||||
}
|
||||
ListElement {
|
||||
chatId: "2"
|
||||
name: "watercooler"
|
||||
chatType: StatusChatListItem.Type.CommunityChat
|
||||
muted: false
|
||||
unreadMessagesCount: 0
|
||||
color: "orange"
|
||||
categoryId: "public"
|
||||
}
|
||||
ListElement {
|
||||
chatId: "3"
|
||||
name: "language-design"
|
||||
chatType: StatusChatListItem.Type.CommunityChat
|
||||
muted: false
|
||||
unreadMessagesCount: 0
|
||||
color: "orange"
|
||||
categoryId: "dev"
|
||||
}
|
||||
}
|
||||
|
||||
ListModel {
|
||||
id: demoCommunityCategoryItems
|
||||
ListElement {
|
||||
categoryId: "public"
|
||||
name: "Public"
|
||||
}
|
||||
ListElement {
|
||||
categoryId: "dev"
|
||||
name: "Development"
|
||||
}
|
||||
}
|
||||
|
||||
ListModel {
|
||||
id: demoProfileGeneralMenuItems
|
||||
|
||||
ListElement {
|
||||
title: "My Profile"
|
||||
icon: "profile"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "Contacts"
|
||||
icon: "contact"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "ENS Usernames"
|
||||
icon: "username"
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ListModel {
|
||||
id: demoProfileSettingsMenuItems
|
||||
|
||||
ListElement {
|
||||
title: "Privacy & Security"
|
||||
icon: "security"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "Appearance"
|
||||
icon: "appearance"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "Browser"
|
||||
icon: "browser"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "Sounds"
|
||||
icon: "sound"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "Language"
|
||||
icon: "language"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "Notifications"
|
||||
icon: "notification"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "Sync settings"
|
||||
icon: "mobile"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "Advanced"
|
||||
icon: "settings"
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ListModel {
|
||||
id: demoProfileOtherMenuItems
|
||||
|
||||
ListElement {
|
||||
title: "Need help?"
|
||||
icon: "help"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "About"
|
||||
icon: "info"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "Sign out & Quit"
|
||||
icon: "logout"
|
||||
}
|
||||
Models {
|
||||
id: models
|
||||
}
|
||||
}
|
||||
|
||||
@ -295,6 +295,27 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
|
||||
type: StatusListItem.Type.Danger
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "List Item with Badge"
|
||||
subTitle: "Subtitle"
|
||||
image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
|
||||
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
||||
image.isIdenticon: true
|
||||
badge.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
badge.primaryText: "CryptoKitties"
|
||||
badge.secondaryText: "#test"
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "List Item with Badge 2"
|
||||
subTitle: "Subtitle"
|
||||
icon.isLetterIdenticon: true
|
||||
badge.primaryText: "CryptoKitties"
|
||||
badge.secondaryText: "#test"
|
||||
badge.icon.color: "orange"
|
||||
badge.icon.isLetterIdenticon: true
|
||||
}
|
||||
|
||||
StatusDescriptionListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
|
||||
309
ui/StatusQ/sandbox/Models.qml
Normal file
309
ui/StatusQ/sandbox/Models.qml
Normal file
@ -0,0 +1,309 @@
|
||||
import QtQuick 2.14
|
||||
import StatusQ.Components 0.1
|
||||
|
||||
QtObject {
|
||||
|
||||
property var demoChatListItems: ListModel {
|
||||
id: demoChatListItems
|
||||
ListElement {
|
||||
chatId: "0"
|
||||
name: "#status"
|
||||
chatType: StatusChatListItem.Type.PublicChat
|
||||
muted: false
|
||||
unreadMessagesCount: 0
|
||||
mentionsCount: 0
|
||||
color: "blue"
|
||||
}
|
||||
ListElement {
|
||||
chatId: "1"
|
||||
name: "status-desktop"
|
||||
chatType: StatusChatListItem.Type.PublicChat
|
||||
muted: false
|
||||
color: "red"
|
||||
unreadMessagesCount: 1
|
||||
mentionsCount: 1
|
||||
}
|
||||
ListElement {
|
||||
chatId: "2"
|
||||
name: "Amazing Funny Squirrel"
|
||||
chatType: StatusChatListItem.Type.OneToOneChat
|
||||
muted: false
|
||||
color: "green"
|
||||
identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
|
||||
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
||||
unreadMessagesCount: 0
|
||||
}
|
||||
ListElement {
|
||||
chatId: "3"
|
||||
name: "Black Ops"
|
||||
chatType: StatusChatListItem.Type.GroupChat
|
||||
muted: false
|
||||
color: "purple"
|
||||
unreadMessagesCount: 0
|
||||
}
|
||||
ListElement {
|
||||
chatId: "4"
|
||||
name: "Spectacular Growing Otter"
|
||||
chatType: StatusChatListItem.Type.OneToOneChat
|
||||
muted: true
|
||||
color: "Orange"
|
||||
unreadMessagesCount: 0
|
||||
}
|
||||
ListElement {
|
||||
chatId: "5"
|
||||
name: "channel-with-a-super-duper-long-name"
|
||||
chatType: StatusChatListItem.Type.PublicChat
|
||||
muted: false
|
||||
color: "green"
|
||||
unreadMessagesCount: 0
|
||||
}
|
||||
}
|
||||
|
||||
property var demoCommunityChatListItems: ListModel {
|
||||
id: demoCommunityChatListItems
|
||||
ListElement {
|
||||
chatId: "0"
|
||||
name: "general"
|
||||
chatType: StatusChatListItem.Type.CommunityChat
|
||||
muted: false
|
||||
unreadMessagesCount: 0
|
||||
color: "orange"
|
||||
}
|
||||
ListElement {
|
||||
chatId: "1"
|
||||
name: "random"
|
||||
chatType: StatusChatListItem.Type.CommunityChat
|
||||
muted: false
|
||||
unreadMessagesCount: 0
|
||||
color: "orange"
|
||||
categoryId: "public"
|
||||
}
|
||||
ListElement {
|
||||
chatId: "2"
|
||||
name: "watercooler"
|
||||
chatType: StatusChatListItem.Type.CommunityChat
|
||||
muted: false
|
||||
unreadMessagesCount: 0
|
||||
color: "orange"
|
||||
categoryId: "public"
|
||||
}
|
||||
ListElement {
|
||||
chatId: "3"
|
||||
name: "language-design"
|
||||
chatType: StatusChatListItem.Type.CommunityChat
|
||||
muted: false
|
||||
unreadMessagesCount: 0
|
||||
color: "orange"
|
||||
categoryId: "dev"
|
||||
}
|
||||
}
|
||||
|
||||
property var demoCommunityCategoryItems: ListModel {
|
||||
id: demoCommunityCategoryItems
|
||||
ListElement {
|
||||
categoryId: "public"
|
||||
name: "Public"
|
||||
}
|
||||
ListElement {
|
||||
categoryId: "dev"
|
||||
name: "Development"
|
||||
}
|
||||
}
|
||||
|
||||
property var demoProfileGeneralMenuItems: ListModel {
|
||||
id: demoProfileGeneralMenuItems
|
||||
|
||||
ListElement {
|
||||
title: "My Profile"
|
||||
icon: "profile"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "Contacts"
|
||||
icon: "contact"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "ENS Usernames"
|
||||
icon: "username"
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
property var demoProfileSettingsMenuItems: ListModel {
|
||||
id: demoProfileSettingsMenuItems
|
||||
|
||||
ListElement {
|
||||
title: "Privacy & Security"
|
||||
icon: "security"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "Appearance"
|
||||
icon: "appearance"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "Browser"
|
||||
icon: "browser"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "Sounds"
|
||||
icon: "sound"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "Language"
|
||||
icon: "language"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "Notifications"
|
||||
icon: "notification"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "Sync settings"
|
||||
icon: "mobile"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "Advanced"
|
||||
icon: "settings"
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
property var demoProfileOtherMenuItems: ListModel {
|
||||
id: demoProfileOtherMenuItems
|
||||
|
||||
ListElement {
|
||||
title: "Need help?"
|
||||
icon: "help"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "About"
|
||||
icon: "info"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "Sign out & Quit"
|
||||
icon: "logout"
|
||||
}
|
||||
}
|
||||
|
||||
//dummy search popup models
|
||||
property var searchResultsA: ListModel {
|
||||
ListElement { name: "@Flea"; sectionName: "Messages"; time: "18:55 AM"; content: "lorem ipsum <font color='#4360DF'>@Nick</font> dolor sit amet";
|
||||
badgeImage: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg";
|
||||
badgePrimaryText: "CryptoKities";
|
||||
badgeSecondaryText: "";
|
||||
badgeIdenticonColor: "";
|
||||
isLetterIdenticon: false }
|
||||
ListElement { name: "core"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
|
||||
ListElement { name: "communities-phase3"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
|
||||
ListElement { name: "core-ui"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
|
||||
ListElement { name: "desktop"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
|
||||
ListElement { name: "Crocodile Vanilla Bird"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
|
||||
ListElement { name: "carmen eth"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
|
||||
ListElement { name: "CryptoKitties"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
|
||||
ListElement { name: "MyCommunity"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
|
||||
ListElement { name: "Foo"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
|
||||
}
|
||||
property var searchResultsB: ListModel {
|
||||
ListElement { name: "@Ant"; sectionName: "Messages"; time: "11:43 AM"; content: "<font color='#4360DF'>@John</font>, lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ";
|
||||
badgeImage: "";
|
||||
badgePrimaryText: "CryptoKities";
|
||||
badgeSecondaryText: "#design";
|
||||
badgeIdenticonColor: "pink"; isLetterIdenticon: true }
|
||||
ListElement { name: "support"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
|
||||
ListElement { name: "desktop-ui"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
|
||||
ListElement { name: "climate-change"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
|
||||
ListElement { name: "food"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: "pink"; isLetterIdenticon: true }
|
||||
ListElement { name: "CryptoKitties"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
|
||||
ListElement { name: "CryptoRangers"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: ""; isLetterIdenticon: false }
|
||||
ListElement { name: "Foo"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIdenticonColor: "orange"; isLetterIdenticon: true }
|
||||
}
|
||||
|
||||
property ListModel optionsModel: ListModel {
|
||||
ListElement {
|
||||
title: "Item with icon";
|
||||
imageSource: ""
|
||||
iconName: "chat"
|
||||
iconColor: ""
|
||||
isIdenticon: false
|
||||
subItems: [
|
||||
ListElement {
|
||||
text: "Profile image item"
|
||||
imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
iconName: ""
|
||||
iconColor: ""
|
||||
isIdenticon: false
|
||||
},
|
||||
ListElement {
|
||||
text: "identicon item"
|
||||
imageSource: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
||||
iconName: ""
|
||||
iconColor: ""
|
||||
isIdenticon: true
|
||||
}]}
|
||||
ListElement {
|
||||
title: "Community item";
|
||||
imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
iconName: ""
|
||||
iconColor: ""
|
||||
isIdenticon: false
|
||||
subItems: [
|
||||
ListElement {
|
||||
text: "welcome"
|
||||
imageSource: ""
|
||||
iconName: "channel"
|
||||
iconColor: ""
|
||||
isIdenticon: false
|
||||
},
|
||||
ListElement {
|
||||
text: "support"
|
||||
imageSource: ""
|
||||
iconName: "channel"
|
||||
iconColor: ""
|
||||
isIdenticon: false
|
||||
},
|
||||
ListElement {
|
||||
text: "news"
|
||||
imageSource: ""
|
||||
iconName: "channel"
|
||||
iconColor: ""
|
||||
isIdenticon: false
|
||||
}]}
|
||||
ListElement {
|
||||
title: "Other";
|
||||
imageSource: "";
|
||||
iconName: "info"
|
||||
iconColor: ""
|
||||
isIdenticon: false
|
||||
subItems: [
|
||||
ListElement {
|
||||
text: "news"
|
||||
imageSource: ""
|
||||
iconName: "channel"
|
||||
iconColor: ""
|
||||
isIdenticon: false
|
||||
}]}
|
||||
ListElement {
|
||||
title: "Letter identicon";
|
||||
imageSource: "";
|
||||
iconName: ""
|
||||
iconColor: "red"
|
||||
isIdenticon: false
|
||||
subItems: [
|
||||
ListElement {
|
||||
text: "news"
|
||||
imageSource: ""
|
||||
iconName: "channel"
|
||||
iconColor: ""
|
||||
isIdenticon: false
|
||||
}]}
|
||||
}
|
||||
}
|
||||
@ -46,7 +46,7 @@ GridLayout {
|
||||
|
||||
StatusPopupMenu {
|
||||
id: complexMenu
|
||||
subMenuItemIcons: ['info']
|
||||
subMenuItemIcons: [{ icon: 'info' }]
|
||||
|
||||
StatusMenuItem {
|
||||
text: "One"
|
||||
@ -82,7 +82,7 @@ GridLayout {
|
||||
id: customMenu
|
||||
|
||||
subMenuItemIcons: [
|
||||
"chat",
|
||||
{ icon: "chat" },
|
||||
{
|
||||
source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
},
|
||||
|
||||
@ -14,7 +14,9 @@ Rectangle {
|
||||
radius: width / 2
|
||||
|
||||
StatusBaseText {
|
||||
text: (statusLetterIdenticon.name.charAt(0) == "#" ? statusLetterIdenticon.name.charAt(1) : statusLetterIdenticon.name.charAt(0)).toUpperCase()
|
||||
text: ((statusLetterIdenticon.name.charAt(0) === "#")
|
||||
|| (statusLetterIdenticon.name.charAt(0) === "@") ?
|
||||
statusLetterIdenticon.name.charAt(1) : statusLetterIdenticon.name.charAt(0)).toUpperCase()
|
||||
font.weight: Font.Bold
|
||||
font.pixelSize: statusLetterIdenticon.letterSize
|
||||
color: Qt.rgba(255, 255, 255, 0.7)
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import QtQuick 2.13
|
||||
import QtQuick.Controls 2.12
|
||||
import QtQuick.Layouts 1.12
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Components 0.1
|
||||
@ -33,8 +35,11 @@ Rectangle {
|
||||
radius: 8
|
||||
|
||||
property string title: ""
|
||||
property string titleAsideText: ""
|
||||
property string subTitle: ""
|
||||
property string tertiaryTitle: ""
|
||||
property alias badge: statusListItemBadge
|
||||
|
||||
property real leftPadding: 16
|
||||
property real rightPadding: 16
|
||||
property bool enabled: true
|
||||
@ -107,6 +112,7 @@ Rectangle {
|
||||
}
|
||||
return !!statusListItem.icon.name ? statusRoundedIcon : statusRoundedImage
|
||||
}
|
||||
|
||||
active: statusListItem.icon.isLetterIdenticon ||
|
||||
!!statusListItem.icon.name ||
|
||||
!!statusListItem.image.source.toString()
|
||||
@ -158,15 +164,15 @@ Rectangle {
|
||||
anchors.leftMargin: statusListItem.leftPadding
|
||||
anchors.rightMargin: statusListItem.rightPadding
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
height: statusListItemTitle.height +
|
||||
(statusListItemSubTitle.visible ? statusListItemSubTitle.height : 0) +
|
||||
(statusListItemTertiaryTitle.visible ? statusListItemTertiaryTitle.height : 0)
|
||||
height: childrenRect.height
|
||||
|
||||
StatusBaseText {
|
||||
id: statusListItemTitle
|
||||
text: statusListItem.title
|
||||
width: parent.width
|
||||
width: contentWidth < (parent.width - statusListItemTitleAsideText.contentWidth) ?
|
||||
contentWidth : (parent.width - statusListItemTitleAsideText.contentWidth)
|
||||
font.pixelSize: 15
|
||||
height: visible ? contentHeight : 0
|
||||
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
|
||||
color: {
|
||||
if (!statusListItem.enabled) {
|
||||
@ -183,6 +189,17 @@ Rectangle {
|
||||
}
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
id: statusListItemTitleAsideText
|
||||
anchors.left: statusListItemTitle.right
|
||||
anchors.leftMargin: 4
|
||||
anchors.verticalCenter: statusListItemTitle.verticalCenter
|
||||
text: statusListItem.titleAsideText
|
||||
font.pixelSize: 10
|
||||
color: Theme.palette.baseColor1
|
||||
visible: !!statusListItem.titleAsideText
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
id: statusListItemSubTitle
|
||||
anchors.top: statusListItemTitle.bottom
|
||||
@ -190,6 +207,7 @@ Rectangle {
|
||||
text: statusListItem.subTitle
|
||||
font.pixelSize: 15
|
||||
color: !statusListItem.enabled || !statusListItem.tertiaryTitle ? Theme.palette.baseColor1 : Theme.palette.directColor1
|
||||
height: visible ? contentHeight : 0
|
||||
visible: !!statusListItem.subTitle
|
||||
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
|
||||
}
|
||||
@ -198,12 +216,20 @@ Rectangle {
|
||||
id: statusListItemTertiaryTitle
|
||||
anchors.top: statusListItemSubTitle.bottom
|
||||
width: parent.width
|
||||
height: visible ? contentHeight : 0
|
||||
text: statusListItem.tertiaryTitle
|
||||
color: Theme.palette.baseColor1
|
||||
font.pixelSize: 13
|
||||
visible: !!statusListItem.tertiaryTitle
|
||||
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
|
||||
}
|
||||
|
||||
StatusListItemBadge {
|
||||
id: statusListItemBadge
|
||||
anchors.top: statusListItemTertiaryTitle.bottom
|
||||
width: contentItem.width
|
||||
implicitHeight: visible ? 22 : 0
|
||||
}
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
|
||||
80
ui/StatusQ/src/StatusQ/Components/StatusListItemBadge.qml
Normal file
80
ui/StatusQ/src/StatusQ/Components/StatusListItemBadge.qml
Normal file
@ -0,0 +1,80 @@
|
||||
import QtQuick 2.13
|
||||
import QtQuick.Controls 2.12
|
||||
import QtQuick.Layouts 1.12
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
Control {
|
||||
id: root
|
||||
implicitWidth: contentItem.width
|
||||
implicitHeight: visible ? 22 : 0
|
||||
visible: !!root.primaryText
|
||||
|
||||
property string primaryText: ""
|
||||
property string secondaryText: ""
|
||||
|
||||
property StatusImageSettings image: StatusImageSettings {
|
||||
height: 16
|
||||
width: 16
|
||||
isIdenticon: false
|
||||
}
|
||||
property StatusIconSettings icon: StatusIconSettings {
|
||||
height: 16
|
||||
width: 16
|
||||
isLetterIdenticon: false
|
||||
background: StatusIconBackgroundSettings {}
|
||||
color: "transparent"
|
||||
}
|
||||
|
||||
background: Rectangle {
|
||||
anchors.fill: parent
|
||||
color: "transparent"
|
||||
radius: 11
|
||||
border.color: Theme.palette.directColor7
|
||||
}
|
||||
|
||||
contentItem: Item {
|
||||
id: contentItem
|
||||
width: (contentItemRow.width + 10)
|
||||
height: parent.height
|
||||
RowLayout {
|
||||
id: contentItemRow
|
||||
anchors.centerIn: parent
|
||||
anchors.horizontalCenterOffset: -spacing
|
||||
spacing: 2
|
||||
StatusRoundedImage {
|
||||
implicitWidth: root.image.width
|
||||
implicitHeight: root.image.height
|
||||
visible: !root.icon.isLetterIdenticon
|
||||
image.source: root.image.source
|
||||
border.color: Theme.palette.baseColor1
|
||||
border.width: root.image.isIdenticon ? 1 : 0
|
||||
}
|
||||
StatusLetterIdenticon {
|
||||
implicitWidth: root.icon.width
|
||||
implicitHeight: root.icon.width
|
||||
letterSize: 11
|
||||
visible: root.icon.isLetterIdenticon
|
||||
color: root.icon.color
|
||||
name: root.primaryText
|
||||
}
|
||||
StatusBaseText {
|
||||
font.weight: Font.Medium
|
||||
color: Theme.palette.baseColor1
|
||||
text: root.primaryText
|
||||
}
|
||||
StatusIcon {
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
visible: !!root.secondaryText
|
||||
color: Theme.palette.baseColor1
|
||||
icon: "next"
|
||||
}
|
||||
StatusBaseText {
|
||||
font.weight: Font.Medium
|
||||
color: Theme.palette.baseColor1
|
||||
visible: !!root.secondaryText
|
||||
text: root.secondaryText
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -19,3 +19,4 @@ StatusNavigationPanelHeadline 0.1 StatusNavigationPanelHeadline.qml
|
||||
StatusRoundIcon 0.1 StatusRoundIcon.qml
|
||||
StatusRoundedImage 0.1 StatusRoundedImage.qml
|
||||
StatusMacWindowButtons 0.1 StatusMacWindowButtons.qml
|
||||
StatusListItemBadge 0.1 StatusListItemBadge.qml
|
||||
|
||||
@ -179,8 +179,8 @@ Item {
|
||||
|
||||
StatusFlatRoundButton {
|
||||
id: clearButtton
|
||||
visible: edit.text.length != 0 &&
|
||||
statusBaseInput.clearable &&
|
||||
visible: edit.text.length != 0 &&
|
||||
statusBaseInput.clearable &&
|
||||
!statusBaseInput.multiline &&
|
||||
edit.activeFocus
|
||||
anchors.right: parent.right
|
||||
|
||||
@ -4,9 +4,8 @@ import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
|
||||
Rectangle {
|
||||
Item {
|
||||
id: root
|
||||
|
||||
implicitWidth: 480
|
||||
height: (label.visible ?
|
||||
label.anchors.topMargin +
|
||||
@ -22,7 +21,6 @@ Rectangle {
|
||||
errorMessage.height :
|
||||
0) + 8
|
||||
|
||||
color: "transparent"
|
||||
property alias input: statusBaseInput
|
||||
property string label: ""
|
||||
property int charLimit: 0
|
||||
|
||||
@ -19,6 +19,8 @@ QC.Popup {
|
||||
property alias contentComponent: contentLoader.item
|
||||
property alias rightButtons: footerImpl.rightButtons
|
||||
property alias leftButtons: footerImpl.leftButtons
|
||||
property bool showHeader: true
|
||||
property bool showFooter: true
|
||||
|
||||
signal editButtonClicked()
|
||||
|
||||
@ -46,8 +48,9 @@ QC.Popup {
|
||||
width: parent.width
|
||||
Spares.StatusModalHeader {
|
||||
id: headerImpl
|
||||
width: 480
|
||||
width: visible ? parent.width : 0
|
||||
|
||||
visible: statusModal.showHeader
|
||||
title: header.title
|
||||
subTitle: header.subTitle
|
||||
image: header.image
|
||||
@ -59,14 +62,15 @@ QC.Popup {
|
||||
|
||||
Loader {
|
||||
id: contentLoader
|
||||
width: parent.width
|
||||
active: true
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
sourceComponent: statusModal.content
|
||||
}
|
||||
|
||||
Spares.StatusModalFooter {
|
||||
id: footerImpl
|
||||
width: 480
|
||||
width: visible ? parent.width : 0
|
||||
visible: statusModal.showFooter
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,16 +10,18 @@ import StatusQ.Popups 0.1
|
||||
|
||||
Menu {
|
||||
id: statusPopupMenu
|
||||
|
||||
closePolicy: Popup.CloseOnReleaseOutside | Popup.CloseOnEscape
|
||||
closePolicy: Popup.CloseOnReleaseOutsideParent | Popup.CloseOnEscape
|
||||
topPadding: 8
|
||||
bottomPadding: 8
|
||||
|
||||
property int menuItemCount: 0
|
||||
property var subMenuItemIcons: []
|
||||
|
||||
property var openHandler
|
||||
property var closeHandler
|
||||
|
||||
signal menuItemClicked(int menuIndex)
|
||||
|
||||
onOpened: {
|
||||
if (typeof openHandler === "function") {
|
||||
openHandler()
|
||||
@ -34,19 +36,21 @@ Menu {
|
||||
|
||||
delegate: MenuItem {
|
||||
id: statusPopupMenuItem
|
||||
|
||||
implicitWidth: parent ? parent.width : 0
|
||||
implicitHeight: action.enabled ? 38 : 0
|
||||
|
||||
property int subMenuIndex
|
||||
|
||||
Component.onCompleted: {
|
||||
if (subMenu) {
|
||||
if (!!subMenu) {
|
||||
subMenuIndex = statusPopupMenu.menuItemCount
|
||||
statusPopupMenu.menuItemCount += 1
|
||||
}
|
||||
}
|
||||
|
||||
action: StatusMenuItem {}
|
||||
action: StatusMenuItem {
|
||||
onTriggered: { statusPopupMenu.menuItemClicked(statusPopupMenuItem.subMenuIndex); }
|
||||
}
|
||||
|
||||
Component {
|
||||
id: indicatorComponent
|
||||
@ -63,12 +67,17 @@ Menu {
|
||||
}
|
||||
rotation: statusPopupMenuItem.action.iconRotation
|
||||
icon: {
|
||||
if (statusPopupMenuItem.subMenu) {
|
||||
return statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex]
|
||||
if (statusPopupMenuItem.subMenu && !!statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex] &&
|
||||
statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex].icon.toString() !== "") {
|
||||
return statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex].icon;
|
||||
} else if (!!statusPopupMenuItem.action && statusPopupMenuItem.action.icon.name !== "") {
|
||||
return statusPopupMenuItem.action.icon.name;
|
||||
} else if (statusPopupMenuItem.action.iconSettings.name !== "") {
|
||||
return statusPopupMenuItem.action.iconSettings.name;
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
return statusPopupMenuItem.action.icon.name ||
|
||||
statusPopupMenuItem.action.iconSettings.name
|
||||
}
|
||||
}
|
||||
color: {
|
||||
let c = statusPopupMenuItem.action.iconSettings.color ||
|
||||
statusPopupMenuItem.action.icon.color
|
||||
@ -195,7 +204,7 @@ Menu {
|
||||
|
||||
background: Rectangle {
|
||||
color: {
|
||||
if (hovered) {
|
||||
if (statusPopupMenuItem.hovered) {
|
||||
return statusPopupMenuItem.action.type === StatusMenuItem.Type.Danger ? Theme.palette.dangerColor3 : Theme.palette.statusPopupMenu.hoverBackgroundColor
|
||||
}
|
||||
return "transparent"
|
||||
@ -204,9 +213,8 @@ Menu {
|
||||
|
||||
MouseArea {
|
||||
id: sensor
|
||||
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
hoverEnabled: statusPopupMenuItem.action.enabled
|
||||
onPressed: mouse.accepted = false
|
||||
}
|
||||
|
||||
144
ui/StatusQ/src/StatusQ/Popups/StatusSearchLocationMenu.qml
Normal file
144
ui/StatusQ/src/StatusQ/Popups/StatusSearchLocationMenu.qml
Normal file
@ -0,0 +1,144 @@
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Controls 2.14
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
|
||||
StatusPopupMenu {
|
||||
id: root
|
||||
|
||||
property var searchPopup
|
||||
property var locatioModel
|
||||
|
||||
signal subMenuClicked()
|
||||
signal subMenuItemClicked()
|
||||
signal anywhereItemClicked()
|
||||
signal menuItemNoSubMenuClicked()
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Anywhere"
|
||||
onTriggered: {
|
||||
searchPopup.resetSelectionBadge();
|
||||
searchPopup.searchSelectionButton.primaryText = text;
|
||||
root.anywhereItemClicked();
|
||||
}
|
||||
}
|
||||
StatusMenuSeparator { }
|
||||
//Dummy item to keep seperator in right position
|
||||
MenuItem { implicitHeight: 0.00001 }
|
||||
Instantiator {
|
||||
model: root.locatioModel
|
||||
delegate: Loader {
|
||||
sourceComponent: (!!model.subItems && model.subItems.count > 0) ? subMenus : subMenuItemComponent
|
||||
onLoaded: {
|
||||
if (!!model.subItems && model.subItems.count > 0) {
|
||||
item.title = model.title;
|
||||
item.subItemsModel = model.subItems;
|
||||
item.parentIconName = model.iconName;
|
||||
item.parentImageSource = model.imageSource;
|
||||
item.parentIdenticonColor = !!model.iconColor ? model.iconColor : Theme.palette.primaryColor1;
|
||||
item.parentIsIdenticon = model.isIdenticon;
|
||||
root.subMenuItemIcons.push({
|
||||
source: model.imageSource,
|
||||
icon: model.iconName,
|
||||
isIdenticon: model.isIdenticon,
|
||||
color: model.iconColor,
|
||||
isLetterIdenticon: !model.imageSource && !model.iconName
|
||||
});
|
||||
root.insertMenu(index+2, item);
|
||||
} else {
|
||||
item.text = model.title;
|
||||
item.iconSettings.name = model.iconName;
|
||||
item.iconSettings.color = model.iconColor;
|
||||
item.iconSettings.isLetterIdenticon = !model.imageSource && !model.iconName
|
||||
item.image.source = model.imageSource;
|
||||
item.image.isIdenticon = model.isIdenticon;
|
||||
root.insertItem(index+2, item);
|
||||
}
|
||||
}
|
||||
}
|
||||
onObjectRemoved: { root.removeItem(root.takeItem(index+2)); }
|
||||
}
|
||||
|
||||
Component {
|
||||
id: subMenuItemComponent
|
||||
StatusSearchPopupMenuItem {
|
||||
onClicked: {
|
||||
searchPopup.resetSelectionBadge()
|
||||
searchPopup.searchSelectionButton.primaryText = text;
|
||||
searchPopup.searchSelectionButton.image.source = image.source;
|
||||
searchPopup.searchSelectionButton.image.isIdenticon = image.isIdenticon;
|
||||
searchPopup.searchSelectionButton.iconSettings.name = iconSettings.name;
|
||||
searchPopup.searchSelectionButton.iconSettings.color = !!iconSettings.color ? iconSettings.color : Theme.palette.primaryColor1
|
||||
searchPopup.searchSelectionButton.iconSettings.isLetterIdenticon = !iconSettings.name && !image.source
|
||||
root.menuItemNoSubMenuClicked();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: subMenus
|
||||
StatusPopupMenu {
|
||||
id: menu
|
||||
property var subItemsModel
|
||||
property string parentIconName
|
||||
property string parentImageSource
|
||||
property string parentIdenticonColor
|
||||
property string parentIsIdenticon
|
||||
Repeater {
|
||||
id: menuLoader
|
||||
model: menu.subItemsModel
|
||||
property string parentTitleText: menu.title
|
||||
property string parentIconName: menu.parentIconName
|
||||
property string parentImageSource: menu.parentImageSource
|
||||
property string parentIdenticonColor: menu.parentIdenticonColor
|
||||
property string parentIsIdenticon: menu.parentIsIdenticon
|
||||
Loader {
|
||||
id: subMenuLoader
|
||||
sourceComponent: StatusSearchPopupMenuItem {
|
||||
text: model.text
|
||||
image.source: model.imageSource
|
||||
iconSettings.name: model.iconName
|
||||
iconSettings.color: model.iconColor
|
||||
image.isIdenticon: model.isIdenticon
|
||||
onTriggered: {
|
||||
searchPopup.resetSelectionBadge();
|
||||
if (menuLoader.parentTitleText === "Chat") {
|
||||
searchPopup.searchSelectionButton.primaryText = model.text;
|
||||
searchPopup.searchSelectionButton.image.source = model.imageSource;
|
||||
searchPopup.searchSelectionButton.image.isIdenticon = model.isIdenticon;
|
||||
searchPopup.searchSelectionButton.iconSettings.name = model.iconName;
|
||||
searchPopup.searchSelectionButton.iconSettings.color = !!model.iconColor ? model.iconColor : Theme.palette.primaryColor1;
|
||||
searchPopup.searchSelectionButton.iconSettings.isLetterIdenticon = !model.iconName && !model.imageSource
|
||||
} else {
|
||||
searchPopup.searchSelectionButton.primaryText = menuLoader.parentTitleText;
|
||||
searchPopup.searchSelectionButton.secondaryText = model.text;
|
||||
searchPopup.searchSelectionButton.image.source = menuLoader.parentImageSource;
|
||||
searchPopup.searchSelectionButton.image.isIdenticon = menuLoader.parentIsIdenticon;
|
||||
searchPopup.searchSelectionButton.iconSettings.name = menuLoader.parentIconName;
|
||||
searchPopup.searchSelectionButton.iconSettings.color = !!menuLoader.parentIdenticonColor ? menuLoader.parentIdenticonColor : Theme.palette.primaryColor1;
|
||||
searchPopup.searchSelectionButton.iconSettings.isLetterIdenticon = !menuLoader.parentIconName && !menuLoader.parentImageSource
|
||||
}
|
||||
root.subMenuItemClicked();
|
||||
root.dismiss();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
onMenuItemClicked: {
|
||||
searchPopup.resetSelectionBadge();
|
||||
let menuItem = root.menuAt(root.currentIndex)
|
||||
searchPopup.searchSelectionButton.primaryText = menuItem.title;
|
||||
searchPopup.searchSelectionButton.image.source = menuItem.parentImageSource;
|
||||
searchPopup.searchSelectionButton.image.isIdenticon = menuItem.parentIsIdenticon;
|
||||
searchPopup.searchSelectionButton.iconSettings.name = menuItem.parentIconName;
|
||||
searchPopup.searchSelectionButton.iconSettings.color = menuItem.parentIdenticonColor;
|
||||
searchPopup.searchSelectionButton.iconSettings.isLetterIdenticon = !menuItem.parentIconName && !menuItem.parentImageSource
|
||||
root.subMenuClicked();
|
||||
//TODO fix error "QML StatusPopupMenu: cannot find any window to open popup in."
|
||||
root.dismiss();
|
||||
}
|
||||
}
|
||||
315
ui/StatusQ/src/StatusQ/Popups/StatusSearchPopup.qml
Normal file
315
ui/StatusQ/src/StatusQ/Popups/StatusSearchPopup.qml
Normal file
@ -0,0 +1,315 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.12
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
|
||||
|
||||
StatusModal {
|
||||
id: root
|
||||
width: 700
|
||||
height: (!!searchResults && (searchResults.count >= 0) && (searchText !== "")) ? (((searchResults.count < 5)) ? 560 : 770) : 142 //970
|
||||
anchors.centerIn: parent
|
||||
showHeader: false
|
||||
showFooter: false
|
||||
|
||||
property string searchText: contentComponent.searchText
|
||||
property string noResultsLabel: "No results"
|
||||
property bool loading
|
||||
property Menu searchOptionsPopupMenu: Menu { }
|
||||
property var searchResults: [ ]
|
||||
property var searchSelectionButton
|
||||
function resetSelectionBadge() {
|
||||
searchSelectionButton.iconSettings.name = ""
|
||||
searchSelectionButton.iconSettings.isLetterIdenticon = false
|
||||
searchSelectionButton.iconSettings.color = "transparent"
|
||||
searchSelectionButton.image.source = ""
|
||||
searchSelectionButton.image.isIdenticon = false
|
||||
searchSelectionButton.primaryText = qsTr("Anywhere");
|
||||
searchSelectionButton.secondaryText = "";
|
||||
}
|
||||
|
||||
content: Item {
|
||||
width: parent.width
|
||||
height: root.height
|
||||
property alias searchText: inputText.text
|
||||
|
||||
ColumnLayout {
|
||||
id: contentItemColumn
|
||||
anchors.fill: parent
|
||||
spacing: 0
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 63
|
||||
StatusIcon {
|
||||
id: statusIcon
|
||||
width: 40
|
||||
height: 40
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 12
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
icon: "search"
|
||||
color: Theme.palette.baseColor1
|
||||
}
|
||||
TextEdit {
|
||||
id: inputText
|
||||
anchors.left: statusIcon.right
|
||||
anchors.leftMargin: 15
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 8
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
focus: true
|
||||
font.pixelSize: 28
|
||||
font.family: Theme.palette.baseFont.name
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
}
|
||||
StatusMenuSeparator {
|
||||
topPadding: 0
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
Item {
|
||||
Layout.preferredWidth: parent.width
|
||||
Layout.preferredHeight: 58
|
||||
Button {
|
||||
id: searchOptionsMenuButton
|
||||
|
||||
Component.onCompleted: {
|
||||
root.searchSelectionButton = searchOptionsMenuButton
|
||||
}
|
||||
|
||||
property string prefixText: "In"
|
||||
property string primaryText: ""
|
||||
property string secondaryText: ""
|
||||
property StatusIconSettings iconSettings: StatusIconSettings {
|
||||
name: ""
|
||||
isLetterIdenticon: false
|
||||
}
|
||||
|
||||
property StatusImageSettings image: StatusImageSettings {
|
||||
source: ""
|
||||
isIdenticon: false
|
||||
}
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 16
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
implicitWidth: (contentItemRowLayout.width + 24)
|
||||
implicitHeight: 32
|
||||
|
||||
background: Rectangle {
|
||||
anchors.fill: parent
|
||||
color: Theme.palette.baseColor2
|
||||
radius: 8
|
||||
}
|
||||
|
||||
contentItem: Item {
|
||||
anchors.fill: parent
|
||||
|
||||
MouseArea {
|
||||
id: sensor
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: root.searchOptionsPopupMenu.popup();
|
||||
|
||||
RowLayout {
|
||||
id: contentItemRowLayout
|
||||
anchors.centerIn: parent
|
||||
spacing: 2
|
||||
StatusBaseText {
|
||||
color: Theme.palette.directColor1
|
||||
text: searchOptionsMenuButton.prefixText + ": "
|
||||
font.weight: Font.Medium
|
||||
}
|
||||
|
||||
Loader {
|
||||
Layout.preferredWidth: active ? 16 : 0
|
||||
Layout.preferredHeight: 16
|
||||
active: searchOptionsMenuButton.iconSettings.name ||
|
||||
searchOptionsMenuButton.iconSettings.isLetterIdenticon ||
|
||||
!!searchOptionsMenuButton.image.source.toString()
|
||||
|
||||
sourceComponent: {
|
||||
if (!!searchOptionsMenuButton.image.source.toString()) {
|
||||
return statusRoundedImageCmp
|
||||
}
|
||||
if (!!searchOptionsMenuButton.iconSettings.isLetterIdenticon || !searchOptionsMenuButton.iconSettings.name) {
|
||||
return statusLetterIdenticonCmp
|
||||
}
|
||||
return statusIconCmp
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusIconCmp
|
||||
StatusIcon {
|
||||
width: 16
|
||||
icon: searchOptionsMenuButton.iconSettings.name
|
||||
color: searchOptionsMenuButton.iconSettings.color
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusRoundedImageCmp
|
||||
Item {
|
||||
width: 16
|
||||
height: 16
|
||||
StatusRoundedImage {
|
||||
id: statusRoundedImage
|
||||
implicitWidth: parent.width
|
||||
implicitHeight: parent.height
|
||||
image.source: searchOptionsMenuButton.image.source
|
||||
color: searchOptionsMenuButton.image.isIdenticon ?
|
||||
Theme.palette.statusRoundedImage.backgroundColor :
|
||||
"transparent"
|
||||
border.width: searchOptionsMenuButton.image.isIdenticon ? 1 : 0
|
||||
border.color: Theme.palette.directColor7
|
||||
}
|
||||
|
||||
Loader {
|
||||
sourceComponent: statusLetterIdenticonCmp
|
||||
active: statusRoundedImage.image.status === Image.Error
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusLetterIdenticonCmp
|
||||
StatusLetterIdenticon {
|
||||
implicitWidth: 16
|
||||
implicitHeight: 16
|
||||
letterSize: 11
|
||||
color: searchOptionsMenuButton.iconSettings.color
|
||||
name: searchOptionsMenuButton.primaryText
|
||||
}
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
color: Theme.palette.directColor1
|
||||
text: searchOptionsMenuButton.primaryText
|
||||
font.weight: Font.Medium
|
||||
}
|
||||
StatusIcon {
|
||||
Layout.preferredWidth: 14.5
|
||||
Layout.preferredHeight: 17.5
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
visible: !!searchOptionsMenuButton.secondaryText
|
||||
color: Theme.palette.baseColor1
|
||||
icon: "next"
|
||||
}
|
||||
StatusBaseText {
|
||||
color: Theme.palette.directColor1
|
||||
visible: !!searchOptionsMenuButton.secondaryText
|
||||
text: "# " + searchOptionsMenuButton.secondaryText
|
||||
font.weight: Font.Medium
|
||||
}
|
||||
StatusIcon {
|
||||
Layout.preferredWidth: 17.5
|
||||
Layout.preferredHeight: 14.5
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
icon: "chevron-down"
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StatusFlatRoundButton {
|
||||
id: closeButton
|
||||
width: 32
|
||||
height: 32
|
||||
anchors.left: searchOptionsMenuButton.right
|
||||
anchors.leftMargin: 4
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
opacity: (searchOptionsMenuButton.primaryText === qsTr("Anywhere")) ? 0.0 : 1.0
|
||||
visible: (opacity > 0.1)
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
icon.name: "close"
|
||||
icon.color: Theme.palette.directColor1
|
||||
icon.width: 20
|
||||
icon.height: 20
|
||||
onClicked: { root.resetSelectionBadge(); }
|
||||
}
|
||||
}
|
||||
|
||||
StatusMenuSeparator { Layout.fillWidth: true; visible: (root.height > 142) }
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
clip: true
|
||||
ListView {
|
||||
id: view
|
||||
anchors.fill: parent
|
||||
anchors {
|
||||
leftMargin: 0
|
||||
rightMargin: 0
|
||||
bottomMargin: 67
|
||||
}
|
||||
visible: (!root.loading && (count > 0))
|
||||
model: root.searchResults
|
||||
ScrollBar.vertical: ScrollBar { }
|
||||
delegate: StatusListItem {
|
||||
width: view.width
|
||||
title: model.name
|
||||
statusListItemTitle.color: model.name.startsWith("@") ? Theme.palette.primaryColor1 : Theme.palette.directColor1
|
||||
subTitle: model.content
|
||||
radius: 0
|
||||
statusListItemSubTitle.height: model.content !== "" ? 20 : 0
|
||||
statusListItemSubTitle.elide: Text.ElideRight
|
||||
statusListItemSubTitle.color: Theme.palette.black
|
||||
icon.isLetterIdenticon: (model.badgeImage === "")
|
||||
titleAsideText: model.time
|
||||
image.source: model.badgeImage
|
||||
badge.primaryText: model.badgePrimaryText
|
||||
badge.secondaryText: model.badgeSecondaryText
|
||||
badge.image.source: model.badgeImage
|
||||
badge.icon.isLetterIdenticon: model.isLetterIdenticon
|
||||
badge.icon.color: model.badgeIdenticonColor
|
||||
}
|
||||
section.property: "sectionName"
|
||||
section.criteria: ViewSection.FullString
|
||||
section.delegate: Item {
|
||||
height: 34
|
||||
width: view.width
|
||||
StatusBaseText {
|
||||
font.pixelSize: 15
|
||||
color: Theme.palette.baseColor1
|
||||
text: section
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 16
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 4
|
||||
}
|
||||
}
|
||||
}
|
||||
StatusLoadingIndicator {
|
||||
anchors.centerIn: parent
|
||||
visible: root.loading
|
||||
color: Theme.palette.primaryColor1
|
||||
width: 24
|
||||
height: 24
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
anchors.centerIn: parent
|
||||
text: root.noResultsLabel
|
||||
color: Theme.palette.baseColor1
|
||||
font.pixelSize: 13
|
||||
visible: ((inputText.text !== "") && (view.count === 0) && !root.loading)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
onClosed: {
|
||||
root.resetSelectionBadge();
|
||||
root.loading = false;
|
||||
contentComponent.searchText = "";
|
||||
}
|
||||
}
|
||||
77
ui/StatusQ/src/StatusQ/Popups/StatusSearchPopupMenuItem.qml
Normal file
77
ui/StatusQ/src/StatusQ/Popups/StatusSearchPopupMenuItem.qml
Normal file
@ -0,0 +1,77 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.12
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
MenuItem {
|
||||
id: root
|
||||
implicitHeight: 38
|
||||
|
||||
property StatusImageSettings image: StatusImageSettings {
|
||||
height: 16
|
||||
width: 16
|
||||
isIdenticon: false
|
||||
}
|
||||
property StatusIconSettings iconSettings: StatusIconSettings {
|
||||
height: 16
|
||||
width: 16
|
||||
isLetterIdenticon: (root.image.source.toString() === ""
|
||||
&& root.iconSettings.name.toString() === "")
|
||||
background: StatusIconBackgroundSettings {}
|
||||
color: "transparent"
|
||||
}
|
||||
|
||||
background: Rectangle {
|
||||
color: root.hovered ? Theme.palette.statusPopupMenu.hoverBackgroundColor : "transparent"
|
||||
}
|
||||
|
||||
contentItem: RowLayout {
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 12
|
||||
StatusIcon {
|
||||
Layout.preferredWidth: visible ? root.iconSettings.width : 0
|
||||
Layout.preferredHeight: visible ? root.iconSettings.height : 0
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
visible: !!root.iconSettings.name && !root.image.source.toString()
|
||||
icon: root.iconSettings.name
|
||||
color: root.iconSettings.color
|
||||
}
|
||||
StatusRoundedImage {
|
||||
Layout.preferredWidth: visible ? root.image.width : 0
|
||||
Layout.preferredHeight: visible ? root.image.height : 0
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
visible: root.image.source.toString() !== ""
|
||||
image.source: root.image.source
|
||||
border.width: root.image.isIdenticon ? 1 : 0
|
||||
border.color: Theme.palette.directColor7
|
||||
}
|
||||
StatusLetterIdenticon {
|
||||
Layout.preferredWidth: visible ? root.iconSettings.width : 0
|
||||
Layout.preferredHeight: visible ? root.iconSettings.height : 0
|
||||
visible: root.iconSettings.isLetterIdenticon && !root.iconSettings.name && !root.image.source.toString()
|
||||
color: root.iconSettings.color
|
||||
name: root.text
|
||||
letterSize: 11
|
||||
}
|
||||
StatusBaseText {
|
||||
Layout.fillWidth: true
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
text: root.text
|
||||
color: Theme.palette.directColor1
|
||||
font.pixelSize: 13
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
}
|
||||
MouseArea {
|
||||
id: sensor
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onPressed: mouse.accepted = false
|
||||
}
|
||||
}
|
||||
@ -5,4 +5,7 @@ StatusPopupMenu 0.1 StatusPopupMenu.qml
|
||||
StatusMenuItem 0.1 StatusMenuItem.qml
|
||||
StatusMenuHeadline 0.1 StatusMenuHeadline.qml
|
||||
StatusModal 0.1 StatusModal.qml
|
||||
StatusSearchPopup 0.1 StatusSearchPopup.qml
|
||||
StatusModalDivider 0.1 StatusModalDivider.qml
|
||||
StatusSearchPopupMenuItem 0.1 StatusSearchPopupMenuItem.qml
|
||||
StatusSearchLocationMenu 0.1 StatusSearchLocationMenu.qml
|
||||
|
||||
@ -30,7 +30,7 @@ Rectangle {
|
||||
}
|
||||
}
|
||||
|
||||
implicitHeight: rootLayout.implicitHeight + 30
|
||||
implicitHeight: visible ? rootLayout.implicitHeight + 30 : 0
|
||||
|
||||
RowLayout {
|
||||
id: rootLayout
|
||||
|
||||
@ -20,7 +20,7 @@ Rectangle {
|
||||
signal editButtonClicked
|
||||
signal close
|
||||
|
||||
implicitHeight: Math.max(closeButton.height, imageWithTitle.implicitHeight) + 32
|
||||
implicitHeight: visible? Math.max(closeButton.height, imageWithTitle.implicitHeight) + 32 : 0
|
||||
implicitWidth: 480
|
||||
|
||||
radius: 16
|
||||
|
||||
@ -250,5 +250,9 @@
|
||||
<file>src/StatusQ/Popups/statusModal/StatusModalHeader.qml</file>
|
||||
<file>src/StatusQ/Popups/StatusModal.qml</file>
|
||||
<file>src/StatusQ/Core/StatusModalHeaderSettings.qml</file>
|
||||
<file>src/StatusQ/Popups/StatusSearchPopup.qml</file>
|
||||
<file>src/StatusQ/Components/StatusListItemBadge.qml</file>
|
||||
<file>src/StatusQ/Popups/StatusSearchPopupMenuItem.qml</file>
|
||||
<file>src/StatusQ/Popups/StatusSearchLocationMenu.qml</file>
|
||||
</qresource>
|
||||
</RCC>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user