Commit Graph

25 Commits

Author SHA1 Message Date
Kevin Ansfield
7251b1acac Added acceptance tests for new design screen
no issue

- moved navigation settings tests from old settings/design tests to a separate file and unskipped them
- added happy-path acceptance tests for
  - rendering design screen
  - installing an official theme from the themes list
  - uploading a custom theme
2021-11-01 17:48:49 +00:00
Sanne de Vries
829fc138a2 Made design settings sidenav footer sticky 2021-10-27 16:16:26 +02:00
Kevin Ansfield
cb13b7de1e Added automatic open of brand settings form when no custom theme settings exist
no issue

When no custom theme settings exist it's nice to have the brand settings form automatically visible when opening the design settings menu to avoid an extra click and let users make actions immediately. We don't want that behaviour when custom theme settings exist because it would hide useful context and result in extra scroll+clicks to get to the section you're interested in.

- when first rendering the menu, set the open section to `brand` if we're on the design settings index screen
- add an event handler to the router that re-sets the open section to `brand` each time we navigate back to the design settings index screen (leaving the index screen closes all open sections)
2021-10-22 12:02:59 +01:00
Sanne de Vries
ee0646ce68 Updated design settings sidebar hover states 2021-10-21 16:44:46 +02:00
Kevin Ansfield
8710f5f532 Added animation of sidebar between main and contextual menus
refs https://github.com/TryGhost/Team/issues/1149

- added `ember-css-transitions` library that provides a modifier that adds/removes classes used for animating elements in and out, automatically creating a clone for destroyed elements
- added a wrapper class around the `main` and `design` nav menu contents so they could be individually animated
- used the new `{{css-transition}}` modifier to animate the sidebar menus in/out
- ensured main menu doesn't animate on first render of the parent `<GhNavMenu>` component so there's no animation when Admin is loaded
2021-10-20 13:04:05 +01:00
Sanne de Vries
53ac7d2f6d Updated design settings side nav 2021-10-20 11:14:26 +02:00
Kevin Ansfield
2158237566 Fixed font weight on active nav links in design sidebar
refs https://github.com/TryGhost/Team/issues/1149

- changed `current-when` for the design settings title to only be active on the index screen which corresponds to the setting groups being active/usable
- updated styles to use the `.active` class rather than just `:focus`
2021-10-19 12:07:56 +01:00
Kevin Ansfield
eda694b69f Add close of open section when clicking "Site design" nav heading
refs https://github.com/orgs/TryGhost/projects/51

- always reset the open section when the header link is clicked to collapse any open setting groups
2021-10-18 17:37:56 +01:00
Sanne de Vries
d7fefd70cc Animated design settings tabs open/close in side nav
Refs https://github.com/TryGhost/Team/issues/1149
2021-10-18 18:27:50 +02:00
Kevin Ansfield
6dd1d058e5 Added open/close animation for design settings sidebar groups
refs https://github.com/TryGhost/Team/issues/1149

- basic switch to `{{liquid-if}}` for animating the expand/collapse interaction
2021-10-18 17:24:17 +01:00
Sanne de Vries
9120f0d820 Updated design settings navigation 2021-10-15 17:59:52 +02:00
Kevin Ansfield
f4596a0add Fixed design menu re-rendering and losing input focus on first change
no issue

- `get settingGroups()` was always returning a new object which meant the template was re-rendering unexpectedly which created issues with form fields that lose their focus when re-rendered
- moved group handling into the `customThemeSettings` service as it makes more sense to keep it centralized, that gave us the ability to create a new `settingGroups` array only when the settings list changes keeping the tracked invalidation easier to reason about
2021-10-14 14:15:11 +01:00
Sanne de Vries
67fa946bff Updated theme preview page 2021-10-13 15:33:53 +02:00
Kevin Ansfield
8e10d38d1f Added .active class to design nav items when open
no issue

- matches nav items that use `<LinkTo>`
- fixes sections headers going in and out of bold styling whilst interacting with the menu/forms
2021-10-13 12:42:25 +01:00
Kevin Ansfield
2476aff3d7 Forced close of design sections when clicking "Change theme" link
refs f9a2626ae4

- nav menu felt inconsistent where clicking a section nav item closes all other sections but clicking the change-theme nav item didn't
2021-10-13 12:33:15 +01:00
Kevin Ansfield
d8bdd45add Added current theme display to design screen nav sidebar
no issue

- fetch themes in the background when sidebar is rendered in case they haven't been loaded so far (current screen design means the first time the nav bar is seen the themes are unlikely to have been loaded already)
- added `activeTheme` getter to grab the active theme from the live themes list
2021-10-13 10:39:23 +01:00
Kevin Ansfield
f9a2626ae4 Changed design menu to only show one open section at a time
no issue

- we want the menu to feel more like a typical navigation sidebar
2021-10-13 09:11:57 +01:00
Sanne de Vries
d4cb6d019e Updated design settings sidemenu 2021-10-12 19:14:17 +02:00
Sanne de Vries
5a048c105e Fixed color picker and image uploaders in design settings 2021-10-12 16:37:30 +02:00
Sanne de Vries
c721bb3b1f Updated design settings sidemenu 2021-10-12 14:30:12 +02:00
Kevin Ansfield
924da56c94 Moved theme table to change-theme screen and dropped advanced screen
refs https://github.com/TryGhost/Team/issues/1130

- match latest design where the theme table is under an "advanced" toggle on the change-theme screen rather than a completely separate screen
2021-10-12 10:18:55 +01:00
Kevin Ansfield
bc5be1a808 Removed template duplication for custom theme setting groups
no issue

- added `settingGroups` array to the nav menu so that it can be looped over rather than having the same template duplicated for hard coded settings arrays
2021-10-12 07:54:34 +01:00
Kevin Ansfield
1d0cd80158 Added basic reset to design preview on nav bar interaction
refs https://github.com/TryGhost/Team/issues/1130

- when opening/closing sections or interacting with the general design or custom theme settings we want to switch back to showing the preview so the sidebar acts more like typical navigation and so form changes show their effect
2021-10-11 21:09:42 +01:00
Kevin Ansfield
42e493bb81 Initial pass at new change theme screen
refs https://github.com/TryGhost/Team/issues/1130

- added link to design sidebar
- dropped change-theme modal and associated route behaviour
- copied basic themes marketplace list into the change-theme controller/template
2021-10-11 17:14:18 +01:00
Kevin Ansfield
595018098d Switched design screen from modals to standard routes
refs https://github.com/TryGhost/Team/issues/1130

- added `ui.contextualNavMenu` property that when set will switch the main nav menu between components, if it's not set then it will show the default "main" menu component
- added `design` menu sub-component of `gh-nav-menu` ready for use via `contextualNavMenu`
  - moved sidebar contents from the design modal into this component
- updated design route to set/reset `ui.contextualNavMenu` to `design` on entering/leaving the route
  - all other design routes are sub-routes so this works across all other design screens
- moved base design modal preview into the `settings/design/index` controller/template
  - using index means that it's the default screen for `/settings/design` but will be automatically replaced by any other `design.x` routes
- moved `design/advanced` modal content into the `settings.design.advanced` controller/template and removed the modal handling from the route
2021-10-11 15:24:46 +01:00