Title: Details to remember as I implement Windows Phone-style themes and design Retiled's UI. · Issue #3 · DrewNaylor/Retiled · GitHub
Open Graph Title: Details to remember as I implement Windows Phone-style themes and design Retiled's UI. · Issue #3 · DrewNaylor/Retiled
X Title: Details to remember as I implement Windows Phone-style themes and design Retiled's UI. · Issue #3 · DrewNaylor/Retiled
Description: Update 3 (the other two were deleted due to being outdated): I ran the PySide6 Qt Quick Controls gallery and found that, with some changes, the progress bar, progress ring (called "BusyIndicator" here), SwipeView, and TabBar controls wil...
Open Graph Description: Update 3 (the other two were deleted due to being outdated): I ran the PySide6 Qt Quick Controls gallery and found that, with some changes, the progress bar, progress ring (called "BusyIndicator" h...
X Description: Update 3 (the other two were deleted due to being outdated): I ran the PySide6 Qt Quick Controls gallery and found that, with some changes, the progress bar, progress ring (called "BusyIndicat...
Opengraph URL: https://github.com/DrewNaylor/Retiled/issues/3
X: @github
Domain: github.com
{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Details to remember as I implement Windows Phone-style themes and design Retiled's UI.","articleBody":"**Update 3 (the other two were deleted due to being outdated)**: I ran the PySide6 Qt Quick Controls gallery and found that, with some changes, the progress bar, progress ring (called \"BusyIndicator\" here), SwipeView, and TabBar controls will probably work well just going from the Universal style.\r\n\r\n- [x] Most buttons have their background color changed to the accent color when pressed.\r\n- [x] Some buttons such as the \"All Apps\" button have the fill color as white instead of the accent color.\r\n- [x] Support for accent colors other than Cobalt needs to be added.\r\n - [ ] While not yet available in a released build, it is available on `main` and you just have to edit `\"RetiledSettings/configs/themes.config\"` in the repo or `\"~/.config/Retiled/RetiledSettings/configs/themes.config\"` if it's copied there whether by you to prepare for the next version (it'll support Accent colors; changing them in a UI will take longer), or by an unofficial tweaks program that makes it easier to change stuff that doesn't have a GUI available for yet.\r\n - [ ] Please note that apps don't listen for Accent color changes yet, and as such must be restarted for your changes to take effect.\r\n- [x] Custom accent color support as seen on desktop Windows 10 needs to exist.\r\n - [ ] Again, this must be done by editing the config file for now.\r\n - Qt has a QML color picker now that should work.\r\n- [ ] Support for the light theme.\r\n - Light/dark is an option in the config file, but it's not yet implemented. You can change it to `light` now if you want to have the light theme as soon as a version with support for it is installed.\r\n- [ ] \"Light Cobalt\" should be added as an option in case people prefer the lighter variation from some phones (`#3e65ff` instead of `#0050ef` according to WindowSpy)\r\n- [ ] Apparently there's another variant of Cobalt that the Visual Studio Designer displays in the Device pane, that being `#0B6CF8`. In case it's necessary, the full code is `#FF0B6CF8`, but GitHub doesn't display a preview for that one. This color may be the real \"Light Cobalt\" that some devices displayed instead of the real Cobalt, as it looks less purple to me.\r\n- [ ] Here's a full list of the colors as defined/displayed by Visual Studio. I don't know if people will want to use these, or the colors in the other list I have somewhere.\r\n\r\n- [x] There needs to be a way to reference the styles for controls from multiple applications.\r\n - Should be possible by referencing a library and specifying the assembly when adding the styles to the page.\r\n - I guess this is technically supported due to how QML classes work.\r\n- [ ] Toggle switches have padding inside them so the accent color doesn't fill the entire thing:\r\n\r\n- [ ] Toggle switches also slide over and can even be dragged over manually.\r\n- [ ] Progress bars are really thin and use the accent color as their fill color.\r\n- [ ] Opening the appbar has a nice transition for the buttons in it to slide into place.\r\n- [ ] A common page transition is the \"barndoor swing\", for lack of a better phrase. I may have mentioned these two transitions in the long document with what features there'll be.\r\n- [x] The \"Unpin Tile\" button has a black (or white, if using the light theme) outline when pressed, while the \"Resize Tile\" button doesn't:\r\n\r\n- [x] Apps with really long names just show whatever can fit in the tile:\r\n\r\n- [ ] Items in the All Apps list go behind the statusbar, which appears to have reserved space, unlike on the Start screen:\r\n\r\n\r\n- [ ] While there is a gap at the top of the All Apps list, items go above it but stop at a point. This is related to the \"reserved space\" thing above.\r\n\r\n - [ ] I think the \"reserved space\" thing should be handled by creating either an extension for Wayland or something with D-bus that apps that support it can use to specify how the status bar area should act, whether it should automatically reserve space like a LayerShell component (for compatibility with basically everything that's not designed for Retiled, but also apps that can just have space at the top; the only concern is if an app needs to have a loading indicator at the top, there needs to be a D-bus thing to specify that the status bar icons need to hide and something else like the \"Loading...\" dots needs to be shown [maybe there can be a way to have the status bar be in LayerShell mode and also change what's displayed up there, so app developers don't have to manually do spacing if they don't want to, but they can also do manual spacing and the \"loading...\" dots if they want]) or if the app can handle it so it's more immersive. Hiding the status bar is also important, but I think that's already been discussed in the large document in `/docs`.\r\n- [ ] As shown in the screenshots above, the All Apps list has headers for the first letter of each item. Microsoft has an example on how to do that with a ListView here, which will need to be altered to work with Avalonia: https://docs.microsoft.com/en-us/windows/apps/design/controls/lists#examples-1\r\n\r\nThis SO page may help point me in the right direction for doing this under QML:\r\nhttps://stackoverflow.com/questions/48923148/qml-creating-a-re-usable-listview-header-component\r\n- [ ] WP buttons will turn toward where the user pressed them. This issue is being tracked here, though I figured that it would be a good idea to add it to this list, too: https://github.com/DrewNaylor/Retiled/issues/37\r\n- [ ] Most phones had different positions for their navigation buttons, so there should be a way to allow the user to customize the spacing between them if desired.\r\n- [x] There's a gap below the \"uninstall\" button in the All Apps List app context menu and unless I said this somewhere else, context menus have a black outline on the top and bottom and are the width of the screen.\r\n- [ ] They also \"push\" the rest of the apps into the \"background\" with an animation when they open.\r\n\r\n- [ ] Location services has an icon in the statusbar when it's active that looks like a big dot with a circle around it.\r\n- [ ] App bar buttons rotate when the screen is rotated:\r\n\r\n- [ ] Not sure if I wrote this somewhere else, but the statusbar icons are grey and slightly transparent as shown below comparing the statusbar when the Action Center is closed and open. You can see where the battery icon overlaps with the IE logo that the fill color isn't opaque. This may be different in different applications though, so I don't know how to handle that yet. Maybe it'll just be slightly transparent for everything.\r\n\r\n- [ ] Dropdown boxes usually have black backgrounds and white outlines in the dark theme, but pressing them changes them to a white background and an accent color outline. When open, they show the currently-selected item with an accent color highlight and the outline remains the accent color as well. In the light theme, the dropdown box always has a white background, and a black outline unless pressed or open.\r\n\r\n- [ ] I was just messing around in the Windows Phone emulator, and found out that the \"Loading...\" dots are squares, not circles (perhaps there should be an option to toggle between circles and squares, in case someone prefers the appearance of real circles over squares despite squares being more authentic and true-to-form for Windows Phone?):\r\n\r\n- Not sure where to put this, but at 100% scale, the 720p emulator image doesn't have borders on tiles, which is good to know because I thought they did so I just didn't keep them on the buttons back when I was making them into tiles (except the OneNote icon, for some reason, has a border, which I guess it just has its own background with its own specific border color; sorry these are so large):\r\n\r\nHere's the All Apps list too, for reference:\r\n\r\nThose screenshots just above this are also available in `./docs/images/reference` if you need to look at them in an image editor more easily.\r\n","author":{"url":"https://github.com/DrewNaylor","@type":"Person","name":"DrewNaylor"},"datePublished":"2021-04-13T10:02:32.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":9},"url":"https://github.com/3/Retiled/issues/3"}| route-pattern | /_view_fragments/issues/show/:user_id/:repository/:id/issue_layout(.:format) |
| route-controller | voltron_issues_fragments |
| route-action | issue_layout |
| fetch-nonce | v2:f204f731-df3c-83b6-cc72-19739311a83e |
| current-catalog-service-hash | 81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114 |
| request-id | AF32:14CAC9:3E7C67:5821A0:6A4BC75A |
| html-safe-nonce | ac95d115c479162990c053d0ef8d8a77db6d42b5ff2a48d4f195696cc9a0bf5b |
| visitor-payload | eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiJBRjMyOjE0Q0FDOTozRTdDNjc6NTgyMUEwOjZBNEJDNzVBIiwidmlzaXRvcl9pZCI6IjUzMDk2NzQwOTYyMjAxNjE4ODIiLCJyZWdpb25fZWRnZSI6ImlhZCIsInJlZ2lvbl9yZW5kZXIiOiJpYWQifQ== |
| visitor-hmac | 9c3e5d7c387642b077766c648dcc74b607a73ca1e6e22d5bf9b44861e2d63419 |
| hovercard-subject-tag | issue:856801908 |
| github-keyboard-shortcuts | repository,issues,copilot |
| google-site-verification | Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I |
| octolytics-url | https://collector.github.com/github/collect |
| analytics-location | / |
| fb:app_id | 1401488693436528 |
| apple-itunes-app | app-id=1477376905, app-argument=https://github.com/_view_fragments/issues/show/DrewNaylor/Retiled/3/issue_layout |
| twitter:image | https://opengraph.githubassets.com/ae86599a6b025f4c61c93859ab4b0c4744142827c1aa368eab2dacb3044b5334/DrewNaylor/Retiled/issues/3 |
| twitter:card | summary_large_image |
| og:image | https://opengraph.githubassets.com/ae86599a6b025f4c61c93859ab4b0c4744142827c1aa368eab2dacb3044b5334/DrewNaylor/Retiled/issues/3 |
| og:image:alt | Update 3 (the other two were deleted due to being outdated): I ran the PySide6 Qt Quick Controls gallery and found that, with some changes, the progress bar, progress ring (called "BusyIndicator" h... |
| og:image:width | 1200 |
| og:image:height | 600 |
| og:site_name | GitHub |
| og:type | object |
| og:author:username | DrewNaylor |
| hostname | github.com |
| expected-hostname | github.com |
| None | 14aa00ce5bdb34d0eefb5facbffd7de9e144c688d8a93ef8df902d5f94b51dd7 |
| turbo-cache-control | no-preview |
| go-import | github.com/DrewNaylor/Retiled git https://github.com/DrewNaylor/Retiled.git |
| octolytics-dimension-user_id | 15517419 |
| octolytics-dimension-user_login | DrewNaylor |
| octolytics-dimension-repository_id | 356111836 |
| octolytics-dimension-repository_nwo | DrewNaylor/Retiled |
| octolytics-dimension-repository_public | true |
| octolytics-dimension-repository_is_fork | false |
| octolytics-dimension-repository_network_root_id | 356111836 |
| octolytics-dimension-repository_network_root_nwo | DrewNaylor/Retiled |
| turbo-body-classes | logged-out env-production page-responsive |
| disable-turbo | false |
| browser-stats-url | https://api.github.com/_private/browser/stats |
| browser-errors-url | https://api.github.com/_private/browser/errors |
| release | 58b8f89190447502561829f30862aa0a99d53367 |
| ui-target | full |
| theme-color | #1e2327 |
| color-scheme | light dark |
Links:
Viewport: width=device-width
