Compare commits

..
Author SHA1 Message Date
B.Melnik 2adb6d058f feat: can be used on tablets 2021-06-14 15:23:53 +03:00
104 changed files with 654 additions and 5945 deletions
-2
View File
@@ -10,5 +10,3 @@ bin
*.autosave
Makefile
.qmake.stash
*_qml.cpp
*_qmlcache.qrc
-338
View File
@@ -1,338 +0,0 @@
<a name=""></a>
## v0.8.0 (2021-09-06)
#### Bug Fixes
* **StatusBaseInput:**
* fix one line scroll ([d64aa6de](d64aa6de))
* Make clear button bigger ([387bfe77](387bfe77))
* **StatusChatToolBar:** Fix mouse event catching after menu closing ([fbecac4a](fbecac4a))
* **StatusInput:** Forward keys events to root ([061c7d1c](061c7d1c))
* **StatusListItem:** Add propogateCompostedEvents to title mouse area ([5c706fdc](5c706fdc))
* **StatusModal:** Remove self-calculating height ([3187de54](3187de54))
#### Features
* introduce bigger versions of navbar icons ([0a4d3860](0a4d3860))
* **StatusBaseInput:** introduce focussed property ([ddfca7a8](ddfca7a8), closes [#373](373))
* **StatusChatListAndCategories:** Add tooltip settings for categories buttons ([64098e84](64098e84))
* **StatusDescriptionListItem:**
* expose subtitle component for fine control ([1749cc0e](1749cc0e))
* introduce support for `value` ([a963ef80](a963ef80))
* **StatusExpandableSettingsItem:** Added new component for wallet settings ([f3ab4ce9](f3ab4ce9))
* **StatusInput:** Introduced secondaryLabel property ([d648230d](d648230d), closes [#383](383))
* **StatusModal:**
* Add popup menu support for StatusModal ([8a94fb54](8a94fb54))
* add ability to set elide config of header titles ([28e514f9](28e514f9), closes [#353](353))
* **StatusQ.Controls:** introduce StatusSwitchTabBar and StatusSwitchTabButton ([d449f0e9](d449f0e9), closes [#365](365))
* **StatusSearchPopup:** add function hook to allow timestamp formatting ([b45aba4b](b45aba4b), closes [#363](363))
* **qrc:** Add new icon needed for share modal ([38fb8f61](38fb8f61))
<a name=""></a>
## v0.7.0 (2021-08-30)
#### Features
* **StatusChatListAndCategories:** add drag and drop support for cate… (#349) ([a4178bd6](a4178bd6), closes [#227](227))
* **StatusChatListCategoryItem:** Add tooltips settings ([f9775e4d](f9775e4d))
* **StatusPopupMenu:** changed close policy ([2d8fd576](2d8fd576))
* **StatusWindowsTitleBar:** Add windows title bar ([faca4765](faca4765))
#### Bug Fixes
* **StatusAppThreePanelLayout:** increase minimum width in right panel ([7da4bdee](7da4bdee))
* **StatusBaseInput:** fix click to focus ([138458d1](138458d1))
* **StatusChatInfoButton:** Add self-calculated implicitWIdth and elide to texts ([7ef61ed3](7ef61ed3))
* **StatusListItem:** don't set width on title item ([ee5ec7b3](ee5ec7b3))
* **StatusModal:** ensure header and subtitles elide if needed ([503a07bf](503a07bf), closes [#256](256))
<a name=""></a>
## v0.6.0 (2021-08-24)
#### Features
* **StatusBaseInput:** introduce `dirty` and `pristine` properties ([ea340801](ea340801), closes [#327](327))
* **StatusChatList:** Add drag and drop support of list items ([c679854d](c679854d))
* **StatusLetterIdenticon:** Expose the text component ([d16719ad](d16719ad))
* **StatusListItem:** introduce itemId and titleId properties and their handlers ([01da7508](01da7508))
* **StatusSearchPopupMenuItem:**
* New APIs resetSearchSelection and setSearchSelection ([78edcb37](78edcb37))
* new API ([b133d10f](b133d10f))
#### Bug Fixes
* **StatusBaseInput:**
* ensure wrapmode works as expectefd in multiline mode ([0243852c](0243852c), closes [#324](324))
* expose cursorPosition ([ea6743a7](ea6743a7), closes [#323](323))
* **StatusChatListCategory:** emit original mouse event data in clicked signal ([5da9cb06](5da9cb06), closes [#333](333))
* **StatusInput:**
* ensure validation is performed on initialization ([4b107a0e](4b107a0e), closes [#326](326))
* remove recursive binding in label height ([51d8b55b](51d8b55b))
* **StatusSearchLocationMenu:** typo fix ([c306b682](c306b682))
* **StatusSearchPopup:** replace "#" character with "channel" icon ([2de261c4](2de261c4))
<a name=""></a>
## v0.5.0 (2021-08-16)
#### Bug Fixes
* **StatusChatToolBar:** Use updated StatusFlatRoundButton ([d24c2e62](d24c2e62))
#### Features
* **StatusBaseInput:** enforce `maximumLength` if it's set ([f635bad6](f635bad6))
* **StatusFlatRoundButton:** Adding tooltip to the button ([5a0489ba](5a0489ba))
* **StatusIcon:** add `play-filled` and `pause-filled` icons ([58a30716](58a30716), closes [#310](310))
* **StatusInput:** introduce new validator pipeline ([ba4f27f9](ba4f27f9), closes [#298](298))
* **StatusToolTip:** Adding an offset property ([ee429683](ee429683))
<a name=""></a>
## v0.4.0 (2021-08-12)
#### Bug Fixes
* **StatusAppNavBar:** add profile button (#311) ([2e1359c9](2e1359c9))
* **StatusChatListItem:** don't signal item selection if already selected ([b345c75a](b345c75a), closes [#303](303))
* **StatusPopupMenu:** ensure icon or image settings exist ([90aa9d76](90aa9d76), closes [#295](295))
#### Features
* **StatusListItem:** add enabled prop to StatusListItem (#302) ([7e03daea](7e03daea))
* **StatusQ.Theme.Core:** introduce theme colors for StatusChatInput (#299) ([556e5cca](556e5cca))
<a name=""></a>
## v0.3.0 (2021-07-27)
#### Features
* **Controls:** introduce `StatusInput` ([646c00bd](646c00bd), closes [#288](288))
* **Popups:** introduce `StatusMenuHeadline` component ([246bec0d](246bec0d))
* **StatusBaseInput:**
* add icon support ([c8e90349](c8e90349), closes [#242](242))
* add visual validity state ([e8cce72c](e8cce72c), closes [#287](287))
* add hover state visuals ([e1ebdaae](e1ebdaae), closes [#285](285))
* **StatusInput:** implement error message and charlimit APIs ([3cf53d02](3cf53d02), closes [#290](290))
* **StatusPopupMenu:** add support for letter identicons, identicons and images ([3c4c7f04](3c4c7f04), closes [#263](263))
* **StatusQ.Layout:** introducing StatusAppThreePanelLayout ([ffc6fcb4](ffc6fcb4), closes [#272](272))
* **sandbox:** make use of `StatusInput` in chat view ([731a0f8c](731a0f8c))
#### Bug Fixes
* **StatusAppThreePanelLayout:**
* limit right panel width to 300px ([d327c515](d327c515))
* limit center panel width to 300px ([762ff87b](762ff87b))
* hide right panel when closed ([61705990](61705990))
* **StatusBaseInput:**
* some minor style adjustment to adhere to design ([f16e857c](f16e857c))
* ensure input text is selectable with mouse ([ab303593](ab303593))
* ensure clear button has the correct color ([de1cec7e](de1cec7e), closes [#286](286))
* add visuals for disabled state ([35f20e33](35f20e33), closes [#284](284))
* expose text prop alias ([116ddfbb](116ddfbb))
* **StatusChatInfoButton:** ensure pin icon button is always rendered ([baefedb8](baefedb8), closes [#278](278))
* **StatusListItem:** ensure title area wraps text ([e3f79314](e3f79314))
* **StatusModal:** reset image/identicon width when loader state has changed ([e4e7ebe3](e4e7ebe3))
<a name=""></a>
## v0.2.0 (2021-07-21)
#### Bug Fixes
* **StatusChatListCategory:** ensures showActionButtons is taken into account ([52cb97e4](52cb97e4))
* **StatusPopupMenu:** ensure menu items elide ([d1f8e3e5](d1f8e3e5))
#### Features
* **StatusChatInfoToolBar:** make statusMenuButton public ([38c04cb9](38c04cb9))
* **StatusChatListAndCategories:** new API showPopupMenu ([9cfcdace](9cfcdace))
* **StatusChatListItem:** introduce muted badge visuals ([a404ba07](a404ba07), closes [#259](259))
* **StatusListItem:**
* support tertiaryTitle ([03131996](03131996), closes [#275](275))
* add identicon support ([214ef6b0](214ef6b0), closes [#261](261))
* **StatusModal:**
* introduce support for identicons and letter identicons ([fda9b71f](fda9b71f), closes [#269](269))
* render header and footer border by default ([18dbaadd](18dbaadd), closes [#265](265))
* **StatusToolTip:** expose `arrow` for fine-grain control ([51b7c71d](51b7c71d))
<a name=""></a>
## v0.1.0 (2021-07-15)
#### Bug Fixes
* Add missing .qml to resources, add qmlcache to gitignore ([71d0ef7f](71d0ef7f))
* make release build work ([1a7c2133](1a7c2133))
* introduce tiny icon versions and make use of them where needed ([a0fae6ab](a0fae6ab), closes [#128](128))
* update position of window to center, add traffic lights ([26aae6d0](26aae6d0))
* hover effect for StatusFlatRoundButton ([ee4a7c88](ee4a7c88))
* fix crash on removing title bar ([c94b801e](c94b801e))
* **Components:**
* more popup menu position fine-tuning ([22eaf6fa](22eaf6fa))
* add proper foreground color for StatusBadge ([6a92ff68](6a92ff68), closes [#59](59))
* **Controls:** ensure round buttons expose `hovered` state ([98b01946](98b01946), closes [#88](88))
* **Core:**
* add missing `rotation` property to `StatusIconSettings` ([341c0ddd](341c0ddd))
* don't rotate `ColorOverlay` of `StatusIcon` ([062fe42a](062fe42a), closes [#109](109))
* disable StatusIcon ColorOverlay if no color is supplied ([f1e34e39](f1e34e39))
* **Core.Theme:**
* ensure proper nav bar colors is used ([6c84fed7](6c84fed7))
* remove redundant theme properties ([75e87725](75e87725))
* ensure all font weight are available ([0a88e652](0a88e652), closes [#30](30))
* **README:** fix module name in readme docs ([f4b5b271](f4b5b271))
* **StatusAppNavBar:**
* don't rely on `undefined` property ([175d7a19](175d7a19))
* don't try to render chat button if it doesn't exist ([d690a0c5](d690a0c5))
* **StatusBadge:** use medium font weight for badge text ([cb9492ab](cb9492ab))
* **StatusBaseInput:** Fix focus area Closes: #241 ([f2d36d3d](f2d36d3d))
* **StatusChatInfoButton:**
* make component identicon aware ([7dcec0ca](7dcec0ca), closes [#228](228))
* prefix chat name with "#" if needed ([144ac69d](144ac69d), closes [#229](229))
* vertically center title if no subtitle is provided ([7b2030c6](7b2030c6), closes [#230](230))
* disable hover effects when sensor is disabled ([f7e38c9c](f7e38c9c), closes [#231](231))
* **StatusChatList:**
* ensure badge is also shown for one to one messages ([ac5c8452](ac5c8452))
* ensure popupMenu closeHandler don't break ([722d92c0](722d92c0), closes [#216](216))
* use fallback property to determine unread message count ([f7f217ed](f7f217ed))
* expect `model.color` instead of `iconColor` prop ([70332a3f](70332a3f))
* ensure component provide default `width` ([300536bc](300536bc), closes [#176](176))
* **StatusChatListAndCategories:**
* make chat list visibily flag work ([53d63a9b](53d63a9b), closes [#217](217))
* ensure chatItemUnmuted event is propagated ([a9ae426c](a9ae426c), closes [#219](219))
* ensure chat list receives popup menu ([23ddbc2e](23ddbc2e), closes [#218](218))
* **StatusChatListCategory:** only try open popup when supplied ([cbdaf128](cbdaf128), closes [#220](220))
* **StatusChatListCategoryItem:** don't render menubutton with no popup ([05fc97ca](05fc97ca), closes [#153](153))
* **StatusChatListItem:**
* ensure chat name elides when it's too long ([34df0f0d](34df0f0d), closes [#151](151))
* ensure public chat names are prefixed with '#' ([141872c2](141872c2), closes [#191](191))
* use proper font size for chat name ([ac80f7f7](ac80f7f7))
* **StatusChatToolBar:**
* ensure context menu as proper position ([3ea8da05](3ea8da05))
* ensure menu button stays highlighted ([90bad9e3](90bad9e3), closes [#125](125))
* **StatusFlatRoundButton:** use correct hover color ([82e34d64](82e34d64))
* **StatusListItem:**
* ensure icon background in secondary type works correctly ([34b35318](34b35318))
* various fixes w.r.t. sensor, icon size etc ([e5e96af5](e5e96af5))
* **StatusMenuSeparator:** ensure height is 0 when invisible or disabled ([fd7a5530](fd7a5530), closes [#212](212))
* **StatusModal:** ensure modal footer uses correct theme color ([de2c36d0](de2c36d0))
* **StatusModalHeader:** ensure header has enough height for children ([75b2f508](75b2f508), closes [#185](185))
* **StatusNavBarTabButton:**
* fix popup menu positioning ([705f1402](705f1402))
* ensure click signal is emitted when not menu is provided ([040da2a4](040da2a4))
* don't change checked state implicitly ([b1fe73ba](b1fe73ba))
* **StatusNavigationListItem:** make click event work again ([c5ecfe08](c5ecfe08))
* **StatusQ.Core.Theme:** use correct dropshadow color in dark theme ([70e17b05](70e17b05))
* **StatusRadioButton:** ensure control label as correct color ([1cb0c1d3](1cb0c1d3), closes [#51](51))
* **StatusRoundedImage:** ensure images are scaled and positioned properly ([3d0688b7](3d0688b7), closes [#172](172))
* **sandbox:** make scrollview content height grow with content ([2f09179f](2f09179f))
#### Features
* can be used on tablets (#146) ([63be0144](63be0144))
* add StatusSwitch ([52998d68](52998d68), closes [#12](12))
* Add buttons components ([91b8d317](91b8d317))
* Set up catalog app (sandbox) ([3528b2ff](3528b2ff), closes [#5](5))
* introduce theming capability ([608fdbda](608fdbda), closes [#3](3))
* **Components:**
* introduce `StatusContactRequestsIndicatorListItem` ([baa663ce](baa663ce), closes [#175](175))
* introduce `StatusListSectionHeadline` ([507703af](507703af), closes [#164](164))
* introduce `StatusNavigationPanelHeadline` ([40617cd7](40617cd7), closes [#162](162))
* introduce `StatusChatListAndCategories` component ([7bca2745](7bca2745), closes [#133](133))
* introduce `StatusChatInfoToolBar` component ([454e73a8](454e73a8), closes [#141](141))
* introduce `StatusChatListCategory` ([f4d211ac](f4d211ac), closes [#123](123))
* introduce `StatusChatListCategoryItem` ([916dcc9c](916dcc9c), closes [#117](117))
* introduce `StatusChatList` ([1e558b59](1e558b59), closes [#100](100))
* Add StatusSlider ([c0ad32a1](c0ad32a1))
* introduce `StatusChatToolBar` ([a4421b5b](a4421b5b), closes [#80](80))
* introduce `StatusDescriptionListItem` ([4a25ca02](4a25ca02))
* introduce StatusNavigationListItem ([63275668](63275668), closes [#72](72))
* introduce StatusChatListItem ([b40d427d](b40d427d), closes [#65](65))
* introduce `StatusListItem` component ([a3fe02d0](a3fe02d0), closes [#19](19))
* introduce `StatusRoundIcon` component ([8639e8cc](8639e8cc), closes [#53](53))
* introduce StatusBadge component ([a89e218a](a89e218a), closes [#15](15))
* introduce StatusRoundedImage ([09876c1f](09876c1f), closes [#32](32))
* introduce StatusLetterIdenticon ([b0155313](b0155313), closes [#28](28))
* introduce StatusLoadingIndicator ([3ce1138b](3ce1138b), closes [#7](7))
* **Controls:**
* introduce StatusBaseInput ([13217604](13217604))
* introduce `StatusChatInfoButton` ([8a799182](8a799182))
* introduce StatusNavBarTabButton ([ea118d71](ea118d71), closes [#17](17))
* introduce StatusToolTip component ([f3a6c9f4](f3a6c9f4), closes [#14](14))
* **Core:**
* introduce StatusIconBackgroundSettings ([a4e62fb2](a4e62fb2))
* introduce `StatusImageSettings` ([d9529883](d9529883))
* introduce StatusBaseText component ([c7d533af](c7d533af), closes [#20](20))
* **Core.Controls:** introduce StatusIconTabButton component ([b4b1f472](b4b1f472), closes [#16](16))
* **Core.Theme:** expose solid black and white on `ThemePalette` ([996ceb2b](996ceb2b))
* **Layout:**
* introduce `StatusAppTwoPanelLayout` ([af3ca15b](af3ca15b))
* introduce StatusAppLayout component ([554998dc](554998dc))
* introduce StatusAppNavBar ([0dfd39af](0dfd39af), closes [#18](18))
* **Popups:**
* Add StatusModal ([e49b58b9](e49b58b9))
* introduce StatusModalDivider ([148c30b9](148c30b9))
* Add StatusModalFooter ([9c2a5830](9c2a5830))
* Add status modal header ([fa9bb7ad](fa9bb7ad))
* **StatusBadge:** introduce `borderColor` and `hoverBorderColor` ([041c11fb](041c11fb))
* **StatusBaseInput:** Add focused state Closes: #240 ([19349881](19349881))
* **StatusChatList:**
* expose hook to lazily calculate chat item names ([a664f635](a664f635))
* introduce `profileImageFn` property ([cfacd5be](cfacd5be), closes [#174](174))
* introduce `popupMenu` property ([a6262f0a](a6262f0a), closes [#171](171))
* introduce `filterFn` and `categoryId` ([cb078134](cb078134), closes [#154](154))
* **StatusChatListCategory:**
* apply chat list filter and expose category id in popup menu ([45775518](45775518))
* introduce flag to show/hide buttons ([9982c3df](9982c3df), closes [#150](150))
* **StatusChatListCategoryItem:** introduce `highlighted` property ([72bdd2d9](72bdd2d9))
* **StatusChatListCategoryItemButton:** introduce `highglighted` property ([645a3b79](645a3b79))
* **StatusChatListItem:**
* add `highlighted` property ([44343d38](44343d38), closes [#178](178))
* accept right clicks ([1f3aa0bb](1f3aa0bb), closes [#131](131))
* **StatusChatToolBar:**
* add tooltips to action buttons ([86da901e](86da901e), closes [#244](244))
* add members and search button ([e93dab2b](e93dab2b), closes [#243](243))
* **StatusFlatRoundButton:**
* introduce `highlighted` color for secondary type ([58e8f1cd](58e8f1cd), closes [#245](245))
* support icon rotation ([3a7a338d](3a7a338d))
* **StatusIcon:** Improvement of Icons ([7bc7df8d](7bc7df8d))
* **StatusIconTabButton:** introduce image loading state and fallback ([9b99d8a9](9b99d8a9), closes [#37](37))
* **StatusListItem:**
* add `Danger` type support ([8155d9a2](8155d9a2), closes [#248](248))
* support letter identicons ([531e54f2](531e54f2), closes [#239](239))
* introduce primary and secondary types ([146218e0](146218e0))
* **StatusModal:** expose loaded content ([bd383e87](bd383e87), closes [#237](237))
* **StatusNavBarTabButton:** introduce `popupMenu` property ([5e8242df](5e8242df), closes [#137](137))
* **StatusPopupMenu:**
* introduce `openHandler` ([2427fa2d](2427fa2d))
* make menu items invisible when disabled ([c9bc9bab](c9bc9bab), closes [#135](135))
* introduce `closeHandler` hook ([fb51e9d7](fb51e9d7))
* **StatusQ.Popups:** introduce StatusPopupMenu component ([09a6f418](09a6f418), closes [#96](96))
* **StatusRoundButton:** add `highlighted` and `icon.rotation` props ([7c16a9bd](7c16a9bd))
* **StatusRoundIcon:** enable `icon.color` support ([70043c5b](70043c5b))
* **StatusRoundedImage:**
* introduce identicon support ([7a2648f6](7a2648f6), closes [#173](173))
* add loading indicator option ([44b275f2](44b275f2), closes [#56](56))
* **sandbox:**
* introduce first part of profile view for reference app ([4588d597](4588d597))
* introduce first version of reference app ([202fb886](202fb886))
+5 -8
View File
@@ -1,6 +1,6 @@
# StatusQ
# Status QML
> An emerging reusable QML UI component library for Status applications.
> An emerging reusable UI component library for Status applications.
## Usage
@@ -9,11 +9,9 @@ These modules are:
- [StatusQ.Core](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/qmldir)
- [StatusQ.Core.Theme](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/Theme/qmldir)
- [StatusQ.Core.Utils](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/Utils/qmldir)
- [StatusQ.Components](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Controls/qmldir)
- [StatusQ.Controls](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/qmldir)
- [StatusQ.Layout](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Layout/qmldir)
- [StatusQ.Platform](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Platform/qmldir)
- [StatusQ.Popups](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Popups/qmldir)
Provided components can be viewed and tested in the [sandbox application](#viewing-and-testing-components) that comes with this repository.
@@ -45,13 +43,12 @@ To run the sandbox from within a command line interface, run the following comma
```
$ git clone https://github.com/status-im/StatusQ
$ cd StatusQ/sandbox
$ ./scripts/build
$ qmake sandbox.pro -spec macx-clang CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
$ make
```
Once that is done, the sandbox can be started with the generated executable:
```
$ ./bin/sandbox
$ ./bin
```
More Documentation available on the [wiki](https://hackmd.io/@status-desktop/B1naRjxh_/%2FwFtiXvOiQqCdw2lk6gbOLA)
+226 -248
View File
@@ -1,261 +1,239 @@
import QtQuick 2.14
import QtQuick.Layouts 1.14
import QtQuick.Dialogs 1.3
import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
Grid {
Column {
spacing: 10
Grid {
id: buttonGridWidth
columns: 3
columnSpacing: 38
rowSpacing: 10
columns: 3
columnSpacing: 38
rowSpacing: 10
horizontalItemAlignment: Grid.AlignHCenter
horizontalItemAlignment: Grid.AlignHCenter
// Large
StatusButton {
text: "Button"
}
StatusButton {
text: "Button"
enabled: false
}
StatusButton {
text: "Button"
loading: true
}
StatusButton {
text: "Button"
type: StatusBaseButton.Type.Danger
}
StatusButton {
text: "Button"
type: StatusBaseButton.Type.Danger
enabled: false
}
StatusButton {
text: "Button"
loading: true
type: StatusBaseButton.Type.Danger
}
StatusFlatButton {
text: "Button"
}
StatusFlatButton {
text: "Button"
enabled: false
}
StatusFlatButton {
text: "Button"
loading: true
}
StatusFlatButton {
text: "Button"
type: StatusBaseButton.Type.Danger
}
StatusFlatButton {
text: "Button"
type: StatusBaseButton.Type.Danger
enabled: false
}
StatusFlatButton {
text: "Button"
type: StatusBaseButton.Type.Danger
loading: true
}
// Small
StatusButton {
text: "Button"
size: StatusBaseButton.Size.Small
}
StatusButton {
text: "Button"
enabled: false
size: StatusBaseButton.Size.Small
}
StatusButton {
text: "Button"
size: StatusBaseButton.Size.Small
loading: true
}
StatusButton {
text: "Button"
type: StatusBaseButton.Type.Danger
size: StatusBaseButton.Size.Small
}
StatusButton {
text: "Button"
type: StatusBaseButton.Type.Danger
size: StatusBaseButton.Size.Small
enabled: false
}
StatusButton {
text: "Button"
type: StatusBaseButton.Type.Danger
size: StatusBaseButton.Size.Small
loading: true
}
StatusFlatButton {
text: "Button"
size: StatusBaseButton.Size.Small
}
StatusFlatButton {
text: "Button"
enabled: false
size: StatusBaseButton.Size.Small
}
StatusFlatButton {
text: "Button"
enabled: false
size: StatusBaseButton.Size.Small
loading: true
}
// Icon buttons
// blue
StatusRoundButton {
icon.name: "info"
}
StatusRoundButton {
icon.name: "info"
enabled: false
}
StatusRoundButton {
icon.name: "info"
loading: true
}
// black
StatusRoundButton {
type: StatusRoundButton.Type.Secondary
icon.name: "info"
}
StatusRoundButton {
type: StatusRoundButton.Type.Secondary
icon.name: "info"
enabled: false
}
StatusRoundButton {
type: StatusRoundButton.Type.Secondary
icon.name: "info"
loading: true
}
// Rounded blue
StatusFlatRoundButton {
width: 44
height: 44
icon.name: "info"
}
StatusFlatRoundButton {
width: 44
height: 44
icon.name: "info"
enabled: false
}
StatusFlatRoundButton {
width: 44
height: 44
icon.name: "info"
loading: true
}
// Rounded white
StatusFlatRoundButton {
type: StatusFlatRoundButton.Type.Secondary
width: 44
height: 44
icon.name: "info"
}
StatusFlatRoundButton {
type: StatusFlatRoundButton.Type.Secondary
width: 44
height: 44
icon.name: "info"
enabled: false
}
StatusFlatRoundButton {
type: StatusFlatRoundButton.Type.Secondary
width: 44
height: 44
icon.name: "info"
loading: true
}
StatusFlatButton {
icon.name: "info"
text: "Button"
size: StatusBaseButton.Size.Small
}
StatusFlatButton {
icon.name: "info"
text: "Button"
enabled: false
size: StatusBaseButton.Size.Small
}
StatusFlatButton {
icon.name: "info"
text: "Button"
loading: true
size: StatusBaseButton.Size.Small
}
// Large
StatusButton {
text: "Button"
}
StatusPickerButton {
width: buttonGridWidth.width
bgColor: colorDialog.colorSelected ? colorDialog.color : Theme.palette.baseColor2
contentColor: colorDialog.colorSelected ? Theme.palette.indirectColor1 : Theme.palette.baseColor1
text: colorDialog.colorSelected ? colorDialog.color.toString().toUpperCase() : "Pick a color"
onClicked: {
colorDialog.open();
}
ColorDialog {
id: colorDialog
property bool colorSelected: false
onAccepted: {
colorSelected = true;
}
}
StatusButton {
text: "Button"
enabled: false
}
StatusButton {
text: "Button"
loading: true
}
StatusButton {
text: "Button"
type: StatusBaseButton.Type.Danger
}
StatusButton {
text: "Button"
type: StatusBaseButton.Type.Danger
enabled: false
}
StatusButton {
text: "Button"
loading: true
type: StatusBaseButton.Type.Danger
}
StatusFlatButton {
text: "Button"
}
StatusFlatButton {
text: "Button"
enabled: false
}
StatusFlatButton {
text: "Button"
loading: true
}
StatusFlatButton {
text: "Button"
type: StatusBaseButton.Type.Danger
}
StatusFlatButton {
text: "Button"
type: StatusBaseButton.Type.Danger
enabled: false
}
StatusFlatButton {
text: "Button"
type: StatusBaseButton.Type.Danger
loading: true
}
// Small
StatusButton {
text: "Button"
size: StatusBaseButton.Size.Small
}
StatusButton {
text: "Button"
enabled: false
size: StatusBaseButton.Size.Small
}
StatusButton {
text: "Button"
size: StatusBaseButton.Size.Small
loading: true
}
StatusButton {
text: "Button"
type: StatusBaseButton.Type.Danger
size: StatusBaseButton.Size.Small
}
StatusButton {
text: "Button"
type: StatusBaseButton.Type.Danger
size: StatusBaseButton.Size.Small
enabled: false
}
StatusButton {
text: "Button"
type: StatusBaseButton.Type.Danger
size: StatusBaseButton.Size.Small
loading: true
}
StatusFlatButton {
text: "Button"
size: StatusBaseButton.Size.Small
}
StatusFlatButton {
text: "Button"
enabled: false
size: StatusBaseButton.Size.Small
}
StatusFlatButton {
text: "Button"
enabled: false
size: StatusBaseButton.Size.Small
loading: true
}
// Icon buttons
// blue
StatusRoundButton {
icon.name: "info"
}
StatusRoundButton {
icon.name: "info"
enabled: false
}
StatusRoundButton {
icon.name: "info"
loading: true
}
// black
StatusRoundButton {
type: StatusRoundButton.Type.Secondary
icon.name: "info"
}
StatusRoundButton {
type: StatusRoundButton.Type.Secondary
icon.name: "info"
enabled: false
}
StatusRoundButton {
type: StatusRoundButton.Type.Secondary
icon.name: "info"
loading: true
}
// Rounded blue
StatusFlatRoundButton {
width: 44
height: 44
icon.name: "info"
}
StatusFlatRoundButton {
width: 44
height: 44
icon.name: "info"
enabled: false
}
StatusFlatRoundButton {
width: 44
height: 44
icon.name: "info"
loading: true
}
// Rounded white
StatusFlatRoundButton {
type: StatusFlatRoundButton.Type.Secondary
width: 44
height: 44
icon.name: "info"
}
StatusFlatRoundButton {
type: StatusFlatRoundButton.Type.Secondary
width: 44
height: 44
icon.name: "info"
enabled: false
}
StatusFlatRoundButton {
type: StatusFlatRoundButton.Type.Secondary
width: 44
height: 44
icon.name: "info"
loading: true
}
StatusFlatButton {
icon.name: "info"
text: "Button"
size: StatusBaseButton.Size.Small
}
StatusFlatButton {
icon.name: "info"
text: "Button"
enabled: false
size: StatusBaseButton.Size.Small
}
StatusFlatButton {
icon.name: "info"
text: "Button"
loading: true
size: StatusBaseButton.Size.Small
}
}
+1 -33
View File
@@ -5,10 +5,8 @@ import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import Sandbox 0.1
GridLayout {
columns: 1
columns: 6
columnSpacing: 5
rowSpacing: 5
@@ -115,36 +113,6 @@ GridLayout {
pinnedMessagesCount: 1
}
Item {
implicitWidth: 100
implicitHeight: 48
StatusChatInfoButton {
title: "Iuri Matias elided"
subTitle: "Contact"
icon.color: Theme.palette.miscColor7
image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
type: StatusChatInfoButton.Type.OneToOneChat
muted: true
pinnedMessagesCount: 1
width: 100
}
}
Item {
implicitWidth: 100
implicitHeight: 48
StatusChatInfoButton {
title: "Iuri Matias big not elided"
subTitle: "Contact"
icon.color: Theme.palette.miscColor7
image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
type: StatusChatInfoButton.Type.OneToOneChat
muted: true
pinnedMessagesCount: 1
width: 400
}
}
StatusChatInfoButton {
title: "group"
subTitle: "Group Chat"
+174 -658
View File
@@ -7,36 +7,47 @@ import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Layout 0.1
import StatusQ.Popups 0.1
import StatusQ.Platform 0.1
Rectangle {
id: demoApp
height: 602
width: 1002
width: 902
border.width: 1
border.color: Theme.palette.baseColor2
property string titleStyle: "osx"
Row {
anchors.top: demoApp.top
anchors.left: demoApp.left
anchors.topMargin: 14
anchors.leftMargin: 14
StatusMacTrafficLights {
anchors.left: parent.left
anchors.top: parent.top
anchors.margins: 13
spacing: 6
z: statusAppLayout.z + 1
visible: titleStyle === "osx"
Rectangle {
color: "#E24640"
height: 12
width: 12
radius: 6
}
Rectangle {
color: "#FFC12F"
height: 12
width: 12
radius: 6
}
Rectangle {
color: "#2ACB42"
height: 12
width: 12
radius: 6
}
}
StatusWindowsTitleBar {
id: windowsTitle
anchors.top: parent.top
width: parent.width
z: statusAppLayout.z + 1
visible: titleStyle === "windows"
}
StatusAppLayout {
id: statusAppLayout
anchors.top: windowsTitle.visible ? windowsTitle.bottom : demoApp.top
anchors.top: demoApp.top
anchors.left: demoApp.left
anchors.topMargin: demoApp.border.width
anchors.leftMargin: demoApp.border.width
@@ -113,16 +124,16 @@ Rectangle {
tooltip.text: "Wallet"
},
StatusNavBarTabButton {
icon.name: "bigger/browser"
icon.name: "browser"
tooltip.text: "Browser"
},
StatusNavBarTabButton {
icon.name: "bigger/status-update"
icon.name: "status-update"
tooltip.text: "Timeline"
},
StatusNavBarTabButton {
id: profileNavButton
icon.name: "bigger/settings"
icon.name: "profile"
badge.visible: true
badge.anchors.rightMargin: 4
badge.anchors.topMargin: 5
@@ -130,11 +141,6 @@ Rectangle {
badge.border.width: 2
tooltip.text: "Profile"
checked: appView.sourceComponent == statusAppProfileSettingsView
onClicked: {
appView.sourceComponent = statusAppProfileSettingsView
}
}
]
}
@@ -154,189 +160,19 @@ Rectangle {
leftPanel: Item {
anchors.fill: parent
StatusNavigationPanelHeadline {
id: headline
StatusChatList {
anchors.top: parent.top
anchors.topMargin: 16
anchors.topMargin: 64
anchors.horizontalCenter: parent.horizontalCenter
text: "Chat"
}
Item {
id: searchInputWrapper
anchors.top: headline.bottom
anchors.topMargin: 16
width: parent.width
height: searchInput.height
StatusBaseInput {
id: searchInput
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.right: actionButton.left
anchors.leftMargin: 16
anchors.rightMargin: 16
height: 36
topPadding: 8
bottomPadding: 0
placeholderText: "Search"
icon.name: "search"
}
StatusRoundButton {
id: actionButton
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 8
width: 32
height: 32
type: StatusRoundButton.Type.Secondary
icon.name: "add"
state: "default"
onClicked: chatContextMenu.popup(actionButton.width-chatContextMenu.width, actionButton.height + 4)
states: [
State {
name: "default"
PropertyChanges {
target: actionButton
icon.rotation: 0
highlighted: false
}
},
State {
name: "pressed"
PropertyChanges {
target: actionButton
icon.rotation: 45
highlighted: true
}
}
]
transitions: [
Transition {
from: "default"
to: "pressed"
RotationAnimation {
duration: 150
direction: RotationAnimation.Clockwise
easing.type: Easing.InCubic
}
},
Transition {
from: "pressed"
to: "default"
RotationAnimation {
duration: 150
direction: RotationAnimation.Counterclockwise
easing.type: Easing.OutCubic
}
}
]
StatusPopupMenu {
id: chatContextMenu
onOpened: {
actionButton.state = "pressed"
}
onClosed: {
actionButton.state = "default"
}
StatusMenuItem {
text: "Start new chat"
icon.name: "private-chat"
}
StatusMenuItem {
text: "Start group chat"
icon.name: "group-chat"
}
StatusMenuItem {
text: "Join public chat"
icon.name: "public-chat"
}
StatusMenuItem {
text: "Communities"
icon.name: "communities"
}
}
}
}
Column {
anchors.top: searchInputWrapper.bottom
anchors.topMargin: 16
width: parent.width
spacing: 8
StatusContactRequestsIndicatorListItem {
anchors.horizontalCenter: parent.horizontalCenter
title: "Contact requests"
requestsCount: 3
sensor.onClicked: demoContactRequestsModal.open()
}
StatusChatList {
anchors.horizontalCenter: parent.horizontalCenter
chatListItems.model: models.demoChatListItems
selectedChatId: "0"
onChatItemSelected: selectedChatId = id
onChatItemUnmuted: {
for (var i = 0; i < models.demoChatListItems.count; i++) {
let item = models.demoChatListItems.get(i);
if (item.chatId === id) {
models.demoChatListItems.setProperty(i, "muted", false)
}
}
}
popupMenu: StatusPopupMenu {
property string chatId
openHandler: function (id) {
chatId = id
}
StatusMenuItem {
text: "View Profile"
icon.name: "group-chat"
}
StatusMenuSeparator {}
StatusMenuItem {
text: "Mute chat"
icon.name: "notification"
}
StatusMenuItem {
text: "Mark as Read"
icon.name: "checkmark-circle"
}
StatusMenuItem {
text: "Clear history"
icon.name: "close-circle"
}
StatusMenuSeparator {}
StatusMenuItem {
text: "Delete chat"
icon.name: "delete"
type: StatusMenuItem.Type.Danger
selectedChatId: "0"
chatListItems.model: demoChatListItems
onChatItemSelected: selectedChatId = id
onChatItemUnmuted: {
for (var i = 0; i < demoChatListItems.count; i++) {
let item = demoChatListItems.get(i);
if (item.chatId === id) {
demoChatListItems.setProperty(i, "muted", false)
}
}
}
@@ -350,14 +186,12 @@ Rectangle {
anchors.top: parent.top
width: parent.width
chatInfoButton.title: "Amazing Funny Squirrel"
chatInfoButton.title: "Amazing Funny Squirrel"
chatInfoButton.subTitle: "Contact"
chatInfoButton.icon.color: Theme.palette.miscColor7
chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
chatInfoButton.pinnedMessagesCount: 1
searchButton.visible: false
membersButton.visible: false
notificationCount: 1
onNotificationButtonClicked: notificationCount = 0
@@ -389,6 +223,7 @@ Rectangle {
}
}
}
}
}
}
@@ -396,487 +231,168 @@ Rectangle {
Component {
id: statusAppCommunityView
StatusAppThreePanelLayout {
id: root
handle: Rectangle {
implicitWidth: 5
color: SplitHandle.pressed ? Theme.palette.baseColor2
: (SplitHandle.hovered ? Qt.darker(Theme.palette.baseColor5, 1.1) : "transparent")
}
leftPanel: Item {
id: leftPanel
StatusChatInfoToolBar {
id: statusChatInfoToolBar
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
chatInfoButton.title: "CryptoKitties"
chatInfoButton.subTitle: "128 Members"
chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
chatInfoButton.icon.color: Theme.palette.miscColor6
chatInfoButton.onClicked: demoCommunityDetailModal.open()
popupMenu: StatusPopupMenu {
StatusMenuItem {
text: "Create channel"
icon.name: "channel"
}
StatusMenuItem {
text: "Create category"
icon.name: "channel-category"
}
StatusMenuSeparator {}
StatusMenuItem {
text: "Invite people"
icon.name: "share-ios"
}
}
}
ScrollView {
id: scrollView
anchors.top: statusChatInfoToolBar.bottom
anchors.topMargin: 8
anchors.bottom: parent.bottom
width: leftPanel.width
contentHeight: communityCategories.height
clip: true
StatusChatListAndCategories {
id: communityCategories
width: leftPanel.width
height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
draggableItems: true
draggableCategories: false
chatList.model: models.demoCommunityChatListItems
categoryList.model: models.demoCommunityCategoryItems
showCategoryActionButtons: true
onChatItemSelected: selectedChatId = id
categoryPopupMenu: StatusPopupMenu {
property string categoryId
openHandler: function (id) {
categoryId = id
}
StatusMenuItem {
text: "Mute Category"
icon.name: "notification"
}
StatusMenuItem {
text: "Mark as Read"
icon.name: "checkmark-circle"
}
StatusMenuItem {
text: "Edit Category"
icon.name: "edit"
}
StatusMenuSeparator {}
StatusMenuItem {
text: "Delete Category"
icon.name: "delete"
type: StatusMenuItem.Type.Danger
}
}
chatListPopupMenu: StatusPopupMenu {
property string chatId
StatusMenuItem {
text: "Mute chat"
icon.name: "notification"
}
StatusMenuItem {
text: "Mark as Read"
icon.name: "checkmark-circle"
}
StatusMenuItem {
text: "Clear history"
icon.name: "close-circle"
}
StatusMenuSeparator {}
StatusMenuItem {
text: "Delete chat"
icon.name: "delete"
type: StatusMenuItem.Type.Danger
}
}
popupMenu: StatusPopupMenu {
StatusMenuItem {
text: "Create channel"
icon.name: "channel"
}
StatusMenuItem {
text: "Create category"
icon.name: "channel-category"
}
StatusMenuSeparator {}
StatusMenuItem {
text: "Invite people"
icon.name: "share-ios"
}
}
}
}
}
centerPanel: Item {
StatusChatToolBar {
id: statusChatToolBar
anchors.top: parent.top
width: parent.width
chatInfoButton.title: "general"
chatInfoButton.subTitle: "Community Chat"
chatInfoButton.icon.color: Theme.palette.miscColor6
chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
onSearchButtonClicked: {
searchButton.highlighted = !searchButton.highlighted;
searchPopup.setSearchSelection(demoCommunityDetailModal.header.title,
"",
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
locationModel: models.optionsModel
}
}
rightPanel: Item {
id: rightPanel
StatusBaseText {
id: titleText
anchors.top: parent.top
anchors.topMargin:16
anchors.left: parent.left
anchors.leftMargin: 16
opacity: (rightPanel.width > 50) ? 1.0 : 0.0
visible: (opacity > 0.1)
font.pixelSize: 15
text: qsTr("Members")
}
ListView {
anchors.top: titleText.bottom
anchors.topMargin: 16
anchors.left: parent.left
anchors.leftMargin: 8
anchors.right: parent.right
anchors.rightMargin: 8
anchors.bottom: parent.bottom
anchors.bottomMargin: 16
boundsBehavior: Flickable.StopAtBounds
model: ["John", "Nick", "Maria", "Mike"]
delegate: Row {
width: parent.width
height: 30
spacing: 8
Rectangle {
width: 24
height: 24
radius: width/2
color: Qt.rgba(Math.random(), Math.random(), Math.random(), 255)
}
StatusBaseText {
height: parent.height
horizontalAlignment: Text.AlignHCenter
opacity: (rightPanel.width > 50) ? 1.0 : 0.0
visible: (opacity > 0.1)
font.pixelSize: 15
color: Theme.palette.directColor1
text: modelData
}
}
}
}
}
}
Component {
id: statusAppProfileSettingsView
StatusAppTwoPanelLayout {
leftPanel: Item {
anchors.fill: parent
StatusNavigationPanelHeadline {
id: profileHeadline
Column {
anchors.top: parent.top
anchors.topMargin: 16
anchors.topMargin: 64
anchors.horizontalCenter: parent.horizontalCenter
text: "Profile"
spacing: 4
StatusChatList {
id: statusChatList
anchors.horizontalCenter: parent.horizontalCenter
chatListItems.model: demoCommunityChatListItems
}
StatusChatListCategory {
name: "Public"
chatList.chatListItems.model: demoCommunityChatListItems
chatList.selectedChatId: "0"
chatList.onChatItemSelected: chatList.selectedChatId = id
popupMenu: categoryPopupCmp
}
StatusChatListCategory {
name: "Development"
chatList.chatListItems.model: demoCommunityChatListItems
chatList.onChatItemSelected: chatList.selectedChatId = id
popupMenu: categoryPopupCmp
}
}
ScrollView {
anchors.top: profileHeadline.bottom
anchors.topMargin: 16
anchors.bottom: parent.bottom
width: parent.width
Component {
id: categoryPopupCmp
contentHeight: profileMenuItems.height + 8
contentWidth: parent.width
clip: true
Column {
id: profileMenuItems
anchors.horizontalCenter: parent.horizontalCenter
spacing: 4
Repeater {
model: models.demoProfileGeneralMenuItems
delegate: StatusNavigationListItem {
title: model.title
icon.name: model.icon
}
StatusPopupMenu {
StatusMenuItem {
text: "Mute Category"
icon.name: "notification"
}
StatusListSectionHeadline { text: "Settings" }
Repeater {
model: models.demoProfileSettingsMenuItems
delegate: StatusNavigationListItem {
title: model.title
icon.name: model.icon
}
StatusMenuItem {
text: "Mark as Read"
icon.name: "checkmark-circle"
}
Item {
id: invisibleSeparator
height: 16
width: parent.width
StatusMenuItem {
text: "Edit Category"
icon.name: "edit"
}
Repeater {
model: models.demoProfileOtherMenuItems
delegate: StatusNavigationListItem {
title: model.title
icon.name: model.icon
}
StatusMenuSeparator {}
StatusMenuItem {
text: "Delete Category"
icon.name: "delete"
type: StatusMenuItem.Type.Danger
}
}
}
}
rightPanel: Item {
anchors.fill: parent
StatusChatToolBar {
anchors.top: parent.top
width: parent.width
chatInfoButton.title: "general"
chatInfoButton.subTitle: "Community Chat"
chatInfoButton.icon.color: Theme.palette.miscColor6
chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
}
}
}
}
StatusModal {
id: demoContactRequestsModal
anchors.centerIn: parent
header.title: "Contact Requests"
headerActionButton: StatusFlatRoundButton {
type: StatusFlatRoundButton.Type.Secondary
width: 32
height: 32
icon.width: 20
icon.height: 20
icon.name: "notification"
ListModel {
id: demoChatListItems
ListElement {
chatId: "0"
name: "#status"
chatType: StatusChatListItem.Type.PublicChat
muted: false
hasUnreadMessages: false
hasMention: false
unreadMessagesCount: 0
iconColor: "blue"
}
contentItem: StatusBaseText {
anchors.centerIn: parent
text: "Contact request will be shown here"
font.pixelSize: 15
color: Theme.palette.directColor1
ListElement {
chatId: "1"
name: "#status-desktop"
chatType: StatusChatListItem.Type.PublicChat
muted: false
hasUnreadMessages: true
iconColor: "red"
unreadMessagesCount: 1
}
rightButtons: [
StatusButton {
text: "Decline all"
type: StatusBaseButton.Type.Danger
onClicked: demoContactRequestsModal.close()
},
StatusButton {
text: "Accept all"
onClicked: demoContactRequestsModal.close()
}
]
}
StatusModal {
id: demoCommunityDetailModal
anchors.centerIn: parent
header.title: "Cryptokitties"
header.subTitle: "Public Community"
header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
contentItem: Column {
width: demoCommunityDetailModal.width
StatusModalDivider {
bottomPadding: 8
}
StatusBaseText {
text: "A community of cat lovers, meow!"
verticalAlignment: Text.AlignVCenter
font.pixelSize: 15
height: 46
color: Theme.palette.directColor1
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 16
anchors.rightMargin: 16
}
StatusModalDivider {
topPadding: 8
bottomPadding: 8
}
StatusDescriptionListItem {
title: "Share community"
subTitle: "https://join.status.im/u/0x04...45f19"
tooltip.text: "Copy to clipboard"
icon.name: "copy"
iconButton.onClicked: tooltip.visible = !tooltip.visible
width: parent.width
}
StatusModalDivider {
topPadding: 8
bottomPadding: 8
}
StatusListItem {
anchors.horizontalCenter: parent.horizontalCenter
statusListItemTitle.font.pixelSize: 17
title: "Members"
icon.name: "group-chat"
label: "184"
components: [
StatusIcon {
icon: "chevron-down"
rotation: 270
color: Theme.palette.baseColor1
}
]
}
StatusListItem {
anchors.horizontalCenter: parent.horizontalCenter
statusListItemTitle.font.pixelSize: 17
title: "Notifications"
icon.name: "notification"
components: [
StatusSwitch {}
]
}
StatusModalDivider {
topPadding: 8
bottomPadding: 8
}
StatusListItem {
anchors.horizontalCenter: parent.horizontalCenter
statusListItemTitle.font.pixelSize: 17
title: "Edit community"
icon.name: "edit"
type: StatusListItem.Type.Secondary
}
StatusListItem {
anchors.horizontalCenter: parent.horizontalCenter
statusListItemTitle.font.pixelSize: 17
title: "Transfer ownership"
icon.name: "exchange"
type: StatusListItem.Type.Secondary
}
StatusListItem {
anchors.horizontalCenter: parent.horizontalCenter
statusListItemTitle.font.pixelSize: 17
title: "Leave community"
icon.name: "arrow-right"
icon.rotation: 180
type: StatusListItem.Type.Secondary
}
ListElement {
chatId: "2"
name: "Amazing Funny Squirrel"
chatType: StatusChatListItem.Type.OneToOneChat
muted: false
hasUnreadMessages: false
iconColor: "green"
identicon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
unreadMessagesCount: 0
}
ListElement {
chatId: "3"
name: "Black Ops"
chatType: StatusChatListItem.Type.GroupChat
muted: false
hasUnreadMessages: false
iconColor: "purple"
unreadMessagesCount: 0
}
ListElement {
chatId: "4"
name: "Spectacular Growing Otter"
chatType: StatusChatListItem.Type.OneToOneChat
muted: true
hasUnreadMessages: false
iconColor: "Orange"
unreadMessagesCount: 0
}
}
Models {
id: models
ListModel {
id: demoCommunityChatListItems
ListElement {
chatId: "0"
name: "general"
chatType: StatusChatListItem.Type.CommunityChat
muted: false
hasUnreadMessages: false
hasMention: false
unreadMessagesCount: 0
iconColor: "orange"
}
ListElement {
chatId: "1"
name: "random"
chatType: StatusChatListItem.Type.CommunityChat
muted: false
hasUnreadMessages: false
hasMention: false
unreadMessagesCount: 0
iconColor: "orange"
}
ListElement {
chatId: "2"
name: "watercooler"
chatType: StatusChatListItem.Type.CommunityChat
muted: false
hasUnreadMessages: false
hasMention: false
unreadMessagesCount: 0
iconColor: "orange"
}
}
}
+1 -116
View File
@@ -40,18 +40,11 @@ GridLayout {
StatusChatListCategoryItem {
title: "Chat list category"
opened: false
showActionButtons: true
}
StatusChatListCategoryItem {
title: "Chat list category (opened)"
opened: true
showActionButtons: true
}
StatusChatListCategoryItem {
title: "Chat list category (no buttons)"
opened: true
}
StatusChatListItem {
@@ -95,20 +88,11 @@ GridLayout {
onUnmute: muted = false
}
StatusChatListItem {
name: "muted-with-mentions"
type: StatusChatListItem.Type.PublicChat
muted: true
hasUnreadMessages: true
badge.value: 1
}
StatusChatListItem {
name: "selected-channel"
type: StatusChatListItem.Type.PublicChat
selected: true
}
StatusChatListItem {
name: "selected-muted-channel"
type: StatusChatListItem.Type.PublicChat
@@ -116,24 +100,6 @@ GridLayout {
muted: true
}
StatusChatListItem {
name: "selected-muted-channel-with-unread-messages"
type: StatusChatListItem.Type.PublicChat
selected: true
muted: true
hasUnreadMessages: true
}
StatusChatListItem {
name: "selected-muted-with-mentions"
type: StatusChatListItem.Type.PublicChat
selected: true
muted: true
hasUnreadMessages: true
badge.value: 1
}
StatusListItem {
title: "Title"
}
@@ -143,45 +109,19 @@ GridLayout {
subTitle: "Subtitle"
}
StatusListItem {
title: "Title"
subTitle: "Subtitle"
tertiaryTitle: "Tertiary title"
statusListItemTitle.font.pixelSize: 17
statusListItemTitle.font.weight: Font.Bold
}
StatusListItem {
title: "Title"
subTitle: "Super long description that causes a multiline paragraph and makes the size of the component grow. Let's see how it behaves."
tertiaryTitle: "Tertiary title"
icon.name: "info"
statusListItemTitle.font.pixelSize: 17
statusListItemTitle.font.weight: Font.Bold
}
StatusListItem {
title: "Title"
subTitle: "Subtitle"
icon.name: "info"
}
StatusListItem {
title: "Title"
subTitle: "Subtitle"
image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
}
StatusListItem {
title: "Title"
subTitle: "Subtitle"
image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
image.isIdenticon: true
}
StatusListItem {
title: "Title"
subTitle: "Subtitle"
@@ -277,62 +217,11 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
]
}
StatusListItem {
title: "Title"
icon.name: "info"
type: StatusListItem.Type.Secondary
}
StatusListItem {
title: "Title"
icon.isLetterIdenticon: true
icon.background.color: "orange"
}
StatusListItem {
title: "Title"
titleAsideText: "test"
}
StatusListItem {
title: "Title"
icon.name: "delete"
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"
}
StatusDescriptionListItem {
title: "Title"
subTitle: "Subtitle"
value: "None"
sensor.enabled: true
}
StatusDescriptionListItem {
title: "Title"
subTitle: "Subtitle"
@@ -341,8 +230,4 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
iconButton.onClicked: tooltip.visible = !tooltip.visible
}
StatusContactRequestsIndicatorListItem {
title: "Contact requests"
requestsCount: 3
}
}
-336
View File
@@ -1,336 +0,0 @@
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"
position: 0
}
ListElement {
chatId: "1"
name: "status-desktop"
chatType: StatusChatListItem.Type.PublicChat
muted: false
color: "red"
unreadMessagesCount: 1
mentionsCount: 1
position: 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
position: 2
}
ListElement {
chatId: "3"
name: "Black Ops"
chatType: StatusChatListItem.Type.GroupChat
muted: false
color: "purple"
unreadMessagesCount: 0
position: 3
}
ListElement {
chatId: "4"
name: "Spectacular Growing Otter"
chatType: StatusChatListItem.Type.OneToOneChat
muted: true
color: "Orange"
unreadMessagesCount: 0
position: 4
}
ListElement {
chatId: "5"
name: "channel-with-a-super-duper-long-name"
chatType: StatusChatListItem.Type.PublicChat
muted: false
color: "green"
unreadMessagesCount: 0
position: 5
}
}
property var demoCommunityChatListItems: ListModel {
id: demoCommunityChatListItems
ListElement {
chatId: "0"
name: "general"
chatType: StatusChatListItem.Type.CommunityChat
muted: false
unreadMessagesCount: 0
color: "orange"
position: 0
}
ListElement {
chatId: "1"
name: "random"
chatType: StatusChatListItem.Type.CommunityChat
muted: false
unreadMessagesCount: 0
color: "orange"
categoryId: "public"
position: 0
}
ListElement {
chatId: "2"
name: "watercooler"
chatType: StatusChatListItem.Type.CommunityChat
muted: false
unreadMessagesCount: 0
color: "orange"
categoryId: "public"
position: 1
}
ListElement {
chatId: "3"
name: "language-design"
chatType: StatusChatListItem.Type.CommunityChat
muted: false
unreadMessagesCount: 0
color: "orange"
categoryId: "dev"
position: 0
}
}
property var demoCommunityCategoryItems: ListModel {
id: demoCommunityCategoryItems
ListElement {
categoryId: "public"
name: "Public"
position: 0
}
ListElement {
categoryId: "dev"
name: "Development"
position: 1
}
}
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 { itemId: "i1"; titleId: "t1"; title: "@Flea"; sectionName: "Messages"; time: "18:55 AM"; content: "lorem ipsum <font color='#4360DF'>@Nick</font> dolor sit amet";
image: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg";
color: "orange";
badgeImage: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg";
badgePrimaryText: "CryptoKities";
badgeSecondaryText: "";
badgeIconColor: "";
badgeIsLetterIdenticon: false }
ListElement { itemId: "i2"; titleId: "t2"; image: ""; color: "blue"; title: "core"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
ListElement { itemId: "i3"; titleId: "t3"; image: ""; color: "yellow"; title: "communities-phase3"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
ListElement { itemId: "i4"; titleId: "t4"; image: ""; color: "black"; title: "core-ui"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
ListElement { itemId: "i5"; titleId: "t5"; image: ""; color: "green"; title: "desktop"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
ListElement { itemId: "i6"; titleId: "t6"; image: ""; color: "red"; title: "Crocodile Vanilla Bird"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
ListElement { itemId: "i7"; titleId: "t7"; image: ""; color: "purple"; title: "carmen eth"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
ListElement { itemId: "i8"; titleId: "t8"; image: ""; color: "red"; title: "CryptoKitties"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
ListElement { itemId: "i9"; titleId: "t9"; image: ""; color: "blue"; title: "MyCommunity"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
ListElement { itemId: "i10"; titleId: "t10"; image: ""; color: "green"; title: "Foo"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
}
property var searchResultsB: ListModel {
ListElement { itemId: "i1"; titleId: "t1"; title: "@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 ";
image: "";
color: "orange";
badgeImage: "";
badgePrimaryText: "CryptoKities";
badgeSecondaryText: "#design";
badgeIconColor: "pink"; badgeIsLetterIdenticon: true }
ListElement { itemId: "i2"; titleId: "t2"; image: ""; color: "blue"; title: "support"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
ListElement { itemId: "i3"; titleId: "t3"; image: ""; color: "red"; title: "desktop-ui"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
ListElement { itemId: "i4"; titleId: "t4"; image: ""; color: "orange"; title: "climate-change"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
ListElement { itemId: "i5"; titleId: "t5"; image: ""; color: "black"; title: "food"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: "pink"; badgeIsLetterIdenticon: true }
ListElement { itemId: "i6"; titleId: "t6"; image: ""; color: "green"; title: "CryptoKitties"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
ListElement { itemId: "i7"; titleId: "t7"; image: ""; color: "purple"; title: "CryptoRangers"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
ListElement { itemId: "i8"; titleId: "t8"; image: ""; color: "yellow"; title: "Foo"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: "orange"; badgeIsLetterIdenticon: true }
}
property ListModel optionsModel: ListModel {
ListElement {
value: "item_1"
title: "Item with icon"
imageSource: ""
iconName: "chat"
iconColor: ""
isIdenticon: false
subItems: [
ListElement {
value: "sub_item_1_1"
text: "Profile image item"
imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
iconName: ""
iconColor: ""
isIdenticon: false
},
ListElement {
value: "sub_item_1_2"
text: "identicon item"
imageSource: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
iconName: ""
iconColor: ""
isIdenticon: true
}]}
ListElement {
value: "item_2"
title: "Community item";
imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
iconName: ""
iconColor: ""
isIdenticon: false
subItems: [
ListElement {
value: "sub_item_2_1"
text: "welcome"
imageSource: ""
iconName: "channel"
iconColor: ""
isIdenticon: false
},
ListElement {
value: "sub_item_2_2"
text: "support"
imageSource: ""
iconName: "channel"
iconColor: ""
isIdenticon: false
},
ListElement {
value: "sub_item_2_3"
text: "news"
imageSource: ""
iconName: "channel"
iconColor: ""
isIdenticon: false
}]}
ListElement {
value: "item_3"
title: "Other";
imageSource: "";
iconName: "info"
iconColor: ""
isIdenticon: false
subItems: [
ListElement {
value: "sub_item_3_1"
text: "news"
imageSource: ""
iconName: "channel"
iconColor: ""
isIdenticon: false
}]}
ListElement {
value: "item_4"
title: "Letter identicon";
imageSource: "";
iconName: ""
iconColor: "red"
isIdenticon: false
subItems: [
ListElement {
value: "sub_item_4_1"
text: "news"
imageSource: ""
iconName: "channel"
iconColor: ""
isIdenticon: false
}]}
}
}
@@ -4,18 +4,15 @@ import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
Item {
implicitHeight: 34
implicitWidth: 176
height: 34
width: 176
property alias text: label.text
StatusBaseText {
anchors.left: parent.left
anchors.bottom: parent.bottom
anchors.bottomMargin: 4
anchors.leftMargin: 16
anchors.verticalCenter: parent.verticalCenter
id: label
font.pixelSize: 15
color: Theme.palette.baseColor1
}
}
-301
View File
@@ -1,301 +0,0 @@
import QtQuick 2.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Popups 0.1
Column {
spacing: 20
StatusButton {
text: "Simple modal"
onClicked: simpleModal.open()
}
StatusButton {
text: "Modal with header image"
onClicked: headerImageModal.open()
}
StatusButton {
text: "Modal with footer buttons"
onClicked: footerButtonsModal.open()
}
StatusButton {
text: "Modal with header action button"
onClicked: headerActionButtonModal.open()
}
StatusButton {
text: "Modal with content"
onClicked: modalExample.open()
}
StatusButton {
text: "Modal with changable content"
onClicked: modalWithContentAccess.open()
}
StatusButton {
text: "Modal with letter identicon"
onClicked: modalWithLetterIdenticon.open()
}
StatusButton {
text: "Modal with identicon"
onClicked: modalWithIdenticon.open()
}
StatusButton {
text: "Modal with long titles"
onClicked: modalWithLongTitles.open()
}
StatusButton {
text: "Modal with Header Popup Menu"
onClicked: modalWithHeaderPopupMenu.open()
}
StatusModal {
id: simpleModal
anchors.centerIn: parent
header.title: "Some Title"
header.subTitle: "Subtitle"
}
StatusModal {
id: headerImageModal
anchors.centerIn: parent
header.title: "Some Title"
header.subTitle: "Subtitle"
header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
}
StatusModal {
id: footerButtonsModal
anchors.centerIn: parent
header.title: "Some Title"
header.subTitle: "Subtitle"
header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
leftButtons: [
StatusRoundButton {
icon.name: "arrow-right"
rotation: 180
}
]
rightButtons: [
StatusButton {
text: "Button"
},
StatusButton {
text: "Button"
}
]
}
StatusModal {
id: headerActionButtonModal
anchors.centerIn: parent
header.title: "Some Title"
header.subTitle: "Subtitle"
header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
headerActionButton: StatusFlatRoundButton {
type: StatusFlatRoundButton.Type.Secondary
width: 32
height: 32
icon.width: 20
icon.height: 20
icon.name: "info"
}
leftButtons: [
StatusRoundButton {
icon.name: "arrow-right"
rotation: 180
}
]
rightButtons: [
StatusButton {
text: "Button"
},
StatusButton {
text: "Button"
}
]
}
StatusModal {
id: modalExample
anchors.centerIn: parent
header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
header.title: "Header"
header.subTitle: "SubTitle"
rightButtons: [
StatusButton {
text: "Button"
},
StatusButton {
text: "Button"
}
]
leftButtons: [
StatusRoundButton {
icon.name: "arrow-right"
rotation: 180
}
]
contentItem: StatusBaseText {
anchors.centerIn: parent
text: "Some text content"
font.pixelSize: 15
color: Theme.palette.directColor1
}
headerActionButton: StatusFlatRoundButton {
type: StatusFlatRoundButton.Type.Secondary
width: 32
height: 32
icon.width: 20
icon.height: 20
icon.name: "info"
}
}
StatusModal {
id: modalWithContentAccess
anchors.centerIn: parent
header.title: "Header"
header.subTitle: "SubTitle"
contentItem: StatusBaseText {
id: text
anchors.centerIn: parent
text: "Some text content"
font.pixelSize: 15
color: Theme.palette.directColor1
}
rightButtons: [
StatusButton {
text: "Change text"
onClicked: {
modalWithContentAccess.contentItem.text = "Changed!"
}
}
]
}
StatusModal {
id: modalWithLetterIdenticon
anchors.centerIn: parent
header.title: "Header"
header.subTitle: "SubTitle"
header.icon.isLetterIdenticon: true
header.icon.background.color: "red"
contentItem: StatusBaseText {
anchors.centerIn: parent
text: "Some text content"
font.pixelSize: 15
color: Theme.palette.directColor1
}
rightButtons: [
StatusButton {
text: "Change text"
onClicked: {
modalWithLetterIdenticon.contentItem.text = "Changed!"
}
}
]
}
StatusModal {
id: modalWithIdenticon
anchors.centerIn: parent
header.title: "Header"
header.subTitle: "SubTitle"
header.image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
header.image.isIdenticon: true
contentItem: StatusBaseText {
anchors.centerIn: parent
text: "Some text content"
font.pixelSize: 15
color: Theme.palette.directColor1
}
rightButtons: [
StatusButton {
text: "Change text"
onClicked: {
modalWithIdenticon.contentItem.text = "Changed!"
}
}
]
}
StatusModal {
id: modalWithLongTitles
anchors.centerIn: parent
header.title: "Some super long text here that exceeds the available space"
header.subTitle: "Some super long text here that exceeds the available space"
header.subTitleElide: Text.ElideMiddle
header.image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
header.image.isIdenticon: true
contentItem: StatusBaseText {
anchors.centerIn: parent
text: "Some text content"
font.pixelSize: 15
color: Theme.palette.directColor1
}
rightButtons: [
StatusButton {
text: "Change text"
onClicked: {
modalWithLongTitles.contentItem.text = "Changed!"
}
}
]
}
StatusModal {
id: modalWithHeaderPopupMenu
anchors.centerIn: parent
header.title: "helloworld.eth"
header.subTitle: "Basic address"
header.popupMenu: StatusPopupMenu {
id: popupMenu
Repeater {
model: dummyAccountsModel
delegate: Loader {
sourceComponent: popupMenu.delegate
onLoaded: {
item.action.text = model.name
item.action.iconSettings.name = model.iconName
}
}
}
onMenuItemClicked: {
popupMenu.dismiss()
}
}
}
ListModel {
id: dummyAccountsModel
ListElement{name: "Account 1"; iconName: "filled-account"}
ListElement{name: "Account 2"; iconName: "filled-account"}
}
}
-40
View File
@@ -1,40 +0,0 @@
import QtQuick 2.14
import QtQuick.Layouts 1.14
import QtQuick.Controls 2.13
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
import StatusQ.Popups 0.1
GridLayout {
columns: 1
columnSpacing: 5
rowSpacing: 5
StatusChatInfoToolBar {
chatInfoButton.title: "Cryptokitties"
chatInfoButton.subTitle: "128 Members"
chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
chatInfoButton.icon.color: Theme.palette.miscColor6
popupMenu: StatusPopupMenu {
StatusMenuItem {
text: "Create channel"
icon.name: "channel"
}
StatusMenuItem {
text: "Create category"
icon.name: "channel-category"
}
StatusMenuSeparator {}
StatusMenuItem {
text: "Invite people"
icon.name: "share-ios"
}
}
}
}
@@ -1,69 +0,0 @@
import QtQuick 2.14
import QtQuick.Layouts 1.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
Column {
spacing: 12
width: 800
anchors.top:parent.top
leftPadding: 20
rightPadding: 20
StatusExpandableSettingsItem {
anchors.horizontalCenter: parent.horizontalCenter
expandable: false
icon.name: "seed-phrase"
primaryText: qsTr("Back up seed phrase")
secondaryText: qsTr("Back up your seed phrase now to secure this account ajhaDH SDHSAHDLSADBSA,DLISAHDLASD ADASDHASLDHALSDHAS DAS,DASJDGLIASGD")
button.text: qsTr("Back up seed phrase")
}
StatusExpandableSettingsItem {
anchors.horizontalCenter: parent.horizontalCenter
expandable: true
icon.name: "secret"
primaryText: qsTr("Account signing phrase")
secondaryText: qsTr("View your signing phrase and ensure that you never get scammed")
expandableComponent: notImplemented
}
StatusExpandableSettingsItem {
anchors.horizontalCenter: parent.horizontalCenter
expandable: true
icon.name: "seed-phrase"
primaryText: qsTr("View private key")
secondaryText: qsTr("Back up your seed phrase now to secure this account")
expandableComponent: notImplemented
button.text: qsTr("View private key")
button.icon.name: "tiny/public-chat"
button.onClicked: {
// To-do open enter password Modal
expanded = !expanded
}
}
Component {
id: notImplemented
Rectangle {
anchors.centerIn: parent
width: 654
height: infoText.implicitHeight
color: Theme.palette.baseColor5
StatusBaseText {
id: infoText
anchors.centerIn: parent
color: Theme.palette.directColor4
font.pixelSize: 15
lineHeight: 22
lineHeightMode: Text.FixedHeight
font.weight: Font.Medium
text: qsTr("Not Implemented")
}
}
}
}
-119
View File
@@ -1,119 +0,0 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Controls.Validators 0.1
import Sandbox 0.1
Column {
spacing: 8
StatusInput {
input.placeholderText: "Placeholder"
}
StatusInput {
label: "Label"
input.placeholderText: "Disabled"
input.enabled: false
}
StatusInput {
input.placeholderText: "Clearable"
input.clearable: true
}
StatusInput {
input.placeholderText: "Invalid"
input.valid: false
}
StatusInput {
label: "Label"
input.icon.name: "search"
input.placeholderText: "Input with icon"
}
StatusInput {
label: "Label"
input.placeholderText: "Placeholder"
input.clearable: true
}
StatusInput {
charLimit: 30
input.placeholderText: "Placeholder"
input.clearable: true
}
StatusInput {
label: "Label"
charLimit: 30
input.placeholderText: "Placeholder"
input.clearable: true
}
StatusInput {
label: "Label"
charLimit: 30
errorMessage: "Error message"
input.clearable: true
input.valid: false
input.placeholderText: "Placeholder"
}
StatusInput {
label: "StatusInput"
secondaryLabel: "with right icon"
input.icon.width: 15
input.icon.height: 11
input.icon.name: text !== "" ? "checkmark" : ""
input.leftIcon: false
}
StatusInput {
label: "Label"
secondaryLabel: "secondary label"
input.placeholderText: "Placeholder"
input.implicitHeight: 56
}
StatusInput {
label: "Label"
charLimit: 30
input.placeholderText: "Input with validator"
validators: [
StatusMinLengthValidator { minLength: 10 }
]
onTextChanged: {
if (errors && errors.minLength) {
errorMessage = `Value can't be shorter than ${errors.minLength.min} but got ${errors.minLength.actual}`
}
}
}
StatusInput {
input.multiline: true
input.placeholderText: "Multiline"
}
StatusInput {
input.multiline: true
input.placeholderText: "Multiline with static height"
input.implicitHeight: 100
}
StatusInput {
input.multiline: true
input.placeholderText: "Multiline with max/min"
input.minimumHeight: 80
input.maximumHeight: 200
}
}
+6 -84
View File
@@ -22,13 +22,6 @@ GridLayout {
onClicked: complexMenu.popup()
}
StatusButton {
text: "Menu with custom images and icons"
onClicked: customMenu.popup()
}
StatusPopupMenu {
id: simpleMenu
StatusMenuItem {
@@ -46,104 +39,33 @@ GridLayout {
StatusPopupMenu {
id: complexMenu
subMenuItemIcons: [{ icon: 'info' }]
subMenuItemIcons: ['info']
StatusMenuItem {
text: "One"
iconSettings.name: "info"
icon.name: "info"
}
StatusMenuSeparator {}
StatusMenuItem {
text: "Two"
iconSettings.name: "info"
icon.name: "info"
}
StatusMenuItem {
text: "Three"
iconSettings.name: "info"
icon.name: "info"
}
StatusPopupMenu {
title: "Four"
StatusMenuItem {
text: "One"
iconSettings.name: "info"
icon.name: "info"
}
StatusMenuItem {
text: "Three"
iconSettings.name: "info"
}
}
}
StatusPopupMenu {
id: customMenu
subMenuItemIcons: [
{ icon: "chat" },
{
source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
},
{
isLetterIdenticon: true,
color: "red"
}
]
StatusMenuItem {
text: "Anywhere"
}
StatusMenuSeparator {}
StatusPopupMenu {
title: "Chat"
StatusMenuItem {
text: "vitalik.eth"
image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
image.isIdenticon: true
}
StatusMenuItem {
text: "Pascal"
image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
}
}
StatusPopupMenu {
title: "Cryptokitties"
StatusMenuItem {
text: "welcome"
iconSettings.name: "channel"
iconSettings.color: Theme.palette.directColor1
}
StatusMenuItem {
text: "support"
iconSettings.name: "channel"
iconSettings.color: Theme.palette.directColor1
}
StatusMenuHeadline { text: "Public" }
StatusMenuItem {
text: "news"
iconSettings.name: "channel"
iconSettings.color: Theme.palette.directColor1
}
}
StatusPopupMenu {
title: "Another community"
StatusMenuItem {
text: "welcome"
iconSettings.isLetterIdenticon: true
iconSettings.background.color: "red"
icon.name: "info"
}
}
}
-24
View File
@@ -1,24 +0,0 @@
import QtQuick 2.14
import QtQuick.Layouts 1.14
import QtQuick.Controls 2.13
import StatusQ.Controls 0.1
GridLayout {
columns: 1
columnSpacing: 5
rowSpacing: 5
StatusSwitchTabBar {
StatusSwitchTabButton {
text: "Swap"
}
StatusSwitchTabButton {
text: "Swap & Send"
}
StatusSwitchTabButton {
text: "Send"
}
}
}
+10 -110
View File
@@ -15,7 +15,7 @@ import StatusQ.Platform 0.1
StatusWindow {
id: rootWindow
width: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.width
: 1224
: 1024
height: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.height
:840
visible: true
@@ -118,74 +118,48 @@ StatusWindow {
anchors.horizontalCenter: parent.horizontalCenter
spacing: 0
StatusListSectionHeadline { text: "StatusQ.Core" }
NavigationHeader { text: "StatusQ.Core" }
StatusNavigationListItem {
title: "Icons"
selected: page.sourceComponent == iconsComponent
onClicked: page.sourceComponent = iconsComponent
}
StatusListSectionHeadline { text: "StatusQ.Layout" }
NavigationHeader { text: "StatusQ.Layout" }
StatusNavigationListItem {
title: "Layouts"
selected: page.sourceComponent == layoutComponent
onClicked: page.sourceComponent = layoutComponent
}
StatusListSectionHeadline { text: "StatusQ.Controls" }
NavigationHeader { text: "StatusQ.Controls" }
StatusNavigationListItem {
title: "Buttons"
selected: page.sourceComponent == buttonsComponent
onClicked: page.sourceComponent = buttonsComponent
}
StatusNavigationListItem {
title: "StatusSwitchTab"
selected: page.sourceComponent == statusTabSwitchesComponent
onClicked: page.sourceComponent = statusTabSwitchesComponent
}
StatusNavigationListItem {
title: "Controls"
selected: page.sourceComponent == controlsComponent
onClicked: page.sourceComponent = controlsComponent
}
StatusNavigationListItem {
title: "StatusInput"
selected: page.sourceComponent == statusInputPageComponent
onClicked: page.sourceComponent = statusInputPageComponent
}
StatusListSectionHeadline { text: "StatusQ.Components" }
NavigationHeader { text: "StatusQ.Components" }
StatusNavigationListItem {
title: "List Items"
selected: page.sourceComponent == listItemsComponent
onClicked: page.sourceComponent = listItemsComponent
}
StatusNavigationListItem {
title: "StatusChatInfoToolBar"
selected: page.sourceComponent == chatInfoToolBarComponent
onClicked: page.sourceComponent = chatInfoToolBarComponent
}
StatusNavigationListItem {
title: "Others"
selected: page.sourceComponent == othersComponent
onClicked: page.sourceComponent = othersComponent
}
StatusNavigationListItem {
title: "StatusExpandableSettingsItem"
selected: page.sourceComponent == settingsComponent
onClicked: page.sourceComponent = settingsComponent
}
StatusListSectionHeadline { text: "StatusQ.Popup" }
NavigationHeader { text: "StatusQ.Popup" }
StatusNavigationListItem {
title: "StatusPopupMenu"
selected: page.sourceComponent == popupMenuComponent
onClicked: page.sourceComponent = popupMenuComponent
}
StatusNavigationListItem {
title: "StatusModal"
selected: page.sourceComponent == statusModalComponent
onClicked: page.sourceComponent = statusModalComponent
}
}
}
}
@@ -193,10 +167,12 @@ StatusWindow {
rightPanel: Item {
id: rightPanel
anchors.fill: parent
ScrollView {
anchors.fill: parent
width: parent.width
height: parent.height
contentHeight: (pageWrapper.height + pageWrapper.anchors.topMargin) * rootWindow.factor
contentWidth: (pageWrapper.width * rootWindow.factor)
contentWidth: pageWrapper.width * rootWindow.factor
clip: true
Item {
@@ -251,11 +227,6 @@ StatusWindow {
Controls {}
}
Component {
id: statusInputPageComponent
StatusInputPage {}
}
Component {
id: listItemsComponent
ListItems {}
@@ -281,62 +252,12 @@ StatusWindow {
StatusPopupMenuPage {}
}
Component {
id: chatInfoToolBarComponent
StatusChatInfoToolBarPage {}
}
Component {
id: statusModalComponent
Popups {}
}
Component {
id: statusTabSwitchesComponent
StatusTabSwitchPage {}
}
Component {
id: settingsComponent
StatusExpandableSettingsItemPage{}
}
Component {
id: demoAppCmp
Rectangle {
anchors.fill: parent
color: Theme.palette.baseColor3
Row {
id: platformSwitch
anchors.left: demoApp.left
anchors.bottom: demoApp.top
anchors.bottomMargin: 20
spacing: 2
Text {
text: "OSX"
font.pixelSize: 15
anchors.verticalCenter: parent.verticalCenter
}
StatusSwitch {
onCheckedChanged: {
if (checked) {
demoApp.titleStyle = "windows"
} else {
demoApp.titleStyle = "osx"
}
}
}
Text {
text: "Win"
font.pixelSize: 15
anchors.verticalCenter: parent.verticalCenter
}
}
DemoApp {
id: demoApp
anchors.verticalCenter: parent.verticalCenter
@@ -359,27 +280,6 @@ StatusWindow {
anchors.top: parent.top
anchors.margins: 13
visible: Qt.platform.os == "osx"
onClose: {
rootWindow.close()
}
onMinimised: {
rootWindow.showMinimized()
}
onMaximized: {
rootWindow.toggleFullScreen()
}
}
StatusWindowsTitleBar {
anchors.top: parent.top
width: parent.width
visible: Qt.platform.os == "windows"
onClose: {
rootWindow.close()
}
-9
View File
@@ -5,14 +5,5 @@
<file>Icons.qml</file>
<file>Others.qml</file>
<file>Buttons.qml</file>
<file>DemoApp.qml</file>
<file>ListItems.qml</file>
<file>StatusChatInfoToolBarPage.qml</file>
<file>StatusPopupMenuPage.qml</file>
<file>StatusInputPage.qml</file>
<file>ThemeSwitch.qml</file>
<file>Layout.qml</file>
<file>Popups.qml</file>
<file>StatusExpandableSettingsItemPage.qml</file>
</qresource>
</RCC>
+9 -2
View File
@@ -53,8 +53,15 @@ HEADERS += \
sandboxapp.h \
statuswindow.h
OTHER_FILES += $$files($$PWD/../*.qml, true)
OTHER_FILES += $$files($$PWD/*.qml, true)
DISTFILES += \
../src/StatusQ/Components/StatusMacWindowButtons.qml \
../src/StatusQ/Controls/StatusBaseButton.qml \
../src/StatusQ/Controls/StatusButton.qml \
../src/StatusQ/Controls/StatusCheckBox.qml \
../src/StatusQ/Controls/StatusFlatRoundButton.qml \
../src/StatusQ/Controls/StatusRadioButton.qml \
../src/StatusQ/Controls/StatusSlider.qml \
../src/StatusQ/Controls/StatusSwitch.qml
android {
-4
View File
@@ -1,4 +0,0 @@
make clean
qmake sandbox.pro -spec macx-clang CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
make
@@ -1,106 +0,0 @@
import QtQuick 2.13
import QtGraphicalEffects 1.13
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
import StatusQ.Popups 0.1
Item {
id: statusChatInfoToolBar
implicitWidth: 288
implicitHeight: 56
property alias chatInfoButton: statusChatInfoButton
property alias menuButton: statusMenuButton
property Component popupMenu
signal chatInfoButtonClicked()
signal addButtonClicked(var mouse)
onPopupMenuChanged: {
if (!!popupMenu) {
popupMenuSlot.sourceComponent = popupMenu
}
}
StatusChatInfoButton {
id: statusChatInfoButton
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 5
type: StatusChatInfoButton.Type.OneToOneChat
onClicked: statusChatInfoToolBar.chatInfoButtonClicked()
}
StatusRoundButton {
id: statusMenuButton
anchors.right: parent.right
anchors.rightMargin: 8
anchors.verticalCenter: parent.verticalCenter
visible: popupMenuSlot.active
width: 32
height: 32
type: StatusRoundButton.Type.Secondary
icon.name: "add"
state: "default"
states: [
State {
name: "default"
PropertyChanges {
target: statusMenuButton
icon.rotation: 0
}
},
State {
name: "pressed"
PropertyChanges {
target: statusMenuButton
icon.rotation: 45
highlighted: true
}
}
]
transitions: [
Transition {
from: "default"
to: "pressed"
RotationAnimation {
duration: 150
direction: RotationAnimation.Clockwise
easing.type: Easing.InCubic
}
},
Transition {
from: "pressed"
to: "default"
RotationAnimation {
duration: 150
direction: RotationAnimation.Counterclockwise
easing.type: Easing.OutCubic
}
}
]
onClicked: {
statusChatInfoToolBar.addButtonClicked(mouse)
statusMenuButton.state = "pressed"
popupMenuSlot.item.popup(statusMenuButton.width-popupMenuSlot.item.width, statusMenuButton.height + 4)
}
Loader {
id: popupMenuSlot
active: !!statusChatInfoToolBar.popupMenu
onLoaded: {
popupMenuSlot.item.closeHandler = function () {
statusMenuButton.state = "default"
}
}
}
}
}
+16 -203
View File
@@ -1,10 +1,7 @@
import QtQuick 2.13
import QtQml.Models 2.14
import QtQuick.Controls 2.13 as QC
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Core.Utils 0.1
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
@@ -12,214 +9,30 @@ Column {
id: statusChatList
spacing: 4
width: 288
property string categoryId: ""
property string selectedChatId: ""
property alias chatListItems: delegateModel
property bool draggableItems: false
property Component popupMenu
property var filterFn
property var profileImageFn
property var chatNameFn
property alias chatListItems: statusChatListItems
signal chatItemSelected(string id)
signal chatItemUnmuted(string id)
signal chatItemReordered(string id, int from, int to)
onPopupMenuChanged: {
if (!!popupMenu) {
popupMenuSlot.sourceComponent = popupMenu
}
}
DelegateModel {
id: delegateModel
delegate: Item {
id: draggable
width: statusChatListItem.width
height: statusChatListItem.height
property alias chatListItem: statusChatListItem
visible: {
if (!!statusChatList.filterFn) {
return statusChatList.filterFn(model, statusChatList.categoryId)
}
return true
}
MouseArea {
id: dragSensor
anchors.fill: parent
cursorShape: active ? Qt.ClosedHandCursor : Qt.PointingHandCursor
hoverEnabled: true
pressAndHoldInterval: 150
enabled: statusChatList.draggableItems
property bool active: false
property real startY: 0
property real startX: 0
drag.target: draggedListItemLoader.item
drag.threshold: 0.1
drag.filterChildren: true
onPressed: {
startY = mouseY
startX = mouseX
}
onPressAndHold: active = true
onReleased: {
if (active) {
statusChatList.chatItemReordered(statusChatListItem.chatId, statusChatListItem.originalOrder, statusChatListItem.originalOrder)
}
active = false
}
onMouseYChanged: {
if ((Math.abs(startY - mouseY) > 1) && pressed) {
active = true
}
}
onMouseXChanged: {
if ((Math.abs(startX - mouseX) > 1) && pressed) {
active = true
}
}
StatusChatListItem {
id: statusChatListItem
property string profileImage: ""
opacity: dragSensor.active ? 0.0 : 1.0
Component.onCompleted: {
if (typeof statusChatList.profileImageFn === "function") {
profileImage = statusChatList.profileImageFn(model.chatId || model.id) || ""
}
}
originalOrder: model.position
chatId: model.chatId || model.id
categoryId: model.categoryId || ""
name: !!statusChatList.chatNameFn ? statusChatList.chatNameFn(model) : model.name
type: model.chatType
muted: !!model.muted
hasUnreadMessages: !!model.hasUnreadMessages || model.unviewedMessagesCount > 0
hasMention: model.mentionsCount > 0
badge.value: model.chatType === StatusChatListItem.Type.OneToOneChat ?
model.unviewedMessagesCount || 0 :
model.mentionsCount || 0
selected: (model.chatId || model.id) === statusChatList.selectedChatId
icon.color: model.color || ""
image.isIdenticon: !!!profileImage && !!!model.identityImage && !!model.identicon
image.source: profileImage || model.identityImage || model.identicon || ""
sensor.cursorShape: dragSensor.cursorShape
onClicked: {
if (mouse.button === Qt.RightButton && !!statusChatList.popupMenu) {
statusChatListItem.highlighted = true
let originalOpenHandler = popupMenuSlot.item.openHandler
let originalCloseHandler = popupMenuSlot.item.closeHandler
popupMenuSlot.item.openHandler = function () {
if (!!originalOpenHandler) {
originalOpenHandler((model.chatId || model.id))
}
}
popupMenuSlot.item.closeHandler = function () {
if (statusChatListItem) {
statusChatListItem.highlighted = false
}
if (!!originalCloseHandler) {
originalCloseHandler()
}
}
popupMenuSlot.item.popup(mouse.x + 4, statusChatListItem.y + mouse.y + 6)
popupMenuSlot.item.openHandler = originalOpenHandler
return
}
if (!statusChatListItem.selected) {
statusChatList.chatItemSelected(model.chatId || model.id)
}
}
onUnmute: statusChatList.chatItemUnmuted(model.chatId || model.id)
}
}
DropArea {
id: dropArea
width: dragSensor.active ? 0 : parent.width
height: dragSensor.active ? 0 : parent.height
keys: ["chat-item-category-" + statusChatListItem.categoryId]
onEntered: reorderDelay.start()
onDropped: statusChatList.chatItemReordered(statusChatListItem.chatId, drag.source.originalOrder, statusChatListItem.DelegateModel.itemsIndex)
Timer {
id: reorderDelay
interval: 100
repeat: false
onTriggered: {
if (dropArea.containsDrag) {
dropArea.drag.source.chatListItem.originalOrder = statusChatListItem.originalOrder
delegateModel.items.move(dropArea.drag.source.DelegateModel.itemsIndex, draggable.DelegateModel.itemsIndex)
}
}
}
}
Loader {
id: draggedListItemLoader
active: dragSensor.active
sourceComponent: StatusChatListItem {
property var globalPosition: Utils.getAbsolutePosition(draggable)
parent: QC.Overlay.overlay
sensor.cursorShape: dragSensor.cursorShape
Drag.active: dragSensor.active
Drag.hotSpot.x: width / 2
Drag.hotSpot.y: height / 2
Drag.keys: ["chat-item-category-" + categoryId]
Drag.source: draggable
Component.onCompleted: {
x = globalPosition.x
y = globalPosition.y
}
chatId: draggable.chatListItem.chatId
categoryId: draggable.chatListItem.categoryId
name: draggable.chatListItem.name
type: draggable.chatListItem.type
muted: draggable.chatListItem.muted
dragged: true
hasUnreadMessages: draggable.chatListItem.hasUnreadMessages
hasMention: draggable.chatListItem.hasMention
badge.value: draggable.chatListItem.badge.value
selected: draggable.chatListItem.selected
icon.color: draggable.chatListItem.icon.color
image.isIdenticon: draggable.chatListItem.image.isIdenticon
image.source: draggable.chatListItem.image.source
}
}
}
}
Repeater {
id: statusChatListItems
model: delegateModel
}
delegate: StatusChatListItem {
chatId: model.chatId
name: model.name
type: model.chatType
muted: !!model.muted
hasUnreadMessages: !!model.hasUnreadMessages
hasMention: !!model.hasMention
badge.value: model.unreadMessagesCount || 0
selected: model.chatId === statusChatList.selectedChatId
Loader {
id: popupMenuSlot
active: !!statusChatList.popupMenu
icon.color: model.iconColor || ""
image.source: model.identicon || ""
onClicked: statusChatList.chatItemSelected(model.chatId)
onUnmute: statusChatList.chatItemUnmuted(model.chatId)
}
}
}
@@ -1,216 +0,0 @@
import QtQuick 2.14
import QtQml.Models 2.14
import QtQuick.Controls 2.14 as QC
import StatusQ.Core.Utils 0.1
import StatusQ.Components 0.1
import StatusQ.Popups 0.1
import StatusQ.Core 0.1
Item {
id: statusChatListAndCategories
implicitHeight: chatListsAndCategories.height
implicitWidth: chatListsAndCategories.width
property StatusTooltipSettings categoryAddButtonToolTip: StatusTooltipSettings {
text: "Add channel inside category"
}
property StatusTooltipSettings categoryMenuButtonToolTip: StatusTooltipSettings {
text: "More"
}
property string selectedChatId: ""
property bool showCategoryActionButtons: false
property bool showPopupMenu: true
property alias chatList: statusChatList.chatListItems
property alias categoryList: delegateModel
property alias sensor: sensor
property bool draggableItems: false
property bool draggableCategories: false
property Component categoryPopupMenu
property Component chatListPopupMenu
property Component popupMenu
signal chatItemSelected(string id)
signal chatItemUnmuted(string id)
signal chatItemReordered(string categoryId, string chatId, int from, int to)
signal chatListCategoryReordered(string categoryId, int from, int to)
signal categoryAddButtonClicked(string id)
onPopupMenuChanged: {
if (!!popupMenu) {
popupMenuSlot.sourceComponent = popupMenu
}
}
MouseArea {
id: sensor
anchors.top: parent.top
width: statusChatListAndCategories.width
height: statusChatListAndCategories.height
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: {
if (mouse.button === Qt.RightButton && showPopupMenu && !!statusChatListAndCategories.popupMenu) {
popupMenuSlot.item.popup(mouse.x + 4, mouse.y + 6)
return
}
}
Column {
id: chatListsAndCategories
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
spacing: 4
StatusChatList {
id: statusChatList
anchors.horizontalCenter: parent.horizontalCenter
visible: chatListItems.count > 0
selectedChatId: statusChatListAndCategories.selectedChatId
onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
onChatItemReordered: statusChatListAndCategories.chatItemReordered(categoryId, id, from, to)
draggableItems: statusChatListAndCategories.draggableItems
filterFn: function (model) {
return !!!model.categoryId
}
popupMenu: statusChatListAndCategories.chatListPopupMenu
}
DelegateModel {
id: delegateModel
delegate: Item {
id: draggable
width: statusChatListCategory.width
height: statusChatListCategory.height
property alias chatListCategory: statusChatListCategory
StatusChatListCategory {
id: statusChatListCategory
property bool dragActive: false
property real startY: 0
property real startX: 0
opacity: dragActive ? 0.0 : 1.0
dragSensor.drag.target: draggedListCategoryLoader.item
dragSensor.drag.threshold: 0.1
dragSensor.drag.filterChildren: true
dragSensor.onPressAndHold: {
if (statusChatListAndCategories.draggableCategories) {
dragActive = true
}
}
dragSensor.onReleased: {
if (dragActive) {
statusChatListAndCategories.chatListCategoryReordered(statusChatListCategory.categoryId, statusChatListCategory.originalOrder, statusChatListCategory.originalOrder)
}
dragActive = false
}
dragSensor.cursorShape: dragActive ? Qt.ClosedHandCursor : Qt.PointingHandCursor
dragSensor.onPressed: {
startY = dragSensor.mouseY
startX = dragSensor.mouseX
}
dragSensor.onMouseYChanged: {
if (statusChatListAndCategories.draggableCategories && (Math.abs(startY - dragSensor.mouseY) > 1) && dragSensor.pressed) {
dragActive = true
}
}
dragSensor.onMouseXChanged: {
if (statusChatListAndCategories.draggableCategories && (Math.abs(startX - dragSensor.mouseX) > 1) && dragSensor.pressed) {
dragActive = true
}
}
addButton.tooltip: statusChatListAndCategories.addButtonToolTip
menuButton.tooltip: statusChatListAndCategories.menuButtonToolTip
originalOrder: model.position
categoryId: model.categoryId
name: model.name
showActionButtons: statusChatListAndCategories.showCategoryActionButtons
addButton.onClicked: statusChatListAndCategories.categoryAddButtonClicked(model.categoryId)
chatList.chatListItems.model: statusChatListAndCategories.chatList.model
chatList.selectedChatId: statusChatListAndCategories.selectedChatId
chatList.onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
chatList.onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
chatList.onChatItemReordered: statusChatListAndCategories.chatItemReordered(model.categoryId, id, from, to)
chatList.draggableItems: statusChatListAndCategories.draggableItems
popupMenu: statusChatListAndCategories.categoryPopupMenu
chatListPopupMenu: statusChatListAndCategories.chatListPopupMenu
}
DropArea {
id: dropArea
width: draggable.chatListCategory.dragActive ? 0 : parent.width
height: draggable.chatListCategory.dragActive ? 0 : parent.height
keys: ["chat-category"]
onEntered: reorderDelay.start()
onDropped: statusChatListAndCategories.chatListCategoryReordered(statusChatListCategory.categoryId, drag.source.originalOrder, statusChatListCategory.DelegateModel.itemsIndex)
Timer {
id: reorderDelay
interval: 100
repeat: false
onTriggered: {
if (dropArea.containsDrag) {
dropArea.drag.source.chatListCategory.originalOrder = statusChatListCategory.originalOrder
delegateModel.items.move(dropArea.drag.source.DelegateModel.itemsIndex, draggable.DelegateModel.itemsIndex)
}
}
}
}
Loader {
id: draggedListCategoryLoader
active: draggable.chatListCategory.dragActive
sourceComponent: StatusChatListCategory {
property var globalPosition: Utils.getAbsolutePosition(draggable)
parent: QC.Overlay.overlay
dragSensor.cursorShape: draggable.chatListCategory.dragSensor.cursorShape
Drag.active: draggable.chatListCategory.dragActive
Drag.hotSpot.x: width / 2
Drag.hotSpot.y: height / 2
Drag.keys: ["chat-category"]
Drag.source: draggable
Component.onCompleted: {
x = globalPosition.x
y = globalPosition.y
}
dragged: true
categoryId: draggable.chatListCategory.categoryId
name: draggable.chatListCategory.name
showActionButtons: draggable.chatListCategory.showActionButtons
chatList.chatListItems.model: draggable.chatListCategory.chatList.chatListItems.model
chatList.selectedChatId: draggable.chatListCategory.chatList.selectedChatId
}
}
}
}
Repeater {
id: statusChatListCategories
visible: !!model && model.count > 0
model: delegateModel
}
}
}
Loader {
id: popupMenuSlot
active: !!statusChatListAndCategories.popupMenu
}
}
@@ -7,23 +7,16 @@ Column {
id: statusChatListCategory
spacing: 0
opacity: dragged ? 0.5 : 1
objectName: "chatListCategory"
property int originalOrder: -1
property string categoryId: ""
property string name: ""
property bool opened: true
property bool dragged: false
property alias showActionButtons: statusChatListCategoryItem.showActionButtons
property alias addButton: statusChatListCategoryItem.addButton
property alias menuButton: statusChatListCategoryItem.menuButton
property alias toggleButton: statusChatListCategoryItem.toggleButton
property alias chatList: statusChatList
property alias dragSensor: statusChatListCategoryItem.sensor
property Component chatListPopupMenu
property Component popupMenu
onPopupMenuChanged: {
@@ -36,21 +29,15 @@ Column {
id: statusChatListCategoryItem
title: statusChatListCategory.name
opened: statusChatListCategory.opened
sensor.pressAndHoldInterval: 150
showMenuButton: showActionButtons && !!statusChatListCategory.popupMenu
highlighted: statusChatListCategory.dragged
sensor.onClicked: {
if (mouse.button === Qt.RightButton && showActionButtons && !!statusChatListCategory.popupMenu) {
onClicked: {
if (mouse.button === Qt.RightButton) {
highlighted = true
popupMenuSlot.item.popup(mouse.x + 4, mouse.y + 6)
return
}
statusChatListCategory.opened = !opened
}
onTitleClicked: statusChatListCategory.opened = !opened
onToggleButtonClicked: statusChatListCategory.opened = !opened
onMenuButtonClicked: {
highlighted = true
@@ -63,35 +50,18 @@ Column {
StatusChatList {
id: statusChatList
anchors.horizontalCenter: parent.horizontalCenter
visible: statusChatListCategory.opened
categoryId: statusChatListCategory.categoryId
filterFn: function (model) {
return !!model.categoryId && model.categoryId == statusChatList.categoryId
}
popupMenu: statusChatListCategory.chatListPopupMenu
}
Loader {
id: popupMenuSlot
active: !!statusChatListCategory.popupMenu
onLoaded: {
let originalOpenHandler = popupMenuSlot.item.openHandler
let originalCloseHandler = popupMenuSlot.item.closeHandler
popupMenuSlot.item.openHandler = function () {
if (!!originalOpenHandler) {
originalOpenHandler(statusChatListCategory.categoryId)
}
}
popupMenuSlot.item.closeHandler = function () {
statusChatListCategoryItem.highlighted = false
statusChatListCategoryItem.menuButton.highlighted = false
if (!!originalCloseHandler) {
originalCloseHandler()
}
}
}
}
@@ -16,19 +16,19 @@ StatusListItem {
property bool opened: true
property bool highlighted: false
property bool showActionButtons: false
property bool showMenuButton: showActionButtons
property bool showAddButton: showActionButtons
property alias addButton: addButton
property alias menuButton: menuButton
property alias toggleButton: toggleButton
signal clicked(var mouse)
signal addButtonClicked(var mouse)
signal menuButtonClicked(var mouse)
signal toggleButtonClicked(var mouse)
color: sensor.containsMouse || highlighted ? Theme.palette.baseColor2 : "transparent"
sensor.onClicked: statusChatListCategoryItem.clicked(mouse)
statusListItemTitle.color: Theme.palette.directColor4
statusListItemTitle.font.weight: Font.Medium
@@ -39,9 +39,7 @@ StatusListItem {
id: addButton
icon.name: "add"
icon.width: 20
visible: statusChatListCategoryItem.showAddButton &&
(statusChatListCategoryItem.highlighted ||
statusChatListCategoryItem.sensor.containsMouse)
visible: statusChatListCategoryItem.sensor.containsMouse || statusChatListCategoryItem.highlighted
onClicked: statusChatListCategoryItem.addButtonClicked(mouse)
tooltip.text: "Add channel inside category"
},
@@ -49,9 +47,7 @@ StatusListItem {
id: menuButton
icon.name: "more"
icon.width: 21
visible: statusChatListCategoryItem.showMenuButton &&
(statusChatListCategoryItem.highlighted ||
statusChatListCategoryItem.sensor.containsMouse)
visible: statusChatListCategoryItem.sensor.containsMouse || statusChatListCategoryItem.highlighted
onClicked: statusChatListCategoryItem.menuButtonClicked(mouse)
tooltip.text: "More"
},
+49 -81
View File
@@ -1,8 +1,4 @@
import QtQuick 2.13
import QtQml.Models 2.13
import QtQuick.Controls 2.13 as QC
import QtGraphicalEffects 1.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
@@ -11,10 +7,7 @@ import StatusQ.Controls 0.1
Rectangle {
id: statusChatListItem
objectName: "chatItem"
property int originalOrder: -1
property string chatId: ""
property string categoryId: ""
property string name: ""
property alias badge: statusBadge
property bool hasUnreadMessages: false
@@ -25,25 +18,19 @@ Rectangle {
color: Theme.palette.miscColor5
}
property int type: StatusChatListItem.Type.PublicChat
property bool highlighted: false
property bool selected: false
property bool dragged: false
property alias sensor: sensor
signal clicked(var mouse)
signal unmute()
enum Type {
Unknown0, // 0
OneToOneChat, // 1
PublicChat, // 2
GroupChat, // 3
Unknown1, // 4
Unknown2, // 5
CommunityChat // 6
PublicChat,
GroupChat,
CommunityChat,
OneToOneChat
}
implicitWidth: 288
implicitWidth: 287
implicitHeight: 40
radius: 8
@@ -52,17 +39,14 @@ Rectangle {
if (selected) {
return Theme.palette.statusChatListItem.selectedBackgroundColor
}
return sensor.containsMouse || highlighted ? Theme.palette.statusChatListItem.hoverBackgroundColor : Theme.palette.baseColor4
return sensor.containsMouse ? Theme.palette.statusChatListItem.hoverBackgroundColor : Theme.palette.baseColor4
}
opacity: dragged ? 0.7 : 1
MouseArea {
id: sensor
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
acceptedButtons: Qt.LeftButton | Qt.RightButton
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onClicked: statusChatListItem.clicked(mouse)
@@ -74,7 +58,7 @@ Rectangle {
anchors.verticalCenter: parent.verticalCenter
sourceComponent: !!statusChatListItem.image.source.toString() ?
statusRoundedImageCmp : statusLetterIdenticonCmp
statusRoundedImageCmp : statusLetterIdenticonCmp
}
Component {
@@ -99,11 +83,6 @@ Rectangle {
height: parent.height
image.source: statusChatListItem.image.source
showLoadingIndicator: true
color: statusChatListItem.image.isIdenticon ?
Theme.palette.statusRoundedImage.backgroundColor :
"transparent"
border.width: statusChatListItem.image.isIdenticon ? 1 : 0
border.color: Theme.palette.directColor7
}
Loader {
@@ -122,30 +101,29 @@ Rectangle {
width: 14
visible: statusChatListItem.type !== StatusChatListItem.Type.OneToOneChat
opacity: {
if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
if (statusChatListItem.muted && !sensor.containsMouse) {
return 0.4
}
return statusChatListItem.hasMention ||
statusChatListItem.hasUnreadMessages ||
statusChatListItem.selected ||
statusChatListItem.highlighted ||
statusBadge.visible ||
sensor.containsMouse ? 1.0 : 0.7
return statusChatListItem.hasMention ||
statusChatListItem.hasUnreadMessages ||
statusChatListItem.selected ||
statusBadge.visible ||
sensor.containsMouse ? 1.0 : 0.7
}
icon: {
switch (statusChatListItem.type) {
case StatusChatListItem.Type.PublicCat:
return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
break;
case StatusChatListItem.Type.GroupChat:
return Theme.palette.name == "light" ? "tiny/group" : "tiny/group-white"
break;
case StatusChatListItem.Type.CommunityChat:
return Theme.palette.name == "light" ? "tiny/channel" : "tiny/channel-white"
break;
default:
return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
case StatusChatListItem.Type.PublicCat:
return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
break;
case StatusChatListItem.Type.GroupChat:
return Theme.palette.name == "light" ? "tiny/group" : "tiny/group-white"
break;
case StatusChatListItem.Type.CommunityChat:
return Theme.palette.name == "light" ? "tiny/channel" : "tiny/channel-white"
break;
default:
return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
}
}
}
@@ -154,37 +132,40 @@ Rectangle {
id: chatName
anchors.left: statusIcon.visible ? statusIcon.right : identicon.right
anchors.leftMargin: statusIcon.visible ? 1 : 8
anchors.right: mutedIcon.visible ? mutedIcon.left :
statusBadge.visible ? statusBadge.left : parent.right
anchors.rightMargin: 6
anchors.verticalCenter: parent.verticalCenter
text: (statusChatListItem.type === StatusChatListItem.Type.PublicChat &&
!statusChatListItem.name.startsWith("#") ?
"#" + statusChatListItem.name :
statusChatListItem.name)
elide: Text.ElideRight
text: statusChatListItem.name
color: {
if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
if (statusChatListItem.muted && !sensor.containsMouse) {
return Theme.palette.directColor5
}
return statusChatListItem.hasMention ||
statusChatListItem.hasUnreadMessages ||
statusChatListItem.selected ||
statusChatListItem.highlighted ||
sensor.containsMouse ||
statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
return statusChatListItem.hasMention ||
statusChatListItem.hasUnreadMessages ||
statusChatListItem.selected ||
sensor.containsMouse ||
statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
}
font.weight: !statusChatListItem.muted &&
(statusChatListItem.hasMention ||
statusChatListItem.hasUnreadMessages ||
statusBadge.visible) ? Font.Bold : Font.Medium
font.weight: statusChatListItem.hasMention ||
statusChatListItem.hasUnreadMessages ||
statusBadge.visible ? Font.Bold : Font.Medium
font.pixelSize: 15
}
StatusBadge {
id: statusBadge
anchors.right: mutedIcon.visible ? mutedIcon.left : parent.right
anchors.rightMargin: 8
anchors.verticalCenter: parent.verticalCenter
border.width: 4
border.color: color
visible: statusBadge.value > 0
}
StatusIcon {
id: mutedIcon
anchors.right: statusBadge.visible ? statusBadge.left : parent.right
anchors.right: parent.right
anchors.rightMargin: 8
anchors.verticalCenter: parent.verticalCenter
width: 14
@@ -195,7 +176,7 @@ Rectangle {
MouseArea {
id: mutedIconSensor
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onClicked: statusChatListItem.unmute()
}
@@ -205,18 +186,5 @@ Rectangle {
visible: mutedIconSensor.containsMouse
}
}
StatusBadge {
id: statusBadge
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 8
color: statusChatListItem.muted ? Theme.palette.primaryColor2 : Theme.palette.primaryColor1
border.width: 4
border.color: color
visible: statusBadge.value > 0
}
}
}
+15 -76
View File
@@ -14,8 +14,6 @@ Rectangle {
property alias chatInfoButton: statusChatInfoButton
property alias menuButton: menuButton
property alias notificationButton: notificationButton
property alias membersButton: membersButton
property alias searchButton: searchButton
property int notificationCount: 0
property Component popupMenu
@@ -23,8 +21,6 @@ Rectangle {
signal chatInfoButtonClicked()
signal menuButtonClicked()
signal notificationButtonClicked()
signal membersButtonClicked()
signal searchButtonClicked()
onPopupMenuChanged: {
if (!!popupMenu) {
@@ -37,7 +33,6 @@ Rectangle {
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 12
width: Math.min(implicitWidth, parent.width - actionButtons.implicitWidth - anchors.leftMargin * 2)
onClicked: statusChatToolBar.chatInfoButtonClicked()
}
@@ -49,34 +44,6 @@ Rectangle {
spacing: 8
StatusFlatRoundButton {
id: searchButton
width: 32
height: 32
icon.name: "search"
type: StatusFlatRoundButton.Type.Secondary
onClicked: statusChatToolBar.searchButtonClicked()
// initializing the tooltip
tooltip.text: "Search"
tooltip.orientation: StatusToolTip.Orientation.Bottom
tooltip.y: parent.height + 12
}
StatusFlatRoundButton {
id: membersButton
width: 32
height: 32
icon.name: "group-chat"
type: StatusFlatRoundButton.Type.Secondary
onClicked: statusChatToolBar.membersButtonClicked()
// initializing the tooltip
tooltip.text: "Members"
tooltip.orientation: StatusToolTip.Orientation.Bottom
tooltip.y: parent.height + 12
}
StatusFlatRoundButton {
id: menuButton
width: 32
@@ -85,44 +52,12 @@ Rectangle {
type: StatusFlatRoundButton.Type.Secondary
visible: !!statusChatToolBar.popupMenu
// initializing the tooltip
tooltip.visible: !!tooltip.text && menuButton.hovered && !popupMenuSlot.item.opened
tooltip.text: "More"
tooltip.orientation: StatusToolTip.Orientation.Bottom
tooltip.y: parent.height + 12
property bool showMoreMenu: false
onClicked: {
if (!showMoreMenu) {
popupMenuSlot.item.popup(-popupMenuSlot.item.width + menuButton.width, menuButton.height + 4)
statusChatToolBar.menuButtonClicked()
}
statusChatToolBar.menuButtonClicked()
highlighted = true
let p = menuButton.mapToItem(statusChatToolBar, menuButton.x, menuButton.y)
popupMenuSlot.item.popup(p.x + menuButton.width - popupMenuSlot.item.width, p.y + 4 + menuButton.height)
}
Timer {
id: menuClosedUpdater
interval: 100
repeat: false
onTriggered: {
menuButton.showMoreMenu = false
}
}
Loader {
id: popupMenuSlot
active: !!statusChatToolBar.popupMenu
onLoaded: {
popupMenuSlot.item.closeHandler = function () {
menuButton.highlighted = false
menuClosedUpdater.start()
}
popupMenuSlot.item.openHandler = function () {
menuButton.highlighted = true
menuButton.showMoreMenu = true
}
}
}
}
Rectangle {
@@ -130,8 +65,7 @@ Rectangle {
width: 1
color: Theme.palette.directColor7
anchors.verticalCenter: parent.verticalCenter
visible: notificationButton.visible &&
(menuButton.visible || membersButton.visible || searchButton.visible)
visible: menuButton.visible && notificationButton.visible
}
StatusFlatRoundButton {
@@ -143,11 +77,6 @@ Rectangle {
icon.height: 21
type: StatusFlatRoundButton.Type.Secondary
// initializing the tooltip
tooltip.text: "Activity"
tooltip.orientation: StatusToolTip.Orientation.Bottom
tooltip.y: parent.height + 12
onClicked: statusChatToolBar.notificationButtonClicked()
StatusBadge {
@@ -174,5 +103,15 @@ Rectangle {
}
}
Loader {
id: popupMenuSlot
active: !!statusChatToolBar.popupMenu
onLoaded: {
popupMenuSlot.item.closeHandler = function () {
menuButton.highlighted = false
}
}
}
}
@@ -1,30 +0,0 @@
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
StatusListItem {
id: statusContactRequestsListItem
implicitHeight: 64
implicitWidth: 288
color: sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
property int requestsCount: 0
components: [
StatusBadge {
value: statusContactRequestsListItem.requestsCount
anchors.verticalCenter: parent.verticalCenter
border.width: 4
border.color: color
},
StatusIcon {
icon: "chevron-down"
rotation: 270
color: Theme.palette.baseColor1
}
]
}
@@ -8,15 +8,12 @@ Rectangle {
property string title: ""
property string subTitle: ""
property alias subTitleComponent: statusDescriptionListItemSubTitle
property string value: ""
property StatusIconSettings icon: StatusIconSettings {
width: 23
height: 23
}
property alias tooltip: statusToolTip
property alias iconButton: statusFlatRoundButton
property alias sensor: sensor
implicitWidth: 448
implicitHeight: 56
@@ -24,77 +21,48 @@ Rectangle {
color: Theme.palette.statusListItem.backgroundColor
MouseArea {
id: sensor
anchors.fill: parent
hoverEnabled: true
enabled: false
cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
StatusBaseText {
id: statusDescriptionListItemTitle
anchors.top: parent.top
anchors.left: parent.left
anchors.leftMargin: 16
anchors.topMargin: 5
StatusBaseText {
id: statusDescriptionListItemTitle
anchors.top: parent.top
anchors.left: parent.left
anchors.leftMargin: 16
anchors.topMargin: 5
color: Theme.palette.baseColor1
text: statusDescriptionListItem.title
font.pixelSize: 13
font.weight: Font.Medium
}
color: Theme.palette.baseColor1
text: statusDescriptionListItem.title
font.pixelSize: 13
font.weight: Font.Medium
}
StatusBaseText {
id: statusDescriptionListItemSubTitle
anchors.top: statusDescriptionListItemTitle.bottom
anchors.left: parent.left
anchors.leftMargin: 16
anchors.topMargin: 4
StatusBaseText {
id: statusDescriptionListItemSubTitle
anchors.top: statusDescriptionListItemTitle.bottom
anchors.left: parent.left
anchors.leftMargin: 16
anchors.topMargin: 4
text: statusDescriptionListItem.subTitle
color: Theme.palette.directColor1
font.pixelSize: 15
font.weight: Font.Normal
}
text: statusDescriptionListItem.subTitle
color: Theme.palette.directColor1
font.pixelSize: 15
font.weight: Font.Normal
}
StatusFlatRoundButton {
id: statusFlatRoundButton
visible: !!statusDescriptionListItem.icon.name
anchors.verticalCenter: statusDescriptionListItemSubTitle.verticalCenter
anchors.left: statusDescriptionListItemSubTitle.right
anchors.leftMargin: 4
StatusFlatRoundButton {
id: statusFlatRoundButton
visible: !!statusDescriptionListItem.icon.name
anchors.verticalCenter: statusDescriptionListItemSubTitle.verticalCenter
anchors.left: statusDescriptionListItemSubTitle.right
anchors.leftMargin: 4
width: 32
height: 32
width: 32
height: 32
icon.name: statusDescriptionListItem.icon.name
icon.width: statusDescriptionListItem.icon.width
icon.height: statusDescriptionListItem.icon.height
icon.name: statusDescriptionListItem.icon.name
icon.width: statusDescriptionListItem.icon.width
icon.height: statusDescriptionListItem.icon.height
StatusToolTip {
id: statusToolTip
}
}
Row {
anchors.right: parent.right
anchors.rightMargin: 16
anchors.verticalCenter: parent.verticalCenter
visible: !!statusDescriptionListItem.value
spacing: 8
StatusBaseText {
text: statusDescriptionListItem.value
color: Theme.palette.baseColor1
font.pixelSize: 15
anchors.verticalCenter: parent.verticalCenter
}
StatusIcon {
icon: "chevron-down"
rotation: 270
color: Theme.palette.baseColor1
}
StatusToolTip {
id: statusToolTip
}
}
}
@@ -1,155 +0,0 @@
import QtQuick 2.14
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
Rectangle {
id: statusExpandableSettingsItem
property alias primaryText: primaryText.text
property alias secondaryText: secondaryText.text
property alias button: button
property alias expandableComponent: expandableRegion.sourceComponent
property bool expandable: true
property bool expanded: false
property StatusIconSettings icon: StatusIconSettings {
color: Theme.palette.directColor1
background: StatusIconBackgroundSettings {
width: 32
height: 32
color: Theme.palette.primaryColor2
}
}
implicitWidth: 718
radius: 8
color: "transparent"
border.color: Theme.palette.baseColor2
state: "COLLAPSED"
clip: true
StatusRoundIcon {
id: roundIcon
anchors.top: parent.top
anchors.topMargin: 25
anchors.left: parent.left
anchors.leftMargin: 11
icon.background.width: statusExpandableSettingsItem.icon.background.width
icon.background.height: statusExpandableSettingsItem.icon.background.height
icon.background.color: statusExpandableSettingsItem.icon.background.color
icon.color: statusExpandableSettingsItem.icon.color
icon.name: statusExpandableSettingsItem.icon.name
}
StatusBaseText {
id: primaryText
anchors.top: parent.top
anchors.topMargin: 17
anchors.left: roundIcon.right
anchors.leftMargin: 10
width: button.visible ? parent.width - icon.background.width - button.width - 70 :
parent.width - icon.background.width - 70
font.weight: Font.Medium
font.pixelSize: 15
lineHeight: 22
lineHeightMode: Text.FixedHeight
elide: Text.ElideRight
color: Theme.palette.directColor1
}
StatusBaseText {
id: secondaryText
anchors.top: primaryText.bottom
anchors.topMargin: 4
anchors.left: primaryText.left
anchors.right: primaryText.right
font.pixelSize: 15
lineHeight: 22
lineHeightMode: Text.FixedHeight
elide: Text.ElideRight
color: Theme.palette.directColor3
}
StatusButton {
id: button
anchors.top: parent.top
anchors.topMargin: 19
anchors.right: parent.right
anchors.rightMargin: 16
visible: !!text
}
StatusIcon {
id: expandImage
anchors.top: parent.top
anchors.topMargin: 36
anchors.right: parent.right
anchors.rightMargin: 23
visible: expandable && !button.visible
color: Theme.palette.directColor1
}
Loader {
id: expandableRegion
anchors.top: secondaryText.bottom
anchors.topMargin: 16
anchors.left: parent.left
anchors.leftMargin: 48
width: parent.width - 64
}
MouseArea {
anchors.fill: parent
onClicked: {
if(expandable) {
expanded = !expanded
}
}
cursorShape: Qt.PointingHandCursor
visible: !button.visible && expandable
}
onExpandedChanged: {
if(expanded) {
state = "EXPANDED"
}
else {
state = "COLLAPSED"
}
}
states: [
State {
name: "EXPANDED"
PropertyChanges {target: expandImage; icon: "chevron-up"}
PropertyChanges {target: statusExpandableSettingsItem; height: 82 + expandableRegion.height + 22}
PropertyChanges {target: expandableRegion; active: true}
},
State {
name: "COLLAPSED"
PropertyChanges {target: expandImage; icon: "chevron-down"}
PropertyChanges {target: statusExpandableSettingsItem; height: 82}
PropertyChanges {target: expandableRegion; active: false}
}
]
transitions: [
Transition {
from: "COLLAPSED"
to: "EXPANDED"
NumberAnimation { properties: "height"; duration: 200 }
},
Transition {
from: "EXPANDED"
to: "COLLAPSED"
NumberAnimation { properties: "height"; duration: 200 }
}
]
}
@@ -5,7 +5,6 @@ import StatusQ.Core.Theme 0.1
Rectangle {
id: statusLetterIdenticon
property alias identiconText: identiconText
property string name
property int letterSize: 21
@@ -15,10 +14,7 @@ Rectangle {
radius: width / 2
StatusBaseText {
id: identiconText
text: ((statusLetterIdenticon.name.charAt(0) === "#")
|| (statusLetterIdenticon.name.charAt(0) === "@") ?
statusLetterIdenticon.name.charAt(1) : statusLetterIdenticon.name.charAt(0)).toUpperCase()
text: (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)
+12 -161
View File
@@ -1,6 +1,4 @@
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
@@ -10,85 +8,33 @@ Rectangle {
id: statusListItem
implicitWidth: 448
implicitHeight: Math.max(64, statusListItemTitleArea.height + 16)
enum Type {
Primary,
Secondary,
Danger
}
color: {
if (sensor.containsMouse) {
switch(type) {
case StatusListItem.Type.Primary:
return Theme.palette.baseColor2
case StatusListItem.Type.Secondary:
return Theme.palette.statusListItem.secondaryHoverBackgroundColor
case StatusListItem.Type.Danger:
return Theme.palette.dangerColor3
}
}
return Theme.palette.statusListItem.backgroundColor
}
implicitHeight: 64
color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.statusListItem.backgroundColor
radius: 8
property string itemId: ""
property string titleId: ""
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
property StatusIconSettings icon: StatusIconSettings {
height: 20
width: 20
rotation: 0
isLetterIdenticon: false
color: type === StatusListItem.Type.Danger ?
Theme.palette.dangerColor1 : Theme.palette.primaryColor1
background: StatusIconBackgroundSettings {
width: 40
height: 40
color: {
if (sensor.containsMouse) {
return type === StatusListItem.Type.Secondary ||
type === StatusListItem.Type.Danger ? "transparent" :
Theme.palette.primaryColor3
}
return type === StatusListItem.Type.Danger ?
Theme.palette.dangerColor3 : Theme.palette.primaryColor3
}
color: Theme.palette.primaryColor3
}
}
property StatusImageSettings image: StatusImageSettings {
width: 40
height: 40
isIdenticon: false
}
property StatusImageSettings image: StatusImageSettings {}
property string label: ""
property int type: StatusListItem.Type.Primary
property alias sensor: sensor
property alias statusListItemIcon: iconOrImage
property alias statusListItemTitle: statusListItemTitle
property alias statusListItemSubTitle: statusListItemSubTitle
property alias statusListItemTertiaryTitle: statusListItemTertiaryTitle
property alias statusListItemComponentsSlot: statusListItemComponentsSlot
property list<Item> components
signal clicked(string itemId)
signal titleClicked(string titleId)
onComponentsChanged: {
if (components.length) {
for (let idx in components) {
@@ -100,32 +46,18 @@ Rectangle {
MouseArea {
id: sensor
enabled: statusListItem.enabled
anchors.fill: parent
cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
cursorShape: Qt.PointingHandCursor
acceptedButtons: Qt.LeftButton | Qt.RightButton
hoverEnabled: true
onClicked: {
statusListItem.clicked(statusListItem.itemId)
}
Loader {
id: iconOrImage
anchors.left: parent.left
anchors.leftMargin: statusListItem.leftPadding
anchors.top: parent.top
anchors.topMargin: 12
sourceComponent: {
if (statusListItem.icon.isLetterIdenticon) {
return statusLetterIdenticon
}
return !!statusListItem.icon.name ? statusRoundedIcon : statusRoundedImage
}
active: statusListItem.icon.isLetterIdenticon ||
!!statusListItem.icon.name ||
!!statusListItem.image.source.toString()
anchors.verticalCenter: parent.verticalCenter
sourceComponent: !!statusListItem.icon.name ? statusRoundedIcon : statusRoundedImage
active: !!statusListItem.icon.name || !!statusListItem.image.source.toString()
}
Component {
@@ -134,8 +66,6 @@ Rectangle {
icon.width: statusListItem.icon.width
icon.height: statusListItem.icon.height
icon.name: statusListItem.icon.name
icon.rotation: statusListItem.icon.rotation
icon.color: statusListItem.icon.color
color: statusListItem.icon.background.color
width: statusListItem.icon.background.width
height: statusListItem.icon.background.height
@@ -146,113 +76,34 @@ Rectangle {
id: statusRoundedImage
StatusRoundedImage {
image.source: statusListItem.image.source
image.height: statusListItem.image.height
image.width: statusListItem.image.width
color: statusListItem.image.isIdenticon ?
Theme.palette.statusRoundedImage.backgroundColor :
"transparent"
border.width: statusListItem.image.isIdenticon ? 1 : 0
border.color: Theme.palette.directColor7
}
}
Component {
id: statusLetterIdenticon
StatusLetterIdenticon {
width: statusListItem.icon.background.width
height: statusListItem.icon.background.height
color: statusListItem.icon.background.color
name: statusListItem.title
}
}
Item {
id: statusListItemTitleArea
anchors.left: iconOrImage.active ? iconOrImage.right : parent.left
anchors.right: statusListItemLabel.visible ?
statusListItemLabel.left : statusListItemComponentsSlot.left
anchors.leftMargin: statusListItem.leftPadding
anchors.rightMargin: statusListItem.rightPadding
anchors.verticalCenter: parent.verticalCenter
height: childrenRect.height
height: statusListItemTitle.height + (statusListItemSubTitle.visible ? statusListItemSubTitle.height : 0)
StatusBaseText {
id: statusListItemTitle
text: statusListItem.title
font.pixelSize: 15
height: visible ? contentHeight : 0
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
color: {
if (!statusListItem.enabled) {
return Theme.palette.baseColor1
}
switch (statusListItem.type) {
case StatusListItem.Type.Primary:
return Theme.palette.directColor1
case StatusListItem.Type.Secondary:
return Theme.palette.primaryColor1
case StatusListItem.Type.Danger:
return Theme.palette.dangerColor1
}
}
MouseArea {
anchors.fill: parent
cursorShape: containsMouse? Qt.PointingHandCursor : Qt.ArrowCursor
hoverEnabled: true
propagateComposedEvents: true
onClicked: {
statusListItem.titleClicked(statusListItem.titleId)
mouse.accepted = false
}
}
}
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
color: Theme.palette.directColor1
}
StatusBaseText {
id: statusListItemSubTitle
anchors.top: statusListItemTitle.bottom
width: parent.width
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
}
StatusBaseText {
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
visible: !!statusListItem.subTitle
}
}
StatusBaseText {
id: statusListItemLabel
anchors.verticalCenter: parent.verticalCenter
anchors.right: statusListItemComponentsSlot.left
anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? 10 : 0
@@ -1,80 +0,0 @@
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
}
}
}
}
@@ -6,7 +6,7 @@ StatusIcon {
icon: "loading"
height: 17
width: 17
RotationAnimation {
RotationAnimator {
target: statusIcon;
from: 0;
to: 360;
@@ -6,6 +6,7 @@ import StatusQ.Components 0.1
StatusListItem {
id: statusNavigationListItem
signal clicked(var mouse)
property bool selected: false
property alias badge: statusBadge
@@ -16,7 +17,6 @@ StatusListItem {
icon.background.height: 20
icon.background.color: "transparent"
statusListItemIcon.anchors.topMargin: 14
color: {
if (selected) {
@@ -1,11 +0,0 @@
import QtQuick 2.13
import StatusQ.Core.Theme 0.1
import StatusQ.Core 0.1
StatusBaseText {
font.pixelSize: 17
font.weight: Font.Bold
color: Theme.palette.directColor1
}
+1 -4
View File
@@ -8,8 +8,6 @@ Rectangle {
property StatusIconSettings icon: StatusIconSettings {
width: 24
height: 24
rotation: 0
color: Theme.palette.primaryColor1
background: StatusIconBackgroundSettings {
width: 40
height: 40
@@ -30,8 +28,7 @@ Rectangle {
width: statusRoundedIcon.icon.width
height: statusRoundedIcon.icon.height
color: statusRoundedIcon.icon.color
color: Theme.palette.primaryColor1
icon: statusRoundedIcon.icon.name
rotation: statusRoundedIcon.icon.rotation
}
}
@@ -26,12 +26,9 @@ Rectangle {
Image {
id: image
width: statusRoundImage.width
height: statusRoundImage.height
sourceSize.width: parent.width * 2
sourceSize.height: parent.height * 2
sourceSize.width: parent.implicitWidth
sourceSize.height: parent.implicitHeight
fillMode: Image.PreserveAspectFit
anchors.centerIn: parent
cache: true
}
-7
View File
@@ -1,23 +1,16 @@
module StatusQ.Components
StatusBadge 0.1 StatusBadge.qml
StatusChatInfoToolBar 0.1 StatusChatInfoToolBar.qml
StatusChatList 0.1 StatusChatList.qml
StatusChatListItem 0.1 StatusChatListItem.qml
StatusChatListCategory 0.1 StatusChatListCategory.qml
StatusChatListCategoryItem 0.1 StatusChatListCategoryItem.qml
StatusChatListAndCategories 0.1 StatusChatListAndCategories.qml
StatusChatToolBar 0.1 StatusChatToolBar.qml
StatusContactRequestsIndicatorListItem 0.1 StatusContactRequestsIndicatorListItem.qml
StatusDescriptionListItem 0.1 StatusDescriptionListItem.qml
StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
StatusListItem 0.1 StatusListItem.qml
StatusListSectionHeadline 0.1 StatusListSectionHeadline.qml
StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
StatusNavigationListItem 0.1 StatusNavigationListItem.qml
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
StatusExpandableSettingsItem 0.1 StatusExpandableSettingsItem.qml
-228
View File
@@ -1,228 +0,0 @@
import QtQuick 2.14
import QtQuick.Controls 2.14 as QC
import StatusQ.Controls 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
Item {
id: statusBaseInput
property bool multiline: false
property bool clearable: false
property alias inputMethodHints: edit.inputMethodHints
property alias selectedText: edit.selectedText
property alias selectedTextColor: edit.selectedTextColor
property alias selectionStart: edit.selectionStart
property alias selectionEnd: edit.selectionEnd
property alias cursorPosition: edit.cursorPosition
property alias edit: edit
property alias text: edit.text
property alias color: edit.color
property alias font: edit.font
property alias focussed: edit.activeFocus
property alias verticalAlignmet: edit.verticalAlignment
property alias horizontalAlignment: edit.horizontalAlignment
property alias placeholderText: placeholder.text
property alias placeholderTextColor: placeholder.color
property alias placeholderFont: placeholder.font
property real leftPadding: 16
property real rightPadding: 16
property real topPadding: 12
property real bottomPadding: 12
property real minimumHeight: 0
property real maximumHeight: 0
property int maximumLength: 0
property bool valid: true
property bool pristine: true
property bool dirty: false
property bool leftIcon: true
property StatusIconSettings icon: StatusIconSettings {
width: 24
height: 24
name: ""
color: Theme.palette.baseColor1
}
implicitWidth: 448
implicitHeight: multiline ? Math.max((edit.implicitHeight + topPadding + bottomPadding), 44) : 44
Rectangle {
width: parent.width
height: maximumHeight != 0 ? Math.min(
minimumHeight != 0 ? Math.max(statusBaseInput.implicitHeight, minimumHeight)
: statusBaseInput.implicitHeight, maximumHeight) : parent.height
color: Theme.palette.baseColor2
radius: 8
clip: true
border.width: 1
border.color: {
if (!statusBaseInput.valid && statusBaseInput.dirty) {
return Theme.palette.dangerColor1;
}
if (edit.activeFocus) {
return Theme.palette.primaryColor1;
}
return sensor.containsMouse ? Theme.palette.primaryColor2 : "transparent"
}
StatusIcon {
id: statusIcon
anchors.topMargin: 10
anchors.left: statusBaseInput.leftIcon ? parent.left : undefined
anchors.right: !statusBaseInput.leftIcon ? parent.right : undefined
anchors.leftMargin: 10
anchors.rightMargin: 10
anchors.verticalCenter: parent.verticalCenter
icon: statusBaseInput.icon.name
width: statusBaseInput.icon.width
height: statusBaseInput.icon.height
color: statusBaseInput.icon.color
visible: !!statusBaseInput.icon.name
}
Flickable {
id: flick
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: (statusIcon.visible && statusBaseInput.leftIcon) ?
statusIcon.right : parent.left
anchors.right: (statusIcon.visible && !statusBaseInput.leftIcon) ?
statusIcon.left : parent.right
anchors.leftMargin: statusIcon.visible && statusBaseInput.leftIcon ? 8
: statusBaseInput.leftPadding
anchors.rightMargin: statusBaseInput.rightPadding + clearable ? clearButton.width
: statusIcon.visible && !leftIcon ? 8: 0
anchors.topMargin: statusBaseInput.topPadding
anchors.bottomMargin: statusBaseInput.bottomPadding
contentWidth: edit.paintedWidth
contentHeight: edit.paintedHeight
boundsBehavior: Flickable.StopAtBounds
QC.ScrollBar.vertical: QC.ScrollBar { interactive: multiline; enabled: multiline }
function ensureVisible(r) {
if (contentX >= r.x)
contentX = r.x;
else if (contentX+width <= r.x+r.width)
contentX = r.x+r.width-width;
if (contentY >= r.y)
contentY = r.y;
else if (contentY+height <= r.y+r.height)
contentY = r.y+r.height-height;
}
TextEdit {
id: edit
property string previousText: text
width: flick.width
height: flick.height
verticalAlignment: Text.AlignVCenter
selectByMouse: true
selectionColor: Theme.palette.primaryColor2
selectedTextColor: color
focus: true
font.pixelSize: 15
font.family: Theme.palette.baseFont.name
color: Theme.palette.directColor1
onCursorRectangleChanged: { flick.ensureVisible(cursorRectangle); }
wrapMode: statusBaseInput.multiline ? Text.WrapAtWordBoundaryOrAnywhere : TextEdit.NoWrap
onActiveFocusChanged: {
if (statusBaseInput.pristine) {
statusBaseInput.pristine = false
}
}
Keys.onReturnPressed: {
if (multiline) {
event.accepted = false
} else {
event.accepted = true
}
}
Keys.onEnterPressed: {
if (multiline) {
event.accepted = false
} else {
event.accepted = true
}
}
Keys.forwardTo: [statusBaseInput]
onTextChanged: {
statusBaseInput.dirty = true
if (statusBaseInput.maximumLength > 0) {
if (text.length > statusBaseInput.maximumLength) {
var cursor = cursorPosition;
text = previousText;
if (cursor > text.length) {
cursorPosition = text.length;
} else {
cursorPosition = cursor-1;
}
}
previousText = text
}
}
StatusBaseText {
id: placeholder
visible: (edit.text.length === 0)
anchors.left: parent.left
anchors.right: parent.right
anchors.rightMargin: statusBaseInput.rightPadding
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 15
elide: StatusBaseText.ElideRight
font.family: Theme.palette.baseFont.name
color: statusBaseInput.enabled ? Theme.palette.baseColor1 :
Theme.palette.directColor6
}
}
} // Flickable
MouseArea {
id: sensor
enabled: !edit.activeFocus
hoverEnabled: true
anchors.fill: parent
cursorShape: Qt.IBeamCursor
onClicked: edit.forceActiveFocus()
}
} // Rectangle
StatusFlatRoundButton {
id: clearButton
visible: edit.text.length != 0 &&
statusBaseInput.clearable &&
!statusBaseInput.multiline &&
edit.activeFocus
anchors.right: parent.right
anchors.rightMargin: 8
anchors.verticalCenter: parent.verticalCenter
type: StatusFlatRoundButton.Type.Secondary
width: 24
height: 24
icon.name: "clear"
icon.width: 16
icon.height: 16
icon.color: Theme.palette.baseColor1
onClicked: {
edit.clear()
}
}
}
+32 -68
View File
@@ -7,11 +7,11 @@ import StatusQ.Components 0.1
Rectangle {
id: statusChatInfoButton
implicitWidth: identicon.width +
Math.max(
statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonTitle.implicitWidth,
statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonSubTitle.implicitWidth
) + 8
implicitWidth: identicon.width +
Math.max(
statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonTitle.width,
statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonSubTitle.width
) + 8
implicitHeight: 48
property string title: ""
@@ -22,30 +22,26 @@ Rectangle {
property StatusIconSettings icon: StatusIconSettings {}
property int type: StatusChatInfoButton.Type.PublicChat
property alias tooltip: statusToolTip
property alias sensor: sensor
signal clicked(var mouse)
signal pinnedMessagesCountClicked(var mouse)
signal unmute()
enum Type {
Unknown0, // 0
OneToOneChat, // 1
PublicChat, // 2
GroupChat, // 3
Unknown1, // 4
Unknown2, // 5
CommunityChat // 6
PublicChat,
GroupChat,
CommunityChat,
OneToOneChat
}
radius: 8
color: sensor.enabled && sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.statusChatInfoButton.backgroundColor
MouseArea {
id: sensor
anchors.fill: parent
hoverEnabled: true
cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
cursorShape: Qt.PointingHandCursor
onClicked: statusChatInfoButton.clicked(mouse)
@@ -57,8 +53,8 @@ Rectangle {
anchors.verticalCenter: parent.verticalCenter
sourceComponent: !!statusChatInfoButton.image.source.toString() ?
statusRoundImageComponent :
statusLetterIdenticonComponent
statusRoundImageComponent :
statusLetterIdenticonComponent
}
Component {
@@ -73,8 +69,6 @@ Rectangle {
height: parent.height
image.source: statusChatInfoButton.image.source
showLoadingIndicator: true
border.width: statusChatInfoButton.image.isIdenticon ? 1 : 0
border.color: Theme.palette.directColor7
}
Loader {
sourceComponent: statusLetterIdenticonComponent
@@ -99,20 +93,12 @@ Rectangle {
Item {
id: statusChatInfoButtonTitle
anchors.top: identicon.top
anchors.topMargin: statusChatInfoButtonSubTitle.visible ? 0 : 8
anchors.left: identicon.right
anchors.leftMargin: 8
width: Math.min(parent.width - anchors.leftMargin
- identicon.width - identicon.anchors.leftMargin,
implicitWidth)
width: statusIcon.width + chatName.anchors.leftMargin + chatName.width + (mutedIcon.visible ? mutedIcon.width + mutedIcon.anchors.leftMargin : 0)
height: chatName.height
implicitWidth: statusIcon.width + chatName.anchors.leftMargin + chatName.implicitWidth
+ mutedDelta
property real mutedDelta: mutedIcon.visible ? mutedIcon.width + 8 : 0
StatusIcon {
id: statusIcon
anchors.top: parent.top
@@ -124,17 +110,17 @@ Rectangle {
color: statusChatInfoButton.muted ? Theme.palette.baseColor1 : Theme.palette.directColor1
icon: {
switch (statusChatInfoButton.type) {
case StatusChatInfoButton.Type.PublicCat:
return "tiny/public-chat"
break;
case StatusChatInfoButton.Type.GroupChat:
return "tiny/group"
break;
case StatusChatInfoButton.Type.CommunityChat:
return "tiny/channel"
break;
default:
return "tiny/public-chat"
case StatusChatInfoButton.Type.PublicCat:
return "tiny/public-chat"
break;
case StatusChatInfoButton.Type.GroupChat:
return "tiny/group"
break;
case StatusChatInfoButton.Type.CommunityChat:
return "tiny/channel"
break;
default:
return "tiny/public-chat"
}
}
}
@@ -146,15 +132,7 @@ Rectangle {
anchors.leftMargin: statusIcon.visible ? 1 : 0
anchors.top: parent.top
elide: Text.ElideRight
width: Math.min(implicitWidth, parent.width
- statusIcon.width
- statusChatInfoButtonTitle.mutedDelta)
text: statusChatInfoButton.type === StatusChatInfoButton.Type.PublicChat &&
!statusChatInfoButton.title.startsWith("#") ?
"#" + statusChatInfoButton.title :
statusChatInfoButton.title
text: statusChatInfoButton.title
color: statusChatInfoButton.muted ? Theme.palette.directColor5 : Theme.palette.directColor1
font.pixelSize: 15
font.weight: Font.Medium
@@ -174,7 +152,7 @@ Rectangle {
MouseArea {
id: mutedIconSensor
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onClicked: statusChatInfoButton.unmute()
}
@@ -193,28 +171,14 @@ Rectangle {
id: statusChatInfoButtonSubTitle
anchors.left: statusChatInfoButtonTitle.left
anchors.top: statusChatInfoButtonTitle.bottom
visible: !!statusChatInfoButton.subTitle || statusChatInfoButton.pinnedMessagesCount > 0
height: visible ? chatType.height : 0
width: Math.min(parent.width - statusChatInfoButtonTitle.anchors.leftMargin
- identicon.width - identicon.anchors.leftMargin - 8,
implicitWidth)
implicitWidth: chatType.implicitWidth + pinIconDelta + 8
property real pinIconDelta: pinIcon.visible ? pinIcon.width + pinIcon.anchors.leftMargin
+ divider.width + divider.anchors.leftMargin
: 0
height: chatType.height
width: childrenRect.width
StatusBaseText {
id: chatType
text: statusChatInfoButton.subTitle
color: Theme.palette.baseColor1
font.pixelSize: 12
elide: Text.ElideRight
width: Math.min(parent.width - (pinIcon.visible ? divider.width + divider.anchors.leftMargin + pinIcon.width + pinIcon.anchors.leftMargin : 0),
implicitWidth)
}
Rectangle {
@@ -225,13 +189,13 @@ Rectangle {
anchors.left: chatType.right
anchors.leftMargin: 4
anchors.verticalCenter: chatType.verticalCenter
visible: !!chatType.text && pinIcon.visible
visible: pinIcon.visible
}
StatusIcon {
id: pinIcon
anchors.left: divider.visible ? divider.right : parent.left
anchors.left: divider.right
anchors.leftMargin: -2
anchors.verticalCenter: chatType.verticalCenter
height: 14
@@ -256,7 +220,7 @@ Rectangle {
id: pinCountSensor
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
cursorShape: Qt.PointingHandCursor
onClicked: statusChatInfoButton.pinnedMessagesCountClicked(mouse)
}
}
@@ -1,6 +1,5 @@
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Core 0.1
StatusFlatRoundButton {
id: statusChatListCategoryItemButton
@@ -10,7 +9,7 @@ StatusFlatRoundButton {
radius: 4
property bool highlighted: false
property StatusTooltipSettings tooltip: StatusTooltipSettings {}
property alias tooltip: statusToolTip
type: StatusFlatRoundButton.Type.Secondary
icon.width: 20
@@ -23,9 +22,6 @@ StatusFlatRoundButton {
StatusToolTip {
id: statusToolTip
visible: !!text && parent.hovered
text: tooltip.text
orientation: tooltip.orientation
offset: tooltip.offset
}
}
+2 -19
View File
@@ -34,7 +34,6 @@ Rectangle {
property bool loading: false
property alias hovered: sensor.containsMouse
property alias tooltip: statusToolTip
property bool highlighted: false
@@ -79,15 +78,6 @@ Rectangle {
return "transparent";
}
}
property color highlightedColor: {
switch(statusFlatRoundButton.type) {
case StatusFlatRoundButton.Type.Primary:
return Theme.palette.primaryColor3;
case StatusFlatRoundButton.Type.Secondary:
return Theme.palette.baseColor4;
}
}
}
implicitWidth: 44
@@ -96,10 +86,8 @@ Rectangle {
color: {
if (statusFlatRoundButton.enabled) {
if (sensor.containsMouse) {
return backgroundSettings.hoverColor
}
return highlighted ? backgroundSettings.highlightedColor : backgroundSettings.color
return sensor.containsMouse || highlighted ? backgroundSettings.hoverColor
: backgroundSettings.color
} else {
return backgroundSettings.disabledColor
}
@@ -152,9 +140,4 @@ Rectangle {
onReleased: statusFlatRoundButton.released(mouse)
onPressAndHold: statusFlatRoundButton.pressAndHold(mouse)
} // Sensor
StatusToolTip {
id: statusToolTip
visible: !!text && parent.hovered
} // Tooltip
} // Rectangle
-135
View File
@@ -1,135 +0,0 @@
import QtQuick 2.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Controls.Validators 0.1
Item {
id: root
implicitWidth: 480
height: (label.visible ?
label.anchors.topMargin +
label.height :
charLimitLabel.visible ?
charLimitLabel.anchors.topMargin +
charLimitLabel.height :
0) +
statusBaseInput.anchors.topMargin +
statusBaseInput.height +
(errorMessage.visible ?
errorMessage.anchors.topMargin +
errorMessage.height :
0) + 8
property alias input: statusBaseInput
property alias valid: statusBaseInput.valid
property alias text: statusBaseInput.text
property string label: ""
property string secondaryLabel: ""
property int charLimit: 0
property string errorMessage: ""
property list<StatusValidator> validators
property var errors: ({})
function validate() {
if (validators.length) {
for (let idx in validators) {
let result = validators[idx].validate(statusBaseInput.text)
if (typeof result === "boolean" && result) {
statusBaseInput.valid = true
} else {
if (!errors) {
errors = {}
}
errors[validators[idx].name] = result
statusBaseInput.valid = false
}
}
}
}
Component.onCompleted: validate()
Row {
id: labelRow
anchors.top: parent.top
anchors.left: parent.left
anchors.topMargin: visible ? 8 : 0
anchors.leftMargin: 16
anchors.right: (charLimitLabel.visible ? charLimitLabel.right : parent.right)
anchors.rightMargin: 16
height: visible ? 17 : 0
visible: !!root.label
spacing: 5
StatusBaseText {
id: label
elide: Text.ElideRight
text: root.label
font.pixelSize: 15
color: statusBaseInput.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
}
StatusBaseText {
id: secondaryLabel
height: visible ? 17 : 0
visible: !!root.secondaryLabel
elide: Text.ElideRight
text: root.secondaryLabel
font.pixelSize: 15
color: Theme.palette.baseColor1
}
}
StatusBaseText {
id: charLimitLabel
height: visible ? implicitHeight : 0
anchors.top: parent.top
anchors.right: parent.right
anchors.topMargin: visible ? 11 : 0
anchors.rightMargin: 16
visible: root.charLimit > 0
text: "%1 / %2".arg(statusBaseInput.text.length).arg(root.charLimit)
font.pixelSize: 12
color: statusBaseInput.enabled ? Theme.palette.baseColor1 : Theme.palette.directColor6
}
StatusBaseInput {
id: statusBaseInput
anchors.top: labelRow.visible ? labelRow.bottom :
charLimitLabel.visible ? charLimitLabel.bottom : parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.topMargin: charLimitLabel.visible ? 11 : 8
anchors.leftMargin: 16
anchors.rightMargin: 16
maximumLength: root.charLimit
onTextChanged: root.validate()
Keys.forwardTo: [root]
}
StatusBaseText {
id: errorMessage
anchors.top: statusBaseInput.bottom
anchors.topMargin: 11
anchors.right: parent.right
anchors.rightMargin: 16
anchors.left: parent.left
anchors.leftMargin: 16
height: visible ? implicitHeight : 0
visible: !!root.errorMessage && !statusBaseInput.valid
font.pixelSize: 12
color: Theme.palette.dangerColor1
text: root.errorMessage
horizontalAlignment: Text.AlignRight
wrapMode: Text.WordWrap
}
}
@@ -1,59 +0,0 @@
import QtQuick 2.14
import QtQuick.Controls 2.12
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
Button {
id: root
implicitWidth: 446
implicitHeight: 44
property color bgColor: Theme.palette.baseColor2
property color contentColor: Theme.palette.baseColor1
signal clicked()
background: Item {
anchors.fill: parent
Rectangle {
id: background
anchors.fill: parent
radius: 8
color: root.bgColor
}
StatusIcon {
id: nextIcon
anchors.right: parent.right
anchors.rightMargin: 8
anchors.verticalCenter: parent.verticalCenter
icon: "next"
color: !Qt.colorEqual(root.contentColor, Theme.palette.baseColor1)
? root.contentColor : Theme.palette.directColor1
}
}
contentItem: Item {
anchors.fill: parent
StatusBaseText {
id: textLabel
anchors {
fill: parent
leftMargin: 16
}
verticalAlignment: Text.AlignVCenter
font.pixelSize: 15
color: root.contentColor
text: root.text
}
}
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
root.clicked();
}
}
}
+1 -5
View File
@@ -10,7 +10,6 @@ Rectangle {
property StatusIconSettings icon: StatusIconSettings {
width: 23
height: 23
rotation: 0
color: {
switch(statusRoundButton.type) {
@@ -35,8 +34,6 @@ Rectangle {
property alias hovered: sensor.containsMouse
property bool highlighted: false
property int type: StatusRoundButton.Type.Primary
signal pressed(var mouse)
@@ -90,7 +87,7 @@ Rectangle {
color: {
if (statusRoundButton.enabled) {
return sensor.containsMouse || highlighted ? backgroundSettings.hoverColor
return sensor.containsMouse ? backgroundSettings.hoverColor
: backgroundSettings.color
} else {
return backgroundSettings.disabledColor
@@ -112,7 +109,6 @@ Rectangle {
visible: !loading
icon: statusRoundButton.icon.name
rotation: statusRoundButton.icon.rotation
width: statusRoundButton.icon.width
height: statusRoundButton.icon.height
@@ -1,14 +0,0 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import StatusQ.Core.Theme 0.1
TabBar {
id: statusSwitchTabBar
padding: 1
background: Rectangle {
implicitHeight: 36
color: Theme.palette.directColor7
radius: 8
}
}
@@ -1,52 +0,0 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtGraphicalEffects 1.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
TabButton {
id: statusSwitchTabButton
contentItem: Item {
height: 36
MouseArea {
id: sensor
hoverEnabled: true
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onPressed: mouse.accepted = false
onReleased: mouse.accepted = false
StatusBaseText {
id: label
text: statusSwitchTabButton.text
color: Theme.palette.primaryColor1
font.weight: Font.Medium
font.pixelSize: 15
horizontalAlignment: Text.AlignHCenter
anchors.centerIn: parent
}
}
}
background: Rectangle {
id: controlBackground
implicitHeight: 36
implicitWidth: 148
color: statusSwitchTabButton.checked ?
Theme.palette.statusSwitchTab.backgroundColor :
"transparent"
radius: 8
layer.enabled: true
layer.effect: DropShadow {
horizontalOffset: 0
verticalOffset: 0
radius: 10
samples: 25
spread: 0
color: Theme.palette.dropShadow
}
}
}
+3 -6
View File
@@ -15,8 +15,6 @@ ToolTip {
property int maxWidth: 800
property int orientation: StatusToolTip.Orientation.Top
property int offset: 0
property alias arrow: arrow
implicitWidth: Math.min(maxWidth, textContent.implicitWidth + 16)
leftPadding: 8
@@ -34,7 +32,6 @@ ToolTip {
anchors.bottomMargin: 8
}
Rectangle {
id: arrow
color: statusToolTipContentBackground.color
height: 20
width: 20
@@ -42,13 +39,13 @@ ToolTip {
radius: 1
x: {
if (orientation === StatusToolTip.Orientation.Top || orientation === StatusToolTip.Orientation.Bottom) {
return statusToolTipBackground.width / 2 - width / 2 + offset
return statusToolTipBackground.width / 2 - width / 2
}
if (orientation === StatusToolTip.Orientation.Left) {
return statusToolTipContentBackground.width - (width / 2) - 8 + offset
return statusToolTipContentBackground.width - (width / 2) - 8
}
if (orientation === StatusToolTip.Orientation.Right) {
return -width/2 + 8 + offset
return -width/2 + 8
}
}
y: {
@@ -1,16 +0,0 @@
import StatusQ.Controls 0.1
StatusValidator {
property int minLength: 0
name: "minLength"
validate: function (value) {
return value.length >= minLength ? true : {
min: minLength,
actual: value.length
}
}
}
@@ -1,11 +0,0 @@
import QtQuick 2.13
QtObject {
id: statusValidator
property string name: ""
property var validate: function (value) {
return true
}
}
-5
View File
@@ -1,5 +0,0 @@
module StatusQ.Controls.Validators
StatusValidator 0.1 StatusValidator.qml
StatusMinLengthValidator 0.1 StatusMinLengthValidator.qml
StatusMaxLengthValidator 0.1 StatusMaxLengthValidator.qml
-5
View File
@@ -14,8 +14,3 @@ StatusSwitch 0.1 StatusSwitch.qml
StatusRadioButton 0.1 StatusRadioButton.qml
StatusCheckBox 0.1 StatusCheckBox.qml
StatusSlider 0.1 StatusSlider.qml
StatusBaseInput 0.1 StatusBaseInput.qml
StatusInput 0.1 StatusInput.qml
StatusPickerButton 0.1 StatusPickerButton.qml
StatusSwitchTabButton 0.1 StatusSwitchTabButton.qml
StatusSwitchTabBar 0.1 StatusSwitchTabBar.qml
+7 -8
View File
@@ -12,20 +12,19 @@ Image {
sourceSize.height: height
fillMode: Image.PreserveAspectFit
antialiasing: true
mipmap: true
onIconChanged: {
if (icon !== "") {
source = "../../assets/img/icons/" + icon + ".svg";
}
}
layer.mipmap: true
layer.smooth: true
layer.format: ShaderEffectSource.RGBA
layer.enabled:!Qt.colorEqual(statusIcon.color, "transparent")
layer.effect: ColorOverlay {
ColorOverlay {
visible: !Qt.colorEqual(statusIcon.color, "transparent")
anchors.fill: statusIcon
source: statusIcon
color: statusIcon.color
antialiasing: true
smooth: true
}
}
-1
View File
@@ -10,6 +10,5 @@ QtObject {
property color color
property url source
property int rotation
property bool isLetterIdenticon
property StatusIconBackgroundSettings background: StatusIconBackgroundSettings {}
}
-1
View File
@@ -6,6 +6,5 @@ QtObject {
property url source
property real width
property real height
property bool isIdenticon: false
}
@@ -1,20 +0,0 @@
import QtQuick 2.14
QtObject {
property string title
property string subTitle
property int titleElide: Text.ElideRight
property int subTitleElide: Text.ElideRight
property Component popupMenu
property StatusImageSettings image: StatusImageSettings {
width: 40
height: 40
isIdenticon: false
}
property StatusIconSettings icon: StatusIconSettings {
width: 40
height: 40
isLetterIdenticon: false
}
}
@@ -1,9 +0,0 @@
import QtQuick 2.14
import StatusQ.Controls 0.1
QtObject {
property string text: ""
property int orientation: StatusToolTip.Orientation.Top
property int offset: 0
}
-1
View File
@@ -13,7 +13,6 @@ QtObject {
'blue3': '#88B0FF',
'blue4': '#869EFF',
'blue5': '#AAC6FF',
'blue6': '#ECEFFC',
'brown': '#8B3131',
'brown2': '#9B832F',
@@ -104,7 +104,6 @@ ThemePalette {
directColor6: getColor('white', 0.2)
directColor7: getColor('white', 0.1)
directColor8: getColor('white', 0.05)
directColor9: getColor('white', 0.2)
indirectColor1: getColor('black')
indirectColor2: getColor('black', 0.7)
@@ -133,7 +132,6 @@ ThemePalette {
property QtObject statusListItem: QtObject {
property color backgroundColor: baseColor3
property color secondaryHoverBackgroundColor: primaryColor3
}
property QtObject statusChatListItem: QtObject {
@@ -165,21 +163,5 @@ ThemePalette {
property color hoverBackgroundColor: directColor7
property color separatorColor: directColor7
}
property QtObject statusModal: QtObject {
property color backgroundColor: baseColor3
}
property QtObject statusRoundedImage: QtObject {
property color backgroundColor: baseColor3
}
property QtObject statusChatInput: QtObject {
property color secondaryBackgroundColor: "#414141"
}
property QtObject statusSwitchTab: QtObject {
property color backgroundColor: baseColor3
}
}
@@ -102,7 +102,6 @@ ThemePalette {
directColor6: getColor('black', 0.3)
directColor7: getColor('black', 0.1)
directColor8: getColor('black', 0.05)
directColor9: getColor('black', 0.2)
indirectColor1: getColor('white')
indirectColor2: getColor('white', 0.7)
@@ -131,7 +130,6 @@ ThemePalette {
property QtObject statusListItem: QtObject {
property color backgroundColor: white
property color secondaryHoverBackgroundColor: getColor('blue6')
}
property QtObject statusChatListItem: QtObject {
@@ -163,21 +161,5 @@ ThemePalette {
property color hoverBackgroundColor: baseColor2
property color separatorColor: baseColor2
}
property QtObject statusModal: QtObject {
property color backgroundColor: white
}
property QtObject statusRoundedImage: QtObject {
property color backgroundColor: white
}
property QtObject statusChatInput: QtObject {
property color secondaryBackgroundColor: "#E2E6E8"
}
property QtObject statusSwitchTab: QtObject {
property color backgroundColor: white
}
}
-19
View File
@@ -28,7 +28,6 @@ QtObject {
property color white: getColor('white')
property color dropShadow: getColor('black', 0.12)
property color backdropColor: getColor('black', 0.4)
property color baseColor1
property color baseColor2
@@ -64,7 +63,6 @@ QtObject {
property color directColor6
property color directColor7
property color directColor8
property color directColor9
property color indirectColor1
property color indirectColor2
@@ -93,7 +91,6 @@ QtObject {
property QtObject statusListItem: QtObject {
property color backgroundColor
property color secondaryHoverBackgroundColor
}
property QtObject statusChatListItem: QtObject {
@@ -127,22 +124,6 @@ QtObject {
property color separatorColor
}
property QtObject statusModal: QtObject {
property color backgroundColor
}
property QtObject statusRoundedImage: QtObject {
property color backgroundColor
}
property QtObject statusChatInput: QtObject {
property color secondaryBackgroundColor
}
property QtObject statusSwitchTab: QtObject {
property color backgroundColor
}
function alphaColor(color, alpha) {
let actualColor = Qt.darker(color, 1)
actualColor.a = alpha
-19
View File
@@ -1,19 +0,0 @@
pragma Singleton
import QtQuick 2.13
QtObject {
function getAbsolutePosition(node) {
var returnPos = {};
returnPos.x = 0;
returnPos.y = 0;
if (node !== undefined && node !== null) {
var parentValue = getAbsolutePosition(node.parent);
returnPos.x = parentValue.x + node.x;
returnPos.y = parentValue.y + node.y;
}
return returnPos;
}
}
-4
View File
@@ -1,4 +0,0 @@
module StatusQ.Core.Utils
singleton Utils 0.1 Utils.qml
+1 -2
View File
@@ -5,5 +5,4 @@ StatusIcon 0.1 StatusIcon.qml
StatusIconSettings 0.1 StatusIconSettings.qml
StatusIconBackgroundSettings 0.1 StatusIconBackgroundSettings.qml
StatusImageSettings 0.1 StatusImageSettings.qml
StatusModalHeaderSettings 0.1 StatusModalHeaderSettings.qml
StatusTooltipSettings 0.1 StatusTooltipSettings.qml
+2 -22
View File
@@ -10,8 +10,6 @@ Rectangle {
id: statusAppNavBar
property StatusNavBarTabButton navBarChatButton
property StatusNavBarTabButton navBarProfileButton
property list<StatusNavBarTabButton> navBarTabButtons
property alias navBarCommunityTabButtons: navBarCommunityTabButtons
@@ -36,12 +34,6 @@ Rectangle {
}
}
onNavBarProfileButtonChanged: {
if (!!navBarProfileButton) {
navBarProfileButton.parent = navBarProfileButtonSlot
}
}
onNavBarTabButtonsChanged: {
if (navBarTabButtons.length) {
for (let idx in navBarTabButtons) {
@@ -83,9 +75,7 @@ Rectangle {
if (navBarContentHeight > statusAppNavBar.height) {
height = statusAppNavBar.height -
statusAppNavBar.navBarContentHeightWithoutCommunityButtons -
(!!navBarTabButtonsSlot.anchors.bottom ? navBarTabButtonsSlot.anchors.bottomMargin : navBarTabButtonsSlot.anchors.topMargin) -
navBarProfileButtonSlot.height -
navBarProfileButtonSlot.anchors.bottomMargin
(!!navBarTabButtonsSlot.anchors.bottom ? navBarTabButtonsSlot.anchors.bottomMargin : navBarTabButtonsSlot.anchors.topMargin)
bottomPadding = 16
topPadding = 16
} else {
@@ -132,7 +122,7 @@ Rectangle {
if (navBarContentHeight > statusAppNavBar.height) {
anchors.top = undefined
anchors.topMargin = 0
anchors.bottom = navBarProfileButtonSlot.top
anchors.bottom = statusAppNavBar.bottom
anchors.bottomMargin = 32
} else {
anchors.bottom = undefined
@@ -142,15 +132,5 @@ Rectangle {
}
}
}
Item {
id: navBarProfileButtonSlot
anchors.horizontalCenter: parent.horizontalCenter
height: visible ? statusAppNavBar.navBarProfileButton.height : 0
width: visible ? statusAppNavBar.navBarProfileButton.width : 0
visible: !!statusAppNavBar.navBarProfileButton
anchors.bottom: parent.bottom
anchors.bottomMargin: visible ? 32 : 0
}
}
@@ -1,53 +0,0 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import StatusQ.Core.Theme 0.1
SplitView {
id: root
implicitWidth: 822
implicitHeight: 600
handle: Item { }
property Item leftPanel
property Item centerPanel
property Component rightPanel
property bool showRightPanel
Control {
SplitView.minimumWidth: 300
SplitView.preferredWidth: 300
SplitView.fillHeight: true
contentItem: (!!leftPanel) ? leftPanel : null
background: Rectangle {
anchors.fill: parent
color: Theme.palette.baseColor4
}
}
Control {
SplitView.minimumWidth: 300
SplitView.fillWidth: true
SplitView.fillHeight: true
contentItem: (!!centerPanel) ? centerPanel : null
background: Rectangle {
anchors.fill: parent
color: Theme.palette.statusAppLayout.rightPanelBackgroundColor
}
}
Control {
SplitView.preferredWidth: root.showRightPanel ? 250 : 0
SplitView.minimumWidth: root.showRightPanel ? 58 : 0
opacity: root.showRightPanel ? 1.0 : 0.0
visible: (opacity > 0.1)
contentItem: Loader {
anchors.fill: parent
sourceComponent: (!!rightPanel) ? rightPanel : null
}
background: Rectangle {
anchors.fill: parent
color: Theme.palette.baseColor4
}
}
}
+2 -1
View File
@@ -3,4 +3,5 @@ module StatusQ.Layout
StatusAppLayout 0.1 StatusAppLayout.qml
StatusAppNavBar 0.1 StatusAppNavBar.qml
StatusAppTwoPanelLayout 0.1 StatusAppTwoPanelLayout.qml
StatusAppThreePanelLayout 0.1 StatusAppThreePanelLayout.qml
@@ -1,118 +0,0 @@
import QtQuick 2.14
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Core 0.1
Rectangle {
id: windowsTitleBar
property string title: titleText.text
signal close();
signal minimised();
signal maximized();
implicitHeight: 32
color: Theme.palette.baseColor5
Row {
id: titleLayout
anchors.left: parent.left
anchors.leftMargin: 12
anchors.verticalCenter: parent.verticalCenter
spacing: 4
StatusIcon {
anchors.verticalCenter: parent.verticalCenter
width: 16
height: 16
icon: "windows_titlebar/status"
}
StatusBaseText {
id: titleText
anchors.verticalCenter: parent.verticalCenter
text: qsTr("Status")
color: Theme.palette.directColor1
}
}
Row {
id: buttonsLayout
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
height: parent.height
Rectangle {
width: 48
height: parent.height
color: minimizeSensor.containsMouse ? (minimizeSensor.pressed ? Theme.palette.directColor9 : Theme.palette.directColor8)
: "transparent"
StatusIcon {
anchors.centerIn: parent
width: 10
height: 1
icon: "windows_titlebar/minimise"
color: Theme.palette.directColor1
}
MouseArea {
id: minimizeSensor
anchors.fill: parent
hoverEnabled: true
onClicked: windowsTitleBar.minimised()
}
}
Rectangle {
width: 48
height: parent.height
color: maximizeSensor.containsMouse ? (maximizeSensor.pressed ? Theme.palette.directColor9 : Theme.palette.directColor8)
: "transparent"
StatusIcon {
anchors.centerIn: parent
width: 10
height: 10
icon: "windows_titlebar/maximize"
color: Theme.palette.directColor1
}
MouseArea {
id: maximizeSensor
anchors.fill: parent
hoverEnabled: true
onClicked: windowsTitleBar.maximized()
}
}
Rectangle {
width: 48
height: parent.height
color: closeSensor.containsMouse ? (closeSensor.pressed ? "#DB1518" : "#ED4245")
: "transparent"
StatusIcon {
anchors.centerIn: parent
width: 10
height: 10
icon: "windows_titlebar/close"
color: closeSensor.containsMouse ? Theme.palette.white : Theme.palette.directColor1
}
MouseArea {
id: closeSensor
anchors.fill: parent
hoverEnabled: true
onClicked: windowsTitleBar.closed()
}
}
}
}
+1 -1
View File
@@ -1,5 +1,5 @@
module StatusQ.Platform
StatusMacTrafficLights 0.1 StatusMacTrafficLights.qml
StatusWindowsTitleBar 0.1 StatusWindowsTitleBar.qml
-24
View File
@@ -1,24 +0,0 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
MenuSeparator {
id: root
property string text
height: visible && enabled ? implicitHeight : 0
contentItem: Item {
implicitWidth: 176
implicitHeight: 16
StatusBaseText {
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 12
color: Theme.palette.baseColor1
font.pixelSize: 12
text: root.text
}
}
}
+1 -11
View File
@@ -9,17 +9,7 @@ Action {
Normal,
Danger
}
icon.color: "transparent"
property int type: StatusMenuItem.Type.Normal
property real iconRotation: 0
property StatusImageSettings image: StatusImageSettings {
height: 16
width: 16
isIdenticon: false
}
property StatusIconSettings iconSettings: StatusIconSettings {
isLetterIdenticon: false
background: StatusIconBackgroundSettings {}
color: "transparent"
}
}
@@ -4,7 +4,6 @@ import QtQuick.Controls 2.13
import StatusQ.Core.Theme 0.1
MenuSeparator {
height: visible && enabled ? implicitHeight : 0
contentItem: Rectangle {
implicitWidth: 176
implicitHeight: 1
-69
View File
@@ -1,69 +0,0 @@
import QtQuick 2.14
import QtQuick.Controls 2.14 as QC
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import "statusModal" as Spares
QC.Popup {
id: statusModal
property alias headerActionButton: headerImpl.actionButton
property StatusModalHeaderSettings header: StatusModalHeaderSettings {}
property alias rightButtons: footerImpl.rightButtons
property alias leftButtons: footerImpl.leftButtons
property bool showHeader: true
property bool showFooter: true
signal editButtonClicked()
parent: QC.Overlay.overlay
width: 480
topPadding: headerImpl.implicitHeight
bottomPadding: footerImpl.implicitHeight
leftPadding: 0
rightPadding: 0
modal: true
QC.Overlay.modal: Rectangle {
color: Theme.palette.backdropColor
}
background: Rectangle {
color: Theme.palette.statusModal.backgroundColor
radius: 8
Spares.StatusModalHeader {
id: headerImpl
anchors.top: parent.top
width: visible ? parent.width : 0
visible: statusModal.showHeader
title: header.title
titleElide: header.titleElide
subTitle: header.subTitle
subTitleElide: header.subTitleElide
image: header.image
icon: header.icon
popupMenu: header.popupMenu
onEditButtonClicked: statusModal.editButtonClicked()
onClose: statusModal.close()
}
Spares.StatusModalFooter {
id: footerImpl
anchors.bottom: parent.bottom
width: visible ? parent.width : 0
visible: statusModal.showFooter
}
}
}
-31
View File
@@ -1,31 +0,0 @@
import QtQuick 2.14
import StatusQ.Core.Theme 0.1
Column {
spacing: 0
property real topPadding: 0
property real bottomPadding: 0
width: 480
Item {
id: topPaddingItem
height: parent.topPadding
width: parent.width
}
Rectangle {
id: divider
color: Theme.palette.baseColor2
height: 1
width: parent.width
}
Item {
id: bottomPaddingItem
height: parent.bottomPadding
width: parent.width
}
}
+18 -110
View File
@@ -4,30 +4,20 @@ import QtGraphicalEffects 1.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
import StatusQ.Popups 0.1
Menu {
id: statusPopupMenu
closePolicy: Popup.CloseOnPressOutside | Popup.CloseOnEscape
closePolicy: Popup.CloseOnReleaseOutside | 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()
}
}
onClosed: {
if (typeof closeHandler === "function") {
closeHandler()
@@ -36,21 +26,19 @@ 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 {
onTriggered: { statusPopupMenu.menuItemClicked(statusPopupMenuItem.subMenuIndex); }
}
action: StatusMenuItem {}
Component {
id: indicatorComponent
@@ -59,32 +47,13 @@ Menu {
implicitHeight: 24
StatusIcon {
anchors.centerIn: parent
width: {
let width = statusPopupMenuItem.action.icon.width ||
statusPopupMenuItem.action.iconSettings.width
return !!width ? width : 18
}
width: !!statusPopupMenuItem.action.icon.width ?
statusPopupMenuItem.action.icon.width : 18
rotation: statusPopupMenuItem.action.iconRotation
icon: {
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 "";
}
}
icon: statusPopupMenuItem.subMenu ?
statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex] :
statusPopupMenuItem.action.icon.name
color: {
let c = statusPopupMenuItem.action.iconSettings.color ||
statusPopupMenuItem.action.icon.color
if (!Qt.colorEqual(c, "transparent")) {
return c
}
switch (statusPopupMenuItem.action.type) {
case StatusMenuItem.Type.Danger:
return Theme.palette.dangerColor1
@@ -97,80 +66,18 @@ Menu {
}
}
Component {
id: statusLetterIdenticonCmp
Item {
implicitWidth: 24
implicitHeight: 24
StatusLetterIdenticon {
anchors.centerIn: parent
width: 16
height: 16
color: {
let subMenuItemIcon = statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex]
return subMenuItemIcon && subMenuItemIcon.color ? subMenuItemIcon.color : statusPopupMenuItem.action.iconSettings.background.color
}
name: statusPopupMenuItem.text
letterSize: 11
}
}
}
Component {
id: statusRoundImageCmp
Item {
implicitWidth: 24
implicitHeight: 24
StatusRoundedImage {
anchors.centerIn: parent
width: statusPopupMenuItem.action.image.width
height: statusPopupMenuItem.action.image.height
image.source: statusPopupMenuItem.subMenu ?
statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex].source :
statusPopupMenuItem.action.image.source
border.width: (statusPopupMenuItem.subMenu && statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex].isIdenticon) ||
statusPopupMenuItem.action.image.isIdenticon ? 1 : 0
border.color: Theme.palette.directColor7
}
}
}
indicator: Loader {
sourceComponent: {
let subMenuItemIcon = statusPopupMenu.subMenuItemIcons[parent.subMenuIndex]
if ((parent.subMenu && subMenuItemIcon && subMenuItemIcon.source) ||
statusPopupMenuItem.action.image && !!statusPopupMenuItem.action.image.source.toString()) {
return statusRoundImageCmp
}
return (parent.subMenu && subMenuItemIcon && subMenuItemIcon.isLetterIdenticon) ||
(statusPopupMenuItem.action.iconsSettings && statusPopupMenuItem.action.iconSettings.isLetterIdenticon) ?
statusLetterIdenticonCmp : indicatorComponent
}
sourceComponent: indicatorComponent
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 8
active: {
if (enabled) {
let hasIconSettings = !!statusPopupMenuItem.action.icon.name ||
(statusPopupMenuItem.action.iconSettings &&
(!!statusPopupMenuItem.action.iconSettings.name || !!statusPopupMenuItem.action.iconSettings.isLetterIdenticon))
let hasImageSettings = statusPopupMenuItem.action.image && !!statusPopupMenuItem.action.image.source.toString()
return enabled && (parent.subMenu && !!statusPopupMenu.subMenuItemIcons[parent.subMenuIndex]) || hasIconSettings || hasImageSettings
}
return false
}
active: (parent.subMenu && !!statusPopupMenu.subMenuItemIcons[parent.subMenuIndex] ||
!!statusPopupMenuItem.action.icon.name) &&
statusPopupMenuItem.action.enabled
}
contentItem: StatusBaseText {
anchors.left: statusPopupMenuItem.indicator.right
anchors.right: arrowIcon.visible ? arrowIcon.left : arrowIcon.right
anchors.rightMargin: 8
anchors.leftMargin: 4
horizontalAlignment: Text.AlignLeft
@@ -192,7 +99,6 @@ Menu {
}
arrow: StatusIcon {
id: arrowIcon
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 8
@@ -204,7 +110,7 @@ Menu {
background: Rectangle {
color: {
if (statusPopupMenuItem.hovered) {
if (hovered) {
return statusPopupMenuItem.action.type === StatusMenuItem.Type.Danger ? Theme.palette.dangerColor3 : Theme.palette.statusPopupMenu.hoverBackgroundColor
}
return "transparent"
@@ -213,8 +119,9 @@ Menu {
MouseArea {
id: sensor
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
cursorShape: Qt.PointingHandCursor
hoverEnabled: statusPopupMenuItem.action.enabled
onPressed: mouse.accepted = false
}
@@ -246,4 +153,5 @@ Menu {
}
}
}
}
@@ -1,144 +0,0 @@
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 locationModel
signal itemClicked(string firstLevelItemValue, string secondLevelItemValue)
StatusMenuItem {
text: "Anywhere"
onTriggered: {
searchPopup.resetSearchSelection();
root.itemClicked("", "");
}
}
StatusMenuSeparator { }
//Dummy item to keep seperator in right position
MenuItem { implicitHeight: 0.00001 }
Instantiator {
model: root.locationModel
delegate: Loader {
sourceComponent: (!!model.subItems && model.subItems.count > 0) ? subMenus : subMenuItemComponent
onLoaded: {
if (!!model.subItems && model.subItems.count > 0) {
item.parentValue = model.value
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.value = model.value
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.resetSearchSelection()
searchPopup.setSearchSelection(text,
"",
image.source,
image.isIdenticon,
iconSettings.name,
iconSettings.color)
root.itemClicked(value, "")
}
}
}
Component {
id: subMenus
StatusPopupMenu {
id: menu
property var subItemsModel
property string parentValue
property string parentIconName
property string parentImageSource
property string parentIdenticonColor
property string parentIsIdenticon
Repeater {
id: menuLoader
model: menu.subItemsModel
property string parentValue: menu.parentValue
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 {
value: model.value
text: model.text
image.source: model.imageSource
iconSettings.name: model.iconName
iconSettings.color: model.iconColor
image.isIdenticon: model.isIdenticon
onTriggered: {
searchPopup.resetSearchSelection()
if (menuLoader.parentTitleText === "Chat") {
searchPopup.setSearchSelection(model.text,
"",
model.imageSource,
model.isIdenticon,
model.iconName,
model.iconColor)
} else {
searchPopup.setSearchSelection(menuLoader.parentTitleText,
model.text,
menuLoader.parentImageSource,
menuLoader.parentIsIdenticon,
menuLoader.parentIconName,
menuLoader.parentIdenticonColor)
}
root.itemClicked(menuLoader.parentValue, value)
root.dismiss()
}
}
}
}
}
}
onMenuItemClicked: {
searchPopup.resetSearchSelection()
let menuItem = root.menuAt(root.currentIndex)
searchPopup.setSearchSelection(menuItem.title,
"",
menuItem.parentImageSource,
menuItem.parentIsIdenticon,
menuItem.parentIconName,
menuItem.parentIdenticonColor)
root.itemClicked(menuItem.parentValue, "")
//TODO fix error "QML StatusPopupMenu: cannot find any window to open popup in."
root.dismiss()
}
}
-353
View File
@@ -1,353 +0,0 @@
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: contentItem.searchText
property string noResultsLabel: "No results"
property string defaultSearchLocationText: "Anywhere"
property bool loading
property Menu searchOptionsPopupMenu: Menu { }
property var searchResults: [ ]
property var searchSelectionButton
signal resultItemClicked(string itemId)
signal resultItemTitleClicked(string titleId)
property var formatTimestampFn: function (ts) {
return ts
}
function setSearchSelection(text = "",
secondaryText = "",
imageSource = "",
isIdenticon = "",
iconName = "",
iconColor = "") {
searchSelectionButton.primaryText = text
searchSelectionButton.secondaryText = secondaryText
searchSelectionButton.image.source = imageSource
searchSelectionButton.image.isIdenticon = isIdenticon
searchSelectionButton.iconSettings.name = iconName
searchSelectionButton.iconSettings.color = iconColor !== ""? iconColor : Theme.palette.primaryColor1
searchSelectionButton.iconSettings.isLetterIdenticon = !iconName && !imageSource
}
function resetSearchSelection() {
setSearchSelection(defaultSearchLocationText, "", "", false, "", "transparent")
}
contentItem: 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.primaryText !== defaultSearchLocationText &&
(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"
}
StatusIcon {
Layout.preferredWidth: 17.5
Layout.preferredHeight: 17.5
Layout.alignment: Qt.AlignVCenter
visible: !!searchOptionsMenuButton.secondaryText
color: Theme.palette.directColor1
icon: "channel"
}
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 === defaultSearchLocationText) ? 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.resetSearchSelection(); }
}
}
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
itemId: model.itemId
titleId: model.titleId
title: model.title
statusListItemTitle.color: model.title.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.image === "")
icon.background.color: model.color
titleAsideText: root.formatTimestampFn(model.time)
image.source: model.image
badge.primaryText: model.badgePrimaryText
badge.secondaryText: model.badgeSecondaryText
badge.image.source: model.badgeImage
badge.icon.isLetterIdenticon: model.badgeIsLetterIdenticon
badge.icon.color: model.badgeIconColor
onClicked: {
root.resultItemClicked(itemId)
}
onTitleClicked: {
root.resultItemTitleClicked(titleId)
}
}
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.resetSearchSelection();
root.loading = false;
contentItem.searchText = "";
}
}
@@ -1,79 +0,0 @@
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 string value: ""
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: (icon === "channel")? Theme.palette.directColor1 : 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
}
}
-6
View File
@@ -3,9 +3,3 @@ module StatusQ.Popups
StatusMenuSeparator 0.1 StatusMenuSeparator.qml
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
@@ -1,124 +0,0 @@
import QtQuick 2.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
Row {
id: statusImageWithTitle
property alias title: headerTitle.text
property alias subTitle: headerSubTitle.text
property int titleElide: Text.ElideRight
property int subTitleElide: Text.ElideRight
property bool editable: false
signal editButtonClicked
property StatusImageSettings image: StatusImageSettings {
width: 40
height: 40
isIdenticon: false
}
property StatusIconSettings icon: StatusIconSettings {
width: 40
height: 40
isLetterIdenticon: false
}
spacing: 8
Loader {
id: iconOrImage
anchors.verticalCenter: parent.verticalCenter
width: active ? 40 : 0
sourceComponent: {
if (statusImageWithTitle.icon.isLetterIdenticon) {
return statusLetterIdenticon
}
return statusRoundedImageCmp
}
active: statusImageWithTitle.icon.isLetterIdenticon ||
!!statusImageWithTitle.image.source.toString()
}
Component {
id: statusLetterIdenticon
StatusLetterIdenticon {
width: statusImageWithTitle.icon.width
height: statusImageWithTitle.icon.height
color: statusImageWithTitle.icon.background.color
name: statusImageWithTitle.title
}
}
Component {
id: statusRoundedImageCmp
Item {
width: statusImageWithTitle.image.width
height: statusImageWithTitle.image.height
StatusRoundedImage {
id: statusRoundedImage
image.source: statusImageWithTitle.image.source
width: statusImageWithTitle.image.width
height: statusImageWithTitle.image.height
color: statusImageWithTitle.image.isIdenticon ?
Theme.palette.statusRoundedImage.backgroundColor :
"transparent"
border.width: statusImageWithTitle.image.isIdenticon ? 1 : 0
border.color: Theme.palette.directColor7
showLoadingIndicator: true
}
Loader {
sourceComponent: statusLetterIdenticon
active: statusRoundedImage.image.status === Image.Error
}
}
}
Column {
id: textLayout
width: !iconOrImage.active ? parent.width :
parent.width - iconOrImage.width - parent.spacing
Row {
id: headerTitleRow
width: parent.width
spacing: 4
StatusBaseText {
id: headerTitle
font.family: Theme.palette.baseFont.name
font.pixelSize: 17
font.bold: true
elide: statusImageWithTitle.titleElide
color: Theme.palette.directColor1
width: !editButton.visible ? parent.width :
parent.width - editButton.width - parent.spacing
}
StatusFlatRoundButton {
id: editButton
visible: statusImageWithTitle.editable
anchors.bottom: headerTitle.bottom
anchors.bottomMargin: -1
height: 24
width: 24
type: StatusFlatRoundButton.Type.Secondary
icon.name: "pencil"
icon.color: Theme.palette.directColor1
icon.width: 12.5
icon.height: 12.5
onClicked: statusImageWithTitle.editButtonClicked()
}
}
StatusBaseText {
id: headerSubTitle
font.family: Theme.palette.baseFont.name
font.pixelSize: 15
color:Theme.palette.baseColor1
width: parent.width
elide: statusImageWithTitle.subTitleElide
}
}
}
@@ -1,76 +0,0 @@
import QtQuick 2.14
import QtQuick.Layouts 1.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
import StatusQ.Popups 0.1
Rectangle {
id: statusModalFooter
property list<Item> leftButtons
property list<StatusBaseButton> rightButtons
radius: 8
color: Theme.palette.statusModal.backgroundColor
onLeftButtonsChanged: {
for (let idx in leftButtons) {
leftButtons[idx].parent = leftButtonsLayout
}
}
onRightButtonsChanged: {
for (let idx in rightButtons) {
rightButtons[idx].parent = rightButtonsLayout
}
}
implicitHeight: visible ? rootLayout.implicitHeight + 30 : 0
RowLayout {
id: rootLayout
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 16
anchors.rightMargin: 18
Row {
id: leftButtonsLayout
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
spacing: 16
}
Item {
Layout.fillWidth: true
implicitHeight: 1
}
Row {
id: rightButtonsLayout
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
spacing: 16
}
}
Rectangle {
anchors.top: parent.top
width: parent.width
height: parent.radius
color: parent.color
StatusModalDivider {
visible: (statusModalFooter.leftButtons.length || statusModalFooter.rightButtons.length) && rootLayout.height > 1
anchors.top: parent.top
width: parent.width
}
}
}
@@ -1,102 +0,0 @@
import QtQuick 2.14
import QtQuick.Layouts 1.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
import StatusQ.Popups 0.1
Rectangle {
id: statusModalHeader
property alias title: imageWithTitle.title
property alias subTitle: imageWithTitle.subTitle
property int titleElide
property int subTitleElide
property alias actionButton: actionButtonLoader.sourceComponent
property alias image: imageWithTitle.image
property alias icon: imageWithTitle.icon
property bool editable: false
property Component popupMenu
signal editButtonClicked
signal close
implicitHeight: visible? Math.max(closeButton.height, imageWithTitle.implicitHeight) + 32 : 0
implicitWidth: 480
radius: 16
color: Theme.palette.statusModal.backgroundColor
onPopupMenuChanged: {
if (!!popupMenu) {
popupMenuSlot.sourceComponent = popupMenu
}
}
StatusImageWithTitle {
id: imageWithTitle
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.right: actionButtonLoader.left
anchors.leftMargin: 16
editable: statusModalHeader.editable
titleElide: statusModalHeader.titleElide
subTitleElide: statusModalHeader.subTitleElide
onEditButtonClicked: statusModalHeader.editButtonClicked()
}
MouseArea {
anchors.fill: imageWithTitle
visible: !!statusModalHeader.popupMenu
cursorShape: Qt.PointingHandCursor
onClicked: {
popupMenuSlot.item.popup(imageWithTitle.x, imageWithTitle.y + imageWithTitle.height + 8)
}
}
Loader {
id: actionButtonLoader
anchors.right: closeButton.left
anchors.rightMargin: 8
anchors.top: parent.top
anchors.topMargin: 16
}
StatusFlatRoundButton {
id: closeButton
anchors.right: parent.right
anchors.rightMargin: 20
anchors.top: parent.top
anchors.topMargin: 16
width: 32
height: 32
type: StatusFlatRoundButton.Type.Secondary
icon.name: "close"
icon.color: Theme.palette.directColor1
icon.width: 20
icon.height: 20
onClicked: statusModalHeader.close()
}
Rectangle {
anchors.bottom: parent.bottom
width: parent.width
height: parent.radius
color: parent.color
StatusModalDivider {
anchors.bottom: parent.bottom
width: parent.width
}
}
Loader {
id: popupMenuSlot
active: !!statusModalHeader.popupMenu
}
}
-4
View File
@@ -1,4 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.5C17.2467 21.5 21.5 17.2467 21.5 12C21.5 6.75329 17.2467 2.5 12 2.5C6.75329 2.5 2.5 6.75329 2.5 12C2.5 17.2467 6.75329 21.5 12 21.5ZM12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23Z" fill="#939BA1"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.24014 16.1491C7.1427 16.5194 7.48062 16.8573 7.85093 16.7599L14.6218 14.9781C14.7961 14.9322 14.9322 14.7961 14.9781 14.6218L16.7599 7.85093C16.8573 7.48062 16.5194 7.1427 16.1491 7.24014L9.37823 9.02194C9.20394 9.06781 9.06781 9.20394 9.02194 9.37823L7.24014 16.1491ZM9.25791 14.3756C9.19944 14.5978 9.4022 14.8006 9.62438 14.7421L13.3938 13.7501C13.5681 13.7043 13.7043 13.5681 13.7501 13.3938L14.7421 9.62438C14.8006 9.4022 14.5978 9.19944 14.3756 9.25791L10.6062 10.2499C10.4319 10.2957 10.2957 10.4319 10.2499 10.6062L9.25791 14.3756Z" fill="#939BA1"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.0 KiB

-3
View File
@@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.26285 18.4743C7.26285 19.7317 6.24355 20.751 4.98618 20.751C3.7288 20.751 2.7095 19.7317 2.7095 18.4743C2.7095 17.2169 3.7288 16.1976 4.98618 16.1976C6.24355 16.1976 7.26285 17.2169 7.26285 18.4743ZM4.98618 22.251C6.81518 22.251 8.34052 20.9508 8.68838 19.2243H15.3116C15.6595 20.9508 17.1848 22.251 19.0138 22.251C21.0996 22.251 22.7905 20.5601 22.7905 18.4743C22.7905 16.3885 21.0996 14.6976 19.0138 14.6976C17.1848 14.6976 15.6595 15.9978 15.3116 17.7243H8.68838C8.34052 15.9978 6.81518 14.6976 4.98618 14.6976C2.90038 14.6976 1.2095 16.3885 1.2095 18.4743C1.2095 20.5601 2.90038 22.251 4.98618 22.251ZM21.2905 18.4743C21.2905 19.7317 20.2712 20.751 19.0138 20.751C17.7564 20.751 16.7371 19.7317 16.7371 18.4743C16.7371 17.2169 17.7564 16.1976 19.0138 16.1976C20.2712 16.1976 21.2905 17.2169 21.2905 18.4743ZM14.2767 5.5257C14.2767 6.78307 13.2574 7.80237 12 7.80237C10.7426 7.80237 9.72332 6.78307 9.72332 5.5257C9.72332 4.26832 10.7426 3.24902 12 3.24902C13.2574 3.24902 14.2767 4.26832 14.2767 5.5257ZM15.7767 5.5257C15.7767 6.68953 15.2502 7.73042 14.4225 8.4232L17.9099 14.8615C17.4208 15.0107 16.9739 15.2565 16.5914 15.5767L13.104 9.13846C12.7548 9.24503 12.3841 9.30237 12 9.30237C11.6159 9.30237 11.2452 9.24504 10.896 9.13846L7.40862 15.5767C7.02607 15.2565 6.57917 15.0107 6.09013 14.8615L9.57752 8.42321C8.74977 7.73042 8.22332 6.68954 8.22332 5.5257C8.22332 3.4399 9.91419 1.74902 12 1.74902C14.0858 1.74902 15.7767 3.4399 15.7767 5.5257Z" fill="#939BA1"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.6 KiB

-4
View File
@@ -1,4 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="8.125" y="6.5" width="2.5" height="11" rx="1.25" fill="black"/>
<rect x="13.375" y="6.5" width="2.5" height="11" rx="1.25" fill="black"/>
</svg>

Before

Width:  |  Height:  |  Size: 250 B

-3
View File
@@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 7.5224C8 6.3159 9.30206 5.59038 10.2858 6.24874L17.5201 11.0902C18.16 11.5185 18.16 12.4815 17.5201 12.9098L10.2858 17.7513C9.30206 18.4096 8 17.6841 8 16.4776V7.5224Z" fill="black"/>
</svg>

Before

Width:  |  Height:  |  Size: 339 B

-5
View File
@@ -1,5 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.75 9C15.75 11.0711 14.0711 12.75 12 12.75C9.92893 12.75 8.25 11.0711 8.25 9C8.25 6.92893 9.92893 5.25 12 5.25C14.0711 5.25 15.75 6.92893 15.75 9ZM14.25 9C14.25 10.2426 13.2426 11.25 12 11.25C10.7574 11.25 9.75 10.2426 9.75 9C9.75 7.75736 10.7574 6.75 12 6.75C13.2426 6.75 14.25 7.75736 14.25 9Z" fill="#939BA1"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12ZM21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5C17.2467 2.5 21.5 6.75329 21.5 12Z" fill="#939BA1"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.99199 16.3857L6.98744 16.39C6.68505 16.6731 6.6694 17.1477 6.95248 17.4501C7.23544 17.7523 7.70978 17.7681 8.01218 17.4854L8.01129 17.4862L8.02005 17.4783C8.02921 17.4702 8.04496 17.4563 8.06705 17.4376C8.11126 17.4002 8.18068 17.3436 8.27353 17.274C8.45962 17.1346 8.73733 16.9451 9.09253 16.7549C9.80556 16.3731 10.8085 16 12 16C13.1915 16 14.1944 16.3731 14.9075 16.7549C15.2627 16.9451 15.5404 17.1346 15.7265 17.274C15.8193 17.3436 15.8887 17.4002 15.933 17.4376C15.955 17.4563 15.9708 17.4702 15.98 17.4783L15.9887 17.4862C16.2911 17.7685 16.7647 17.7522 17.0475 17.4501C17.3306 17.1477 17.3149 16.6731 17.0126 16.39L17.0117 16.3892L17.0106 16.3882L17.008 16.3857L17.0008 16.3791L16.9782 16.3588C16.9597 16.3422 16.9341 16.3198 16.9016 16.2923C16.8367 16.2374 16.7442 16.1623 16.6259 16.0736C16.3897 15.8967 16.0482 15.6642 15.6156 15.4326C14.753 14.9707 13.5059 14.5 12 14.5C10.4941 14.5 9.24704 14.9707 8.38442 15.4326C7.95179 15.6642 7.61027 15.8967 7.37408 16.0736C7.25578 16.1623 7.1633 16.2374 7.0984 16.2923C7.06593 16.3198 7.04031 16.3422 7.02176 16.3588L6.99924 16.3791L6.99199 16.3857L6.98937 16.3882L6.98832 16.3892L6.99199 16.3857Z" fill="#939BA1"/>
</svg>

Before

Width:  |  Height:  |  Size: 2.0 KiB

-3
View File
@@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6192 18.1568L5.00164 20.8817C4.45399 21.1072 3.90948 20.553 4.14456 20.0094L11.3015 3.45893C11.422 3.18035 11.6965 3 12 3C12.3035 3 12.578 3.18035 12.6984 3.45893L19.8554 20.0094C20.0905 20.553 19.546 21.1072 18.9983 20.8817L12.3807 18.1568C12.1368 18.0563 11.8631 18.0564 11.6192 18.1568ZM11.25 16.4818C11.25 16.6096 11.1663 16.7211 11.0481 16.7698L7.47933 18.2393C7.06444 18.4101 6.65194 17.9903 6.83002 17.5785L10.7705 8.46607C10.8782 8.21695 11.25 8.29388 11.25 8.5653V16.4818ZM12.75 16.4818C12.75 16.6096 12.8337 16.7211 12.9519 16.7698L16.5206 18.2393C16.9355 18.4101 17.348 17.9903 17.1699 17.5785L13.2294 8.46607C13.1217 8.21695 12.75 8.29388 12.75 8.5653V16.4818Z" fill="#4360DF"/>
</svg>

Before

Width:  |  Height:  |  Size: 847 B

-4
View File
@@ -1,4 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4083 12C15.4083 13.8823 13.8824 15.4082 12 15.4082C10.1177 15.4082 8.5918 13.8823 8.5918 12C8.5918 10.1177 10.1177 8.59174 12 8.59174C13.8824 8.59174 15.4083 10.1177 15.4083 12ZM13.9083 12C13.9083 13.0539 13.0539 13.9082 12 13.9082C10.9461 13.9082 10.0918 13.0539 10.0918 12C10.0918 10.9461 10.9461 10.0917 12 10.0917C13.0539 10.0917 13.9083 10.9461 13.9083 12Z" fill="#939BA1"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2772 23H11.7228C10.8413 23 10.0666 22.4156 9.82441 21.568L9.3263 19.8247C9.22927 19.485 8.84755 19.3171 8.53163 19.4751L6.9006 20.2906C6.14049 20.6707 5.22247 20.5217 4.62156 19.9208L4.07924 19.3784C3.47832 18.7775 3.32935 17.8595 3.7094 17.0994L4.52491 15.4684C4.68287 15.1525 4.51495 14.7707 4.17534 14.6737L2.43196 14.1756C1.58437 13.9334 1 13.1587 1 12.2772V11.7228C1 10.8413 1.58437 10.0666 2.43196 9.82441L4.17534 9.3263C4.51495 9.22927 4.68287 8.84755 4.52491 8.53163L3.7094 6.9006C3.32935 6.14049 3.47832 5.22247 4.07924 4.62156L4.62156 4.07924C5.22247 3.47832 6.14049 3.32935 6.9006 3.7094L8.53163 4.52491C8.84755 4.68287 9.22927 4.51495 9.3263 4.17534L9.82441 2.43196C10.0666 1.58436 10.8413 1 11.7228 1H12.2772C13.1587 1 13.9334 1.58436 14.1756 2.43196L14.6737 4.17534C14.7707 4.51495 15.1525 4.68287 15.4684 4.52491L17.0994 3.7094C17.8595 3.32935 18.7775 3.47832 19.3784 4.07924L19.9208 4.62156C20.5217 5.22247 20.6707 6.14049 20.2906 6.9006L19.4751 8.53163C19.3171 8.84755 19.485 9.22927 19.8247 9.3263L21.568 9.82441C22.4156 10.0666 23 10.8413 23 11.7228V12.2772C23 13.1587 22.4156 13.9334 21.568 14.1756L19.8247 14.6737C19.485 14.7707 19.3171 15.1525 19.4751 15.4684L20.2906 17.0994C20.6707 17.8595 20.5217 18.7775 19.9208 19.3784L19.3784 19.9208C18.7775 20.5217 17.8595 20.6707 17.0994 20.2906L15.4684 19.4751C15.1525 19.3171 14.7707 19.485 14.6737 19.8247L14.1756 21.568C13.9334 22.4156 13.1587 23 12.2772 23ZM11.7228 21.5C11.511 21.5 11.3249 21.3596 11.2667 21.156L10.7686 19.4126C10.4135 18.1699 9.01678 17.5555 7.86081 18.1334L6.22978 18.949C6.04716 19.0403 5.82659 19.0045 5.68222 18.8601L5.1399 18.3178C4.99552 18.1734 4.95973 17.9528 5.05104 17.7702L5.86655 16.1392C6.44454 14.9832 5.8301 13.5865 4.58742 13.2314L2.84404 12.7333C2.6404 12.6751 2.5 12.489 2.5 12.2772V11.7228C2.5 11.511 2.6404 11.3249 2.84404 11.2667L4.58742 10.7686C5.83011 10.4135 6.44454 9.01678 5.86656 7.86081L5.05104 6.22978C4.95973 6.04716 4.99552 5.82659 5.1399 5.68222L5.68222 5.1399C5.82659 4.99552 6.04716 4.95973 6.22978 5.05104L7.86081 5.86655C9.01677 6.44454 10.4135 5.83011 10.7686 4.58742L11.2667 2.84404C11.3249 2.6404 11.511 2.5 11.7228 2.5H12.2772C12.489 2.5 12.6751 2.6404 12.7333 2.84404L13.2314 4.58742C13.5865 5.83011 14.9832 6.44454 16.1392 5.86655L17.7702 5.05104C17.9528 4.95973 18.1734 4.99552 18.3178 5.1399L18.8601 5.68222C19.0045 5.82659 19.0403 6.04716 18.949 6.22978L18.1334 7.86081C17.5555 9.01678 18.1699 10.4135 19.4126 10.7686L21.156 11.2667C21.3596 11.3249 21.5 11.511 21.5 11.7228V12.2772C21.5 12.489 21.3596 12.6751 21.156 12.7333L19.4126 13.2314C18.1699 13.5865 17.5555 14.9832 18.1334 16.1392L18.949 17.7702C19.0403 17.9528 19.0045 18.1734 18.8601 18.3178L18.3178 18.8601C18.1734 19.0045 17.9528 19.0403 17.7702 18.949L16.1392 18.1334C14.9832 17.5555 13.5865 18.1699 13.2314 19.4126L12.7333 21.156C12.6751 21.3596 12.489 21.5 12.2772 21.5H11.7228Z" fill="#939BA1"/>
</svg>

Before

Width:  |  Height:  |  Size: 3.4 KiB

@@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23ZM12 21.5C10.3571 21.5 9.02523 20.1682 9.02523 18.5252C9.02523 16.8823 10.3571 15.5505 12 15.5505C13.6429 15.5505 14.9748 16.8823 14.9748 18.5252C14.9748 20.1682 13.6429 21.5 12 21.5ZM7.11258 18.6751C7.22604 18.8718 7.52523 18.7523 7.52523 18.5252C7.52523 16.0539 9.52865 14.0505 12 14.0505C14.4713 14.0505 16.4748 16.0539 16.4748 18.5252C16.4748 18.7523 16.774 18.8718 16.8874 18.6751C17.3651 17.847 17.6385 16.8862 17.6385 15.8615C17.6385 12.7475 15.114 10.2231 12 10.2231C8.88597 10.2231 6.36154 12.7475 6.36154 15.8615C6.36154 16.8862 6.63487 17.847 7.11258 18.6751ZM19.0483 16.9992C18.9783 17.4359 19.5498 17.784 19.8025 17.421C20.8726 15.8836 21.5 14.0151 21.5 12C21.5 6.75329 17.2467 2.5 12 2.5C6.75329 2.5 2.5 6.75329 2.5 12C2.5 14.0151 3.1274 15.8836 4.19751 17.421C4.45018 17.784 5.02165 17.4359 4.95171 16.9992C4.89237 16.6287 4.86154 16.2487 4.86154 15.8615C4.86154 11.9191 8.05754 8.72308 12 8.72308C15.9425 8.72308 19.1385 11.9191 19.1385 15.8615C19.1385 16.2487 19.1076 16.6287 19.0483 16.9992Z" fill="#939BA1"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

-4
View File
@@ -1,4 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="8.125" y="6.5" width="2.5" height="11" rx="1.25" fill="black"/>
<rect x="13.375" y="6.5" width="2.5" height="11" rx="1.25" fill="black"/>
</svg>

Before

Width:  |  Height:  |  Size: 250 B

-4
View File
@@ -1,4 +0,0 @@
<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.100954 12.5959L0.798362 9.80623C0.830588 9.67733 0.871226 9.55116 0.919852 9.42847C0.981714 9.27239 1.18145 9.24231 1.30017 9.36102L3.63897 11.6998C3.75769 11.8185 3.7276 12.0183 3.57152 12.0801C3.44883 12.1288 3.32266 12.1694 3.19376 12.2016L0.404123 12.899C0.221028 12.9448 0.0551798 12.779 0.100954 12.5959Z" fill="black"/>
<path d="M4.32312 10.2627C4.71364 10.6532 5.34681 10.6532 5.73733 10.2627L12.2928 3.7072C12.6833 3.31668 12.6833 2.68351 12.2928 2.29299L10.707 0.7072C10.3165 0.316676 9.68332 0.316675 9.29279 0.707199L2.73733 7.26266C2.34681 7.65318 2.34681 8.28635 2.73733 8.67687L4.32312 10.2627Z" fill="black"/>
</svg>

Before

Width:  |  Height:  |  Size: 741 B

-3
View File
@@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 7.5224C8 6.3159 9.30206 5.59038 10.2858 6.24874L17.5201 11.0902C18.16 11.5185 18.16 12.4815 17.5201 12.9098L10.2858 17.7513C9.30206 18.4096 8 17.6841 8 16.4776V7.5224Z" fill="black"/>
</svg>

Before

Width:  |  Height:  |  Size: 339 B

+3 -2
View File
@@ -1,4 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4083 12C15.4083 13.8823 13.8824 15.4082 12 15.4082C10.1177 15.4082 8.5918 13.8823 8.5918 12C8.5918 10.1177 10.1177 8.59174 12 8.59174C13.8824 8.59174 15.4083 10.1177 15.4083 12ZM13.9083 12C13.9083 13.0539 13.0539 13.9082 12 13.9082C10.9461 13.9082 10.0918 13.0539 10.0918 12C10.0918 10.9461 10.9461 10.0917 12 10.0917C13.0539 10.0917 13.9083 10.9461 13.9083 12Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2772 23H11.7228C10.8413 23 10.0666 22.4156 9.82441 21.568L9.3263 19.8247C9.22927 19.485 8.84755 19.3171 8.53163 19.4751L6.9006 20.2906C6.14049 20.6707 5.22247 20.5217 4.62156 19.9208L4.07924 19.3784C3.47832 18.7775 3.32935 17.8595 3.7094 17.0994L4.52491 15.4684C4.68287 15.1525 4.51495 14.7707 4.17534 14.6737L2.43196 14.1756C1.58437 13.9334 1 13.1587 1 12.2772V11.7228C1 10.8413 1.58437 10.0666 2.43196 9.82441L4.17534 9.3263C4.51495 9.22927 4.68287 8.84755 4.52491 8.53163L3.7094 6.9006C3.32935 6.14049 3.47832 5.22247 4.07924 4.62156L4.62156 4.07924C5.22247 3.47832 6.14049 3.32935 6.9006 3.7094L8.53163 4.52491C8.84755 4.68287 9.22927 4.51495 9.3263 4.17534L9.82441 2.43196C10.0666 1.58436 10.8413 1 11.7228 1H12.2772C13.1587 1 13.9334 1.58436 14.1756 2.43196L14.6737 4.17534C14.7707 4.51495 15.1525 4.68287 15.4684 4.52491L17.0994 3.7094C17.8595 3.32935 18.7775 3.47832 19.3784 4.07924L19.9208 4.62156C20.5217 5.22247 20.6707 6.14049 20.2906 6.9006L19.4751 8.53163C19.3171 8.84755 19.485 9.22927 19.8247 9.3263L21.568 9.82441C22.4156 10.0666 23 10.8413 23 11.7228V12.2772C23 13.1587 22.4156 13.9334 21.568 14.1756L19.8247 14.6737C19.485 14.7707 19.3171 15.1525 19.4751 15.4684L20.2906 17.0994C20.6707 17.8595 20.5217 18.7775 19.9208 19.3784L19.3784 19.9208C18.7775 20.5217 17.8595 20.6707 17.0994 20.2906L15.4684 19.4751C15.1525 19.3171 14.7707 19.485 14.6737 19.8247L14.1756 21.568C13.9334 22.4156 13.1587 23 12.2772 23ZM11.7228 21.5C11.511 21.5 11.3249 21.3596 11.2667 21.156L10.7686 19.4126C10.4135 18.1699 9.01678 17.5555 7.86081 18.1334L6.22978 18.949C6.04716 19.0403 5.82659 19.0045 5.68222 18.8601L5.1399 18.3178C4.99552 18.1734 4.95973 17.9528 5.05104 17.7702L5.86655 16.1392C6.44454 14.9832 5.8301 13.5865 4.58742 13.2314L2.84404 12.7333C2.6404 12.6751 2.5 12.489 2.5 12.2772V11.7228C2.5 11.511 2.6404 11.3249 2.84404 11.2667L4.58742 10.7686C5.83011 10.4135 6.44454 9.01678 5.86656 7.86081L5.05104 6.22978C4.95973 6.04716 4.99552 5.82659 5.1399 5.68222L5.68222 5.1399C5.82659 4.99552 6.04716 4.95973 6.22978 5.05104L7.86081 5.86655C9.01677 6.44454 10.4135 5.83011 10.7686 4.58742L11.2667 2.84404C11.3249 2.6404 11.511 2.5 11.7228 2.5H12.2772C12.489 2.5 12.6751 2.6404 12.7333 2.84404L13.2314 4.58742C13.5865 5.83011 14.9832 6.44454 16.1392 5.86655L17.7702 5.05104C17.9528 4.95973 18.1734 4.99552 18.3178 5.1399L18.8601 5.68222C19.0045 5.82659 19.0403 6.04716 18.949 6.22978L18.1334 7.86081C17.5555 9.01678 18.1699 10.4135 19.4126 10.7686L21.156 11.2667C21.3596 11.3249 21.5 11.511 21.5 11.7228V12.2772C21.5 12.489 21.3596 12.6751 21.156 12.7333L19.4126 13.2314C18.1699 13.5865 17.5555 14.9832 18.1334 16.1392L18.949 17.7702C19.0403 17.9528 19.0045 18.1734 18.8601 18.3178L18.3178 18.8601C18.1734 19.0045 17.9528 19.0403 17.7702 18.949L16.1392 18.1334C14.9832 17.5555 13.5865 18.1699 13.2314 19.4126L12.7333 21.156C12.6751 21.3596 12.489 21.5 12.2772 21.5H11.7228Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 13C13.933 13 15.5 11.433 15.5 9.5C15.5 7.567 13.933 6 12 6C10.067 6 8.5 7.567 8.5 9.5C8.5 11.433 10.067 13 12 13ZM12 11.5C13.1046 11.5 14 10.6046 14 9.5C14 8.39543 13.1046 7.5 12 7.5C10.8954 7.5 10 8.39543 10 9.5C10 10.6046 10.8954 11.5 12 11.5Z" fill="black"/>
<path d="M16.4465 16.2731C16.8119 16.5572 16.822 17.0954 16.4657 17.3909C16.1611 17.6435 15.723 17.6 15.4043 17.3655C14.4513 16.6643 13.2741 16.25 12.0002 16.25C10.7262 16.25 9.54901 16.6643 8.59597 17.3655C8.27728 17.6 7.83919 17.6435 7.53463 17.3909C7.17828 17.0954 7.18836 16.5572 7.55383 16.2731C8.78161 15.3185 10.3245 14.75 12.0002 14.75C13.6758 14.75 15.2187 15.3185 16.4465 16.2731Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5Z" fill="black"/>
</svg>

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

+3 -2
View File
@@ -1,3 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 10.7149C2 9.17362 3.16788 7.88312 4.70149 7.72976L8.33775 7.36613C10.7589 7.12402 13.1156 6.44212 15.292 5.35393L19.1056 3.44712C20.4354 2.78222 22 3.74921 22 5.23598V16.7638C22 18.2506 20.4354 19.2176 19.1056 18.5527L15.292 16.6459C14.6768 16.3383 14.0473 16.0632 13.406 15.8213C13.0859 15.7006 12.75 15.9414 12.75 16.2836V18.5C12.75 19.7426 11.7426 20.75 10.5 20.75H10C7.92893 20.75 6.25 19.0711 6.25 17V14.8774C6.25 14.6205 6.05535 14.4054 5.79975 14.3799L4.70149 14.2701C3.16789 14.1167 2 12.8262 2 11.2849V10.7149ZM20.5 5.23598V16.7638C20.5 17.1355 20.1088 17.3773 19.7764 17.2111L15.9628 15.3042C13.6232 14.1345 11.0898 13.4014 8.48701 13.1411L4.85075 12.7775C4.08394 12.7008 3.5 12.0556 3.5 11.2849V10.7149C3.5 9.94424 4.08394 9.299 4.85074 9.22232L8.48701 8.85869C11.0898 8.59841 13.6232 7.86537 15.9628 6.69558L19.7764 4.78877C20.1088 4.62254 20.5 4.86429 20.5 5.23598ZM8.29975 14.6299C8.00541 14.6005 7.75 14.8316 7.75 15.1274V17C7.75 18.2426 8.75736 19.25 10 19.25H10.5C10.9142 19.25 11.25 18.9142 11.25 18.5V15.5339C11.25 15.3049 11.0947 15.1046 10.8717 15.0528C10.0384 14.8593 9.19211 14.7191 8.33775 14.6337L8.29975 14.6299Z" fill="black"/>
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.82051 5.10748C10.148 4.98152 10.5 5.22326 10.5 5.57415V11.4259C10.5 11.7768 10.148 12.0185 9.8205 11.8925L8.20145 11.2698C8.01814 11.1993 7.8324 11.1356 7.6446 11.0788C7.38272 10.9996 7.11478 11.164 7.04842 11.4294L6.66417 12.9664C6.36119 14.1784 4.63882 14.1784 4.33583 12.9664L3.74837 10.6166C3.70074 10.4261 3.54598 10.2811 3.35275 10.2459L2.82112 10.1493C2.34563 10.0628 2 9.64869 2 9.16541V7.83456C2 7.35127 2.34562 6.93714 2.82111 6.85069L6.76064 6.13441C7.25246 6.04499 7.73482 5.90967 8.20139 5.73022L9.82051 5.10748Z" fill="black"/>
<path d="M12.3205 12.8541C12.1274 12.7798 12 12.5943 12 12.3874V4.61261C12 4.40573 12.1274 4.22021 12.3205 4.14594L12.641 4.02267C13.296 3.77074 14 4.25423 14 4.95601V12.0441C14 12.7458 13.296 13.2293 12.641 12.9774L12.3205 12.8541Z" fill="black"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 906 B

-10
View File
@@ -1,10 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 6.26471C3 5.84237 3.33579 5.5 3.75 5.5H10.5C10.9142 5.5 11.25 5.84237 11.25 6.26471C11.25 6.68704 10.9142 7.02941 10.5 7.02941H3.75C3.33579 7.02941 3 6.68704 3 6.26471Z" fill="black"/>
<path d="M13 6.26471C13 5.84237 13.3358 5.5 13.75 5.5H20.25C20.6642 5.5 21 5.84237 21 6.26471C21 6.68704 20.6642 7.02941 20.25 7.02941H13.75C13.3358 7.02941 13 6.68704 13 6.26471Z" fill="black"/>
<path d="M16 10.0882C16 9.6659 16.3358 9.32353 16.75 9.32353H20.25C20.6642 9.32353 21 9.6659 21 10.0882C21 10.5106 20.6642 10.8529 20.25 10.8529H16.75C16.3358 10.8529 16 10.5106 16 10.0882Z" fill="black"/>
<path d="M8 13.9118C8 13.4894 7.66421 13.1471 7.25 13.1471H3.75C3.33579 13.1471 3 13.4894 3 13.9118C3 14.3341 3.33579 14.6765 3.75 14.6765H7.25C7.66421 14.6765 8 14.3341 8 13.9118Z" fill="black"/>
<path d="M3 10.0882C3 9.6659 3.33579 9.32353 3.75 9.32353H13.5C13.9142 9.32353 14.25 9.6659 14.25 10.0882C14.25 10.5106 13.9142 10.8529 13.5 10.8529H3.75C3.33579 10.8529 3 10.5106 3 10.0882Z" fill="black"/>
<path d="M21 13.9118C21 13.4894 20.6642 13.1471 20.25 13.1471H10.5C10.0858 13.1471 9.75 13.4894 9.75 13.9118C9.75 14.3341 10.0858 14.6765 10.5 14.6765H20.25C20.6642 14.6765 21 14.3341 21 13.9118Z" fill="black"/>
<path d="M3 17.7353C3 17.313 3.33579 16.9706 3.75 16.9706H10.5C10.9142 16.9706 11.25 17.313 11.25 17.7353C11.25 18.1576 10.9142 18.5 10.5 18.5H3.75C3.33579 18.5 3 18.1576 3 17.7353Z" fill="black"/>
<path d="M13 17.7353C13 17.313 13.3358 16.9706 13.75 16.9706H20.25C20.6642 16.9706 21 17.313 21 17.7353C21 18.1576 20.6642 18.5 20.25 18.5H13.75C13.3358 18.5 13 18.1576 13 17.7353Z" fill="black"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.7 KiB

-6
View File
@@ -1,6 +0,0 @@
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.45117 12.354C7.45117 9.59258 9.68975 7.354 12.4512 7.354H68.5677C71.3291 7.354 73.5677 9.59258 73.5677 12.354V68.3888C73.5677 71.1502 71.3291 73.3888 68.5677 73.3888H12.4512C9.68975 73.3888 7.45117 71.1502 7.45117 68.3888V12.354Z" fill="#4360DF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M40.5094 7.35449C22.2517 7.35396 7.45117 22.1359 7.45117 40.3714C7.45117 58.6068 22.2517 73.3888 40.5094 73.3888C58.7672 73.3888 73.5677 58.6062 73.5677 40.3714C73.5677 22.1365 58.7672 7.35449 40.5094 7.35449Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M46.0856 40.0664C42.1234 40.2945 39.6403 39.3727 35.6776 39.6012C34.6948 39.6564 33.7187 39.7986 32.761 40.0264C33.3459 32.7072 38.5323 26.3046 45.5849 25.8976C49.9129 25.6482 54.2387 28.317 54.4733 32.6495C54.7042 36.9078 51.4533 39.7567 46.0861 40.0659L46.0856 40.0664ZM35.4456 55.0375C31.2995 55.2714 27.156 52.773 26.931 48.7187C26.7097 44.7333 29.8247 42.0671 34.9663 41.7777C38.7616 41.564 41.1407 42.4271 44.936 42.2129C45.8771 42.1614 46.8119 42.0283 47.73 41.8151C47.1707 48.6647 42.2023 54.6572 35.4456 55.0375ZM40.5094 7.35454C22.2517 7.354 7.45117 22.136 7.45117 40.3714C7.45117 58.6068 22.2517 73.3888 40.5094 73.3888C58.7672 73.3888 73.5677 58.6063 73.5677 40.3714C73.5677 22.1365 58.7672 7.354 40.5094 7.354" fill="#4360DF"/>
<path d="M12.4512 14.354H68.5677V0.354004H12.4512V14.354ZM66.5677 12.354V68.3888H80.5677V12.354H66.5677ZM68.5677 66.3888H12.4512V80.3888H68.5677V66.3888ZM14.4512 68.3888V12.354H0.451172V68.3888H14.4512ZM12.4512 66.3888C13.5557 66.3888 14.4512 67.2842 14.4512 68.3888H0.451172C0.451172 75.0162 5.82376 80.3888 12.4512 80.3888V66.3888ZM66.5677 68.3888C66.5677 67.2842 67.4631 66.3888 68.5677 66.3888V80.3888C75.1951 80.3888 80.5677 75.0162 80.5677 68.3888H66.5677ZM68.5677 14.354C67.4631 14.354 66.5677 13.4586 66.5677 12.354H80.5677C80.5677 5.72658 75.1951 0.354004 68.5677 0.354004V14.354ZM12.4512 0.354004C5.82376 0.354004 0.451172 5.72658 0.451172 12.354H14.4512C14.4512 13.4586 13.5557 14.354 12.4512 14.354V0.354004Z" fill="white"/>
</svg>

Before

Width:  |  Height:  |  Size: 2.1 KiB

-3
View File
@@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.9468 9.04834C19.9468 6.46289 18.2915 4.34619 16.1675 4.34619H13.7578C12.769 3.84082 11.5972 3.54785 10.3081 3.54785H9.28271C8.33057 3.54785 7.51758 3.60645 6.99023 3.73828C5.91357 4.00195 5.23242 4.771 5.23242 5.73047C5.23242 5.89893 5.26172 6.06006 5.30566 6.21387C4.80029 6.60938 4.51465 7.18066 4.51465 7.81055C4.51465 8.10352 4.57324 8.38916 4.67578 8.63086C4.33887 8.98975 4.14111 9.50977 4.14111 10.0444C4.14111 10.396 4.229 10.7549 4.37549 11.0332C4.17041 11.3408 4.05322 11.7583 4.05322 12.2197C4.05322 13.3916 4.94678 14.2925 6.104 14.2925H8.82861C8.98242 14.2925 9.08496 14.3657 9.07764 14.5049C9.04102 15.2593 7.85449 17.0757 7.85449 18.5625C7.85449 19.6538 8.62354 20.4521 9.68555 20.4521C10.4546 20.4521 10.9819 20.0493 11.4873 19.0898C12.4028 17.332 13.5015 15.7939 15.1348 13.7798H16.4458C18.438 13.7798 19.9468 11.6777 19.9468 9.04834ZM15.3838 9.10693C15.3838 10.6597 15.0396 11.6484 14.0435 12.9814C12.9375 14.4609 11.3994 16.248 10.2935 18.46C10.0591 18.9214 9.89795 19.0312 9.6709 19.0312C9.39258 19.0312 9.20947 18.8335 9.20947 18.4819C9.20947 17.3979 10.4473 15.5815 10.4473 14.3877C10.4473 13.5088 9.73682 12.9375 8.77002 12.9375H6.14062C5.71582 12.9375 5.40088 12.6226 5.40088 12.1978C5.40088 11.8975 5.50342 11.6997 5.75244 11.4507C5.94287 11.2529 5.97217 10.9746 5.80371 10.7842C5.59131 10.4839 5.50342 10.2935 5.50342 10.0444C5.50342 9.74414 5.64258 9.48779 5.93555 9.26807C6.18457 9.09229 6.27246 8.79199 6.12598 8.49902C5.97217 8.20605 5.8916 8.05225 5.8916 7.8252C5.8916 7.47363 6.11865 7.20264 6.57275 6.96094C6.81445 6.8291 6.88037 6.57275 6.77783 6.33838C6.62402 5.96484 6.60205 5.89893 6.60938 5.73779C6.60938 5.42285 6.83643 5.17383 7.32715 5.04932C7.75928 4.93945 8.44775 4.89551 9.35596 4.90283L10.3008 4.91016C13.333 4.93945 15.3838 6.63867 15.3838 9.10693ZM18.6211 9.04834C18.6211 10.9087 17.6616 12.3955 16.563 12.4395C16.3726 12.4468 16.1821 12.4468 15.9917 12.4468C16.5117 11.4287 16.7388 10.374 16.7388 9.10693C16.7388 7.75928 16.27 6.57275 15.4204 5.64258C15.6914 5.64258 15.9697 5.6499 16.248 5.6499C17.5298 5.70117 18.6211 7.20264 18.6211 9.04834Z" fill="black"/>
</svg>

Before

Width:  |  Height:  |  Size: 2.2 KiB

-3
View File
@@ -1,3 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.05322 14.9517C4.05322 17.5371 5.7085 19.6538 7.83252 19.6538H10.2422C11.231 20.1592 12.4028 20.4521 13.6919 20.4521H14.7173C15.6694 20.4521 16.4824 20.3936 17.0098 20.2617C18.0864 19.9907 18.7676 19.229 18.7676 18.2695C18.7676 18.0938 18.7456 17.9399 18.6943 17.7788C19.1997 17.3906 19.4854 16.812 19.4854 16.1821C19.4854 15.8892 19.4268 15.6035 19.3242 15.3618C19.6611 15.0029 19.8589 14.4902 19.8589 13.9556C19.8589 13.5967 19.771 13.2451 19.6245 12.9668C19.8296 12.6519 19.9468 12.2344 19.9468 11.7803C19.9468 10.6084 19.0532 9.70752 17.896 9.70752H15.1714C15.0176 9.70752 14.915 9.63428 14.9224 9.49512C14.959 8.7334 16.1455 6.92432 16.1455 5.4375C16.1455 4.34619 15.3765 3.54785 14.3145 3.54785C13.5454 3.54785 13.0181 3.95068 12.5127 4.91016C11.6045 6.66797 10.4985 8.20605 8.86523 10.2129H7.5542C5.56201 10.2129 4.05322 12.3223 4.05322 14.9517ZM8.61621 14.8931C8.61621 13.3403 8.96045 12.3442 9.95654 11.0186C11.0625 9.53174 12.6006 7.75195 13.7065 5.54004C13.9409 5.07861 14.1021 4.96143 14.3364 4.96143C14.6147 4.96143 14.7979 5.1665 14.7979 5.51807C14.7979 6.60205 13.5527 8.41846 13.5527 9.60498C13.5527 10.4912 14.2632 11.0552 15.23 11.0552H17.8594C18.2842 11.0552 18.5991 11.3774 18.5991 11.8022C18.5991 12.1025 18.5039 12.3003 18.2476 12.5493C18.0571 12.7397 18.0278 13.0181 18.1963 13.2158C18.4087 13.5088 18.4966 13.7065 18.4966 13.9556C18.4966 14.2559 18.3574 14.5122 18.0645 14.7246C17.8154 14.9077 17.7275 15.2007 17.874 15.4937C18.0278 15.7939 18.1084 15.9404 18.1084 16.1748C18.1084 16.5264 17.8813 16.79 17.4272 17.0317C17.1855 17.1636 17.1196 17.4272 17.2222 17.6543C17.376 18.0278 17.3979 18.1011 17.3906 18.2622C17.3906 18.5771 17.1636 18.8262 16.6729 18.9507C16.2407 19.0532 15.5522 19.1045 14.644 19.0972L13.6992 19.0898C10.667 19.0605 8.61621 17.354 8.61621 14.8931ZM5.38623 14.9517C5.38623 13.0913 6.33838 11.6045 7.43701 11.5532C7.62744 11.5532 7.81787 11.5532 8.0083 11.5532C7.48828 12.564 7.26123 13.626 7.26123 14.8931C7.26123 16.2407 7.72998 17.4272 8.58691 18.3501C8.31592 18.3501 8.03027 18.3501 7.75195 18.3501C6.47021 18.2988 5.38623 16.79 5.38623 14.9517Z" fill="black"/>
</svg>

Before

Width:  |  Height:  |  Size: 2.2 KiB

@@ -1,3 +0,0 @@
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.70801 5L10 9.29199L9.29199 10L5 5.70801L0.708008 10L0 9.29199L4.29199 5L0 0.708008L0.708008 0L5 4.29199L9.29199 0L10 0.708008L5.70801 5Z" fill="black"/>
</svg>

Before

Width:  |  Height:  |  Size: 268 B

Some files were not shown because too many files have changed in this diff Show More