Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add new v2.5 UI #357

Merged
merged 67 commits into from
Mar 4, 2020
Merged

Add new v2.5 UI #357

merged 67 commits into from
Mar 4, 2020

Conversation

ghost
Copy link

@ghost ghost commented Feb 9, 2020

New UI based on a refactor of the existing v2 UI.

The user facing changes are:

  • Replacing blueprintjs with react-bootstrap. Not a very sexy framework, but it's well maintained, and has a fully responsive layout. Additionally, the select dropdowns have been replaced with react-select.
  • Responsive mobile layout. This is still somewhat WIP, particularly the editing pages and settings pages do not work great, but browsing performers/scenes/studios should work well.
  • Added react-intl to serve as an i18n framework. For the time being only main menu and the stats page has been translated into (bad) German, to serve as an example. The language can be changed in the interface config. To add new text, wrap it in <FormattedMessage /> and run yarn extract to populate the message files in src/locale. To support this all text should be wrapped in <FormattedMessage> or formatMessage, all dates wraped inn <FormattedDate>, and all numbers in <FormattedNumber>. For more info see the react-intl documentation. New languages can be added by editing the yarn extract command and the dropdown in the config menu, and then editing the resulting [language-code].json in the locale folder.
  • Tweaked performer and studio page layouts.

There have also been a large amount of behind the scenes changes:

  • Fixed all linting errors. This also involved refactoring many of the components to remove or clean up useEffect hooks which are prone to create confusing and brittle code.
  • Added additional linting rules based on airbnb-typescript, as well as stylelint rules, to ensure that the style is more unified and we avoid verbose or potentially buggy code.
  • Disallowed any in the linter, and rewrote or exempted all uses of it.
  • Ran the entire project through prettier, which formats all whitespace according to a strict set of rules. This can be rerun on demand with yarn format.
  • Added 'src/' as an import root, and switched all imports to use src/component|hooks|utils/Name/File. This makes it easier to see where imports and coming from, and means they won't break when copy-pasted, or the file is moved.
  • Moved all component-specific styles to the individual components so that it's easier to see where styles belong, and what they should affect. Also, went through all styles and did a general cleanup.
  • Upgraded typescript to 3.7. This supports optional chaining and nullish coalescing which is extremely handy when dealing with graphql data.
  • Ugpraded apollo-client and all related libraries to the latest version, as well as graphql-codegen. The latter involved some changes to the calling signature of the queries/mutations, as well as the type names, but nothing major.
  • Upgraded react-router and switched to using useHistory, useParams, and useLocation hooks rather than passing router props around.
  • Upgraded all other libraries to the latest version as well, except for react-images which is inexplicably very over-complicated in the latest version.
  • Renamed all component folders to be uppercase, and moved some of them down since they are more or less standalone, specifically ScenePlayer and SceneFilenameParser.
  • Probably way more stuff that I can't remember right now.

Some things to note:

  • The code is up to date with the master develop branch. Some of the more recent commits had to be rewritten to work, but should otherwise be fine.
  • Outside of the ui/v2.5 folder the only change is adding the language config setting to graphql. This shouldn't affect the v2 branch at all, and they can in fact be run side by side without problem as long as v2.5 is manually started in dev mode. To switch release version the packr2 box has to be changed from v2 to v2.5, and stash rebuilt.
  • All icons are now from the font-awesome project. To add an icon, simply use the shared <Icon> component and specify an icon from fontawesome with the icon prop.
  • There are bugs. A few I know of, but there are probably many more I don't.

@bnkai
Copy link
Collaborator

bnkai commented Feb 10, 2020

Looks awsome. It may not be "sexy" but i think it's more user friendly especially the mobile version.

A few things i encountered while "playing" with it.

  • the status popup is not readable (it's light grey while the font is white and you can't make out anything)

  • the ethnicity selector in the performers details panel is active even when we are in view mode

  • in the scene tab, the tag/performer "thumbnails" have a &sortby=date to their link that changes the current sort order

  • the filters/sort order/.. nav bar in the scenes section of the performer page doesn't work properly

  • when you are in mobile mode the stash home at the nav bar is kinda of invisible because it misses an icon. You can click on it and see the stats though.

  • the german de.json is missing the markers part ( i know it is just an example :-) )
    Also in the options part of the language selector i think languages should be presented in their native name. German should be Deutsch for example.

@ghost
Copy link
Author

ghost commented Feb 17, 2020

@bnkai Thanks for the feedback. I've rewritten the list filter hooks so it behaves the same as v2, and added a hamburger menu in mobile mode. Also fixed the other issues you mentioned.

Copy link
Collaborator

@WithoutPants WithoutPants left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a couple of minor changes.

Other things:

  • I'd prefer that the Scrape with menu button drops down a sub-menu of scrapers, rather than a horizontal list as does currently.
  • Needs the recent UI updates from Make performer image position top #358, Update stats page #366
  • When creating a filter, if you don't explicitly set the value field, then it ends up with 0 or blank. Same with Is Missing and its field.
  • Scenes list view seems pretty broken
  • You may have mentioned this already - scene edit page is a bit screwy on narrow screens
  • There's a bunch of style changes that I'd like just to make it as close to the old version where possible, but this can wait to a later iteration.

I think if we can get the bugs ironed out, we should get this merged and sort out the move from v2 in a separate PR, once the two versions are fully aligned.

pkg/api/resolver_query_configuration.go Outdated Show resolved Hide resolved
ui/v2.5/src/components/Scenes/SceneCard.tsx Outdated Show resolved Hide resolved
@ghost
Copy link
Author

ghost commented Mar 2, 2020

Just a couple of minor changes.

....

I think if we can get the bugs ironed out, we should get this merged and sort out the move from v2 in a separate PR, once the two versions are fully aligned.

All the issues you pointed out should be resolved now.

@ghost ghost requested a review from WithoutPants March 2, 2020 07:14
@bnkai
Copy link
Collaborator

bnkai commented Mar 2, 2020

Looks great.
A couple of things i found.

  • the loading animation is a bit unpredictable. On a new database i tried with only scenes and no performers/studios/markers/galleries. When you switch from the scenes to the studios or performers/markers the loading animation keeps going without stopping.

  • on the mobile view as soon as you press on the galleries menu , the menu shows as empty. You have to press above or below the galleries so that it gets visible again.

@WithoutPants WithoutPants added this to the Version 0.2.0 milestone Mar 3, 2020
@WithoutPants WithoutPants merged commit 088ddc9 into stashapp:develop Mar 4, 2020
Tweeticoats pushed a commit to Tweeticoats/stash that referenced this pull request Feb 1, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants