Commit Graph

79 Commits

Author SHA1 Message Date
Pascal Precht 9389ee256e feat(StatusQ.Controls): introduce `StatusAccountSelector` component
This commit moves the original `AccountSelector` into StatusQ and makes it
a `StatusAccountSelector`. The API has been preserved. The only difference is
that it's internally relying completely on `StatusQ.Core.Theme` and `StatusQ.Controls`
components instead.

Usage:

```qml
import StatusQ.Controls 0.1

StatusAccountSelector {
    accounts: ListModel {
        ListElement {
            name: "Pascal"
            address: "0x1234567891011"
            iconColor: "red"
            balance: "0"
            walletType: "generated"
            assets: []
            fiatBalance: "1199.02"
        }
        ListElement {
            name: "Boris"
            address: "0x123"
            iconColor: "red"
            balance: "0"
            walletType: "generated"
            assets: []
            fiatBalance: "0"
        }
        ListElement {
            name: "Alexandra"
            address: "0x123"
            iconColor: "yellow"
            balance: "0"
            walletType: "generated"
            assets: []
            fiatBalance: "0"
        }
        ListElement {
            name: "Khushboo"
            address: "0x123"
            iconColor: "blue"
            balance: "0"
            walletType: "generated"
            assets: []
            fiatBalance: "0"
        }
    }
}
```

Closes #435
2022-09-21 18:20:06 +02:00
Pascal Precht 03c6da6e9f feat(StatusQ.Controls): introduce `StatusSelect`
This introduces a new `StatusSelect` component which is a select form control.
The `model` property can be used to apply a `ListModel` for dynamic data.
To give users full control over what the menu items look like, `StatusSelect`
exposes a `selectMenu.delegate` property.

Most of the time this should be a `StatusMenuItemDelegate` to get access to the
comple `MenuItem` component (remember that `StatusMenuItem` is merely an `Action`
type).

`StatusMenuItemDelegate` derives most of its behaviour by its applied `action`,
so the easiest way to construct a dynamic select with StatusQ menu item look and feel
is a combination of `StatusMenuItemDelegate` and `StatusMenuItem` as shown below.

Further more, because `StatusSelect` can't know what the `delegate` is going to look like
it also can't decide what data goes into a `selectedItem`. Therefore, it offers another API,
the `selectedItemComponent` which can be any component. This component can then be accessed
by menu item actions to set corresponding properties.

Usage:

```qml
import StatusQ.Controls 0.1

StatusSelect {
    label: "Some label"
    model: ListModel {
        ListElement {
            name: "Pascal"
        }
        ListElement {
            name: "Khushboo"
        }
        ListElement {
            name: "Alexandra"
        }
        ListElement {
            name: "Eric"
        }
    }

    selectMenu.delegate: StatusMenuItemDelegate {
        statusPopupMenu: select
        action: StatusMenuItem {
            iconSettings.name: "filled-account"
            text: name
            onTriggered: {
                selectedItem.text = name
            }
        }
    }

    selectedItemComponent: Item {
        id: selectedItem
        anchors.fill: parent
        property string text: ""

        StatusBaseText {
            text: selectedItem.text
            anchors.centerIn: parent
            color: Theme.palette.directColor1
        }
    }
}
```

Closes #436
2022-09-21 18:20:06 +02:00
Khushboo Mehta 5c5d782605 feat(StatusExpandableItem): Refactored the StatusExpandableSettingsItem to support different types
Renamed StatusExpandableSettingsItem to StatusExpandableItem.
Added support for dofferent types of styles for the item.
Type Primary: Relates to Settings Design
Type Secondary: Relates to Collectibles Design
Type Tertiary: Relates to the Collectibles detailed view design

BREAKING CHANGE: Renamed and expanded features of the  StatusExpandableSettingsItem to StatusExpandableItem
2022-09-21 18:20:03 +02:00
Khushboo Mehta 1398b3c9d5 feat(StatusExpandableSettingsItem): Added new component for wallet settings
Also added a page in the sandbox to demonstrate its usage.
2022-09-21 18:20:03 +02:00
Pascal Precht 4c661109c6 feat(StatusQ.Controls): introduce StatusSwitchTabBar and StatusSwitchTabButton
This commit adds two new components to the StatusQ.Controls module:

- StatusSwitchTabBar
- StatusSwitchTabButton

Usage:

```qml
StatusSwitchTabBar {

    StatusSwitchTabButton {
        text: "Tab 1"
    }

    StatusSwitchTabButton {
        text: "Tab 2"
    }

    StatusSwitchTabButton {
        text: "Tab 3"
    }
}
```

Closes #365
2022-09-21 18:20:03 +02:00
B.Melnik aec06b41d4 feat(StatusWindowsTitleBar): Add windows title bar
Closes: #200
2022-09-21 18:20:03 +02:00
Pascal Precht 567dab012e chore(sandbox): make app wider due to minimum layout width
There have been minimum layout widths introduced lately which break the
sandbox app's UI. This commit makes it wider by default so this doesn't happen
2022-09-21 18:20:03 +02:00
Pascal Precht 9945454a5d chore(sandbox): introduce StatusInputPage 2022-09-21 18:20:03 +02:00
Alexandra Betouni dd23ef2990 [#202] Added Picker button
Adding picker button
* As an example it opens Qt's ColorDialog, as soon as
  a color is selected there, the button is colored
  with that. Final color picker to be implemented in
  a seperate task.

Also minor improvements in main.qml and sandbox.pro

Closes #202
2022-09-21 18:20:03 +02:00
B.Melnik eab95c1c7b feat(Popups): Add StatusModal 2022-09-21 18:20:02 +02:00
Pascal Precht 2a7c3aded7 feat(Components): introduce `StatusListSectionHeadline`
Usage:

```qml
import StatusQ.Components 0.1

StatusListSectionHeadline {
    text: "Settings"
}
```

Closes #164
2022-09-21 18:20:02 +02:00
Pascal Precht f2de2642ac feat(Components): introduce `StatusChatInfoToolBar` component
Usage:

```qml
import StatusQ.Components 0.1

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"
        }
    }
}
```

Closes #141
2022-09-21 18:20:02 +02:00
Pascal Precht 524eb14512 Revert "Revert "feat: can be used on tablets (#146)""
This reverts commit 59b40c0713a9a41bd95bff0f395a796c69e46fa6.
2022-09-21 18:20:02 +02:00
Pascal Precht 9bf98a1ede Revert "feat: can be used on tablets (#146)"
This reverts commit 63be01447930494f2afc61d5212f3c84ee1509e8.
2022-09-21 18:20:02 +02:00
Boris Melnik 7e9a76dbe7 feat: can be used on tablets (#146)
Co-authored-by: B.Melnik <b.melnik@restream.rt.ru>
2022-09-21 18:20:02 +02:00
Pascal Precht 82643816f6 feat(StatusQ.Popups): introduce StatusPopupMenu component
Usage:

```qml
import StatusQ.Popups 0.1

Button {
    onClicked: simpleMenu.popup()
}

StatusPopupMenu {
    id: simpleMenu
    StatusMenuItem {
        text: "One"
    }

    StatusMenuItem {
        text: "Two"
    }

    StatusMenuItem {
        text: "Three"
    }
}
```

Closes #96 #74
2022-09-21 18:20:02 +02:00
Pascal Precht aecbb443de chore: re-introduce reload button 2022-09-21 18:20:02 +02:00
B.Melnik 1acc248c79 fix: update position of window to center, add traffic lights 2022-09-21 18:20:02 +02:00
Pascal Precht 4e25f584cc feat(sandbox): introduce first version of reference app
This reference app serves as a dogfooding ground for StatusQ components.
2022-09-21 18:20:02 +02:00
Pascal Precht cea1d68308 refactor(sandbox): make use of StatusQ to layout sandbox app
Closes #41
2022-09-21 18:20:02 +02:00
Pascal Precht fcb6847cc9 feat(Components): introduce `StatusListItem` component
This introduces a base list item component that is used in many different
places across Status Desktop. The component is configurable and allows for
child component customization.

Usage:

```qml
StatusListItem {
    title: "Title"
}

StatusListItem {
    title: "Title"
    subTitle: "Subtitle"
}

StatusListItem {
    title: "Title"
    subTitle: "Subtitle"
    icon.name: "info"
}

StatusListItem {
    title: "Title"
    subTitle: "Subtitle"
    image.source: "..."
}

StatusListItem {
    title: "Title"
    subTitle: "Subtitle"
    image.source: "..."
    label: "Some label"
}

StatusListItem {
    title: "Title"
    subTitle: "Subtitle"
    icon.name: "info"
    label: "Some label"
    components: [
        StatusButton {
            text: "Button"
            size: StatusBaseButton.Size.Small
        }
        ...
    ]
}
```

Closes #19
2022-09-21 18:20:02 +02:00
Pascal Precht efb34ee85a fix(sandbox): make scrollview content height grow with content
This is just temporary until #40 lands, but for now it allows for
the scrollable content to be grow which is needed to make pages
with many components usable.
2022-09-21 18:20:02 +02:00
Pascal Precht 9f6f36f571 refactor(sandbox): rely on global `Theme` instead of theme prop 2022-09-21 18:20:02 +02:00
B.Melnik 8fdd4f7e20 fix: fix crash on removing title bar 2022-09-21 18:20:02 +02:00
Pascal Precht a1e721bfc3 feat(Layout): introduce StatusAppNavBar
This commit introduces a new `StatusAppNavBar` component that can be used
to create a Status application's tab bar for dedicated tab sections such as
chat, profile, wallet etc.

The component is build in a way that it support declarative and imperative usage
where necessary.

In its most simple form, a `StatusAppNavBar` comes with a single tab button
for the chat section. Such button has to be of type `StatusNavBarTabButton`:

```qml
import StatusQ.Layout 0.1

StatusAppNavBar {
    navBarChatButton: StatusNavBarTabButton {
        icon.name: "chat"
        badge.value: 33
        badge.visible: true
        tooltip.text: "Chat"
    }
}
```

In addition, it's possible to specify a list of `StatusNavBarTabButton` for
other sections of the application using the `navBarTabButtons` property:

```qml

StatusAppNavBar {
    ...
    navBarTabButtons: [
        StatusNavBarTabButton {
            icon.name: "wallet"
            tooltip.text: "Wallet"
        },
        StatusNavBarTabButton {
            icon.name: "browser"
            tooltip.text: "Browser"
        },
        StatusNavBarTabButton {
            icon.name: "status-update"
            tooltip.text: "Timeline"
        }
    ]
}
```

Lastly, when desired to render tabs for Status community, which can grow
in size, `StatusAppNavBar` exposes a list via the `navBarCommunityTabButtons`
property that can have a `model` and a `delegate`. The `delegate` should also
be a `StatusNavBarTabButton`:

```qml

StatusAppNavBar {
    ...
    navBarCommunityTabButtons.model: someModel.communities

    navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
        name: model.name
        tooltip.text: model.name
        anchors.horizontalCenter: parent.horizontalCenter
    }
}
```

The amount of community tab buttons can grow as they need until their dedicated
area becomes scrollable, at which point all `navBarTabButtons` will stick to the
bottom of `StatusAppNavBar`.

Closes #18
2022-09-21 18:20:02 +02:00
B.Melnik a3c3091c5d feat:Add buttons components 2022-09-21 18:20:02 +02:00
Pascal Precht 791d3e275a feat(Core.Controls): introduce StatusIconTabButton component
This adds the `StatusIconTabButton` componoent to `StatusQ` with some slight
adjustments:

- removes `iconColor` in favour of `icon.color`
- removes `disabledColor` (main reason being that we don't show disabled buttons of this type)

This button handles various cases:

1. Icon tab buttons - An icon button used in Status Desktop for different sections
2. Letter identicon button - Used for community sections that don't have a profile picture
3. Image icon button - Used for community sections that do have a profile picture

Which type is rendered depends on the configuration of the component as shown
in the usage.

Usage:

```
import StatusQ.Controls 0.1

// When `icon.name` is set, it renders a `StatusIcon` button
StatusIconTabButton {
    icon.name: "chat"
}

// When `icon.source` is set, it renders a `StatusRoundedImage` button
StatusIconTabButton {
    icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
}

// When `name` is set, it renders a `StatusLetterIdenticon` button
StatusIconTabButton {
    name: "#status"
}

```

Closes #16
2022-09-21 18:20:02 +02:00
Pascal Precht f999f30d44 feat(Components): introduce StatusLoadingIndicator
A `StatusIcon` that rotates infinitely and can be used for indicating
pending states.

Usage:

```
StatusLoadingIndicator {
    width: 24 // default: 17
    height: 24 // default: 17
    color: "red" // default: loading asset color
}
```

Closes #7
2022-09-21 18:20:01 +02:00
B.Melnik 6c62e1c20b feat: Set up catalog app (sandbox)
Closes #5
2022-09-21 18:20:01 +02:00