Commit Graph

747 Commits

Author SHA1 Message Date
Chris Hill-Scott
e4abc74b80 Add a tiny bit more spacing under the folder heading when the user has no template search or channel filters 2019-07-12 16:03:52 +01:00
Chris Hill-Scott
7901d08781 Style soft folder separators
If you can see a folder but not its parents we concatenate the
breadcrumb into one link.

This styles folder separators inside these links a bit differently to
make them do a bit less visual separation than the ones outside the
links.
2019-07-03 15:17:36 +01:00
Chris Hill-Scott
e731dd70d1 Use chevrons not slashes to separate folders
It looks weird to have two different visual treatments for showing a
navigable hierarchy.

I reckon losing the slash won’t make things less folder like – Windows
for example uses chevrons as foler separators.
2019-07-03 15:17:36 +01:00
Chris Hill-Scott
acd992183c Use design system icon for breadcrumb
This is nicer because it’s drawn with CSS (so is resolution independent)
and is a bit darker to match the border colour (visually if not
actually).
2019-07-03 15:17:36 +01:00
Chris Hill-Scott
b4dde3842e Make spacing below template folder heading even
It was a bit inconsistent depending on whether there was/wasn’t a search
box or channel tabs on the page.

I found this just too complicated to do in pure CSS, so added a new
spacing class which gets toggled on and off.
2019-07-03 15:17:35 +01:00
Chris Hill-Scott
003e926f27 Stop service name overflowing
This is just to stop it looking broken. 50% column width chosen to
maintain the rhythm of the grid.
2019-07-03 15:17:35 +01:00
Chris Hill-Scott
555b811fa7 Push headings down a bit
Now that there’s a bit more stuff in the service name area at the top
of the page it looks a bit cramped. Moving the heading down gives it a
bit more space to breath, and associates the heading a bit more closely
with the content after it.
2019-07-03 15:17:35 +01:00
Chris Hill-Scott
6338795e52 Make ‘switch service’ the same as ‘Change’ links
It looks inconsistent when the switch service link is 16px, right next
to a change link and organisation breadcrumb which is 19px.
2019-07-03 15:17:35 +01:00
Chris Hill-Scott
d382385b69 Make things line up
This commit aligns and spaces elements on the page to show which are
related to others.

This needs some adjustment now because we potentially have more things
on the page now – we need to make space for them.
2019-07-03 15:17:34 +01:00
Chris Hill-Scott
96bd0a55b2 Move the breadcrumb inside the link
Putting the background image on the preceding breadcrumb item will allow
us to replace it with a pseudo element in a subsequent commit.
2019-07-03 15:17:34 +01:00
Chris Hill-Scott
27f1eeca0b Restrict max width of org and service name
Service names can be quite long. Organisation names can be quite long.
Together they can be very long. This isn’t great because:
- sometimes they overflow the width of the container, which looks broken
- even if they’re not that long they can make the UI look quite
  cluttered

This commit restricts them to widths that should stop the above from
happening. In the case of the organisation name the width has
specifically been chosen to line up with the ¼ and ¾ column grid
used by the navigation.
2019-07-03 15:11:42 +01:00
Chris Hill-Scott
eb3f9aad2a Add pages to let users accept the agreement online
At the moment, the process for accepting the data sharing and financial
agreement is:

1. download a pdf
* print it out
* get someone to sign it
* scan it
* email it back to us
* we rename the file and save it in Google Drive
* we then update the organisation to say the MOU is signed
* sometimes we also:
 * print it out and get it counter-signed
 * scan it again
 * email it back to the service

Let's not do that any more.

When the first service for an organisation that doesn't have the
agreement in place is in the process of going live, then they should
be able to accept the agreement online as part of the go live flow. This
commit adds the pages that let someone do that.

Where the checklist shows the agreement as **[not completed]** then
they can follow a link where they can download it (as happens now).
From here, they should then also be able to provide some info to accept
it. The info that we need is:

**Version** – because we version the agreements occasionally, we need to
know which version they are accepting.  It may not be the latest one if
they downloaded it a while ago and it took time to be signed off

**Who is accepting the agreement** – this will often be someone in the
finance team, and not necessarily a team member, so we should let the
person either accept as themselves, or on behalf of someone else. If
it's on behalf of someone else we need to the name and email address of
that person so we have that on record. Obvs if it's them accepting it
themselves, we have that already (so we just store their user ID and
not their name or email address).

We then replay the collected info back in a sort of legally
binding kind of way pulling in the organisation name too. The wording
we’re using is inspired by what GOV.UK Pay have. Then there’s a big
green button they can click to accept the agreement, which stores their
user ID and and timestamp.
2019-06-19 13:14:02 +01:00
Chris Hill-Scott
1a3df7039f Fix rendering of scrollable tables
The scrollable tables code styles some of the cells in the target table
by looking for the `table-field-center-aligned` class.

This class was renamed in 0512f40ad3

This commit updates the scrollable tables code to refer to the new
classname, which means that things should line up properly when drawing
the table.
2019-06-17 16:15:34 +01:00
Chris Hill-Scott
da29d722f9 Merge pull request #2983 from alphagov/add-js-tests-for-fullscreen-table
Add js tests for fullscreen table
2019-06-17 10:00:53 +01:00
Chris Hill-Scott
451fadb1b3 Hide H1 for grid layout
With the `<h2>`s on this page it’s fairly explicit what the page is
listing, so user doesn’t need the context provided by the `<h1>`.
2019-06-13 13:47:29 +01:00
Tom Byers
1082a37750 Update call out to sticky JS, with test for it 2019-06-12 16:03:26 +01:00
Chris Hill-Scott
954f43ae48 Let users archive their own trial mode services
At the moment we have a blanket rule that users can’t archive their own
services, to prevent someone accidentally deleting a real live service,
because that would be Very Bad.

But the tickets we get from users asking us to delete services are for
services they set up when they were just trying out Notify. There’s not
much harm in letting users delete these services, the consequences of
doing so are much lower than those of deleting a live service. And it
should mean fewer support tickets for us to deal with.
2019-06-04 09:45:51 +01:00
Chris Hill-Scott
3deff78a75 Merge pull request #2988 from alphagov/loading-spacing
Remove spacing tweak on loading indicator
2019-05-30 13:54:32 +01:00
Pea Tyczynska
6cf9959058 Stop AJAX when success or failure and show form on failure
AJAX requests stop on success or failure, as the waiting page
does not have to referesh any longer.

Also on failure a form that allows user to try again
is shown.
2019-05-23 15:34:25 +01:00
Chris Hill-Scott
3137c5acf6 Remove spacing tweak on loading indicator
It’s not needed when there’s no whitespace around the text.
2019-05-23 11:34:34 +01:00
Tom Byers
a0ecbe473e Merge pull request #2957 from alphagov/add-js-tests-for-list-entry
Add JS tests for list entry module
2019-05-17 13:36:52 +01:00
Chris Hill-Scott
2dc731c2d8 Merge pull request #2971 from alphagov/loading-indicator
Add a loading indicator component
2019-05-17 11:18:14 +01:00
Tom Byers
a6f39c08de Dedupe list-entry shared attributes
The `getSharedAttributes` method gathers all
attributes, and [DOM tokens](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)
in the `class` attribute not controlled by the
module for re-applying in the `render` method.

Because it gathered them for all items, many
duplicates ended up being added to new items.

Browser engines were tidying up the duplicates
but we shouldn't be adding them in the first
place.
2019-05-16 15:36:46 +01:00
Tom Byers
84b02ee57a Remove reference to global 'this' from listEntry
Also removes setting of the `$` variable to
jQuery.

This can mess up the unit tests if they run
against JSDOM, which doesn't set the global `this`
to `window`, as browsers do.

We don't set `$` in any other module scripts and
adding it to `this` without making explicit that
`this` means `window` isn't useful.
2019-05-16 15:36:46 +01:00
Chris Hill-Scott
5b4edc92fd Add a loading indicator component
This will let us design a page which tells the user they need to wait.
2019-05-15 15:29:47 +01:00
Tom Byers
ccd09b9fd7 Revert "Merge pull request #2969 from alphagov/revert-2956-progressively-enhance-folder-permissions"
This reverts commit 8266f3d65c, reversing
changes made to b2a38fe222.
2019-05-15 14:26:51 +01:00
Tom Byers
0e6caa7fda Revert "Progressively enhance folder permissions" 2019-05-13 16:19:24 +01:00
Tom Byers
b2a38fe222 Merge pull request #2956 from alphagov/progressively-enhance-folder-permissions
Progressively enhance folder permissions
2019-05-13 14:41:43 +01:00
Tom Byers
6f12a39b58 Move folder-black.png image into correct folder
Was placed in app/assets/stylesheets/ by mistake
in fe457464a8
2019-05-13 14:08:07 +01:00
Tom Byers
cd5f6251d1 Adjust selection summary spacing
Co-Authored-By: Chris Hill-Scott <me@quis.cc>
2019-05-13 13:15:45 +01:00
Tom Byers
bbc962298c Make selection summary use tabular numbers
Stops them jumping around as much when the numbers change. As requested in: https://github.com/alphagov/notifications-admin/pull/2956/files#r283271635

Co-Authored-By: Chris Hill-Scott <me@quis.cc>
2019-05-13 13:07:28 +01:00
Tom Byers
fe457464a8 Fixes for folder .svg icon
Match format of .svg file to others in the same
folder to fix issues in IE11.

Add a .png alternative for IE8 users.
2019-05-10 14:59:31 +01:00
Tom Byers
d75c26eb83 Make done button, and its surround, sticky 2019-05-10 14:21:58 +01:00
Tom Byers
19b68048d0 Fix undefined local variables in sticky JS
Running the sticky JS in Jest raised errors due to
these variables not being assigned properly.

It's JavaScript so any variable not defined by the
`var` prefix will automatically become a property
of the global object. That is not what is intended
by the code so requires changing.
2019-05-10 14:20:44 +01:00
Tom Byers
bb16626209 Split module out into objects for each component
Is clearer than just having one large hierarchical
object and makes the relationships between the
module and its components clearer.
2019-05-10 14:20:14 +01:00
Tom Byers
7328649537 Combine 'Change' and 'Done' buttons into one
Includes addition of classes by JS to ensure CSS
selectors don't have to reference the data
attributes.
2019-05-10 14:16:03 +01:00
Chris Hill-Scott
923ac7190c Add a hint when no team members are selected
This helps clarify that you will still be able to see the folder.
Follows the phrasing used for the "No folders…" message.
2019-05-09 13:43:04 +01:00
Tom Byers
1ffa8c8915 Only show the folder icon if fields are folders 2019-05-09 11:25:28 +01:00
Chris Hill-Scott
3dc2130926 Align baseline of summary text with button text 2019-05-09 10:30:46 +01:00
Chris Hill-Scott
89478ac2ca Use larger folder icon 2019-05-09 10:27:14 +01:00
Chris Hill-Scott
f274759cd8 Add larger version of black folder icon
This is for use in the folder permissions UI. It’s designed to be sized
at the same width as a GOV.UK style checkbox. The CSS to render it is
something like:

```css
background-image: file-url('folder-black.svg');
background-repeat: no-repeat;
background-size: 39px auto;
background-position: 0px 4px;
```
2019-05-09 10:21:30 +01:00
Tom Byers
db12ec3a5c Make buttons work outside of context
This is important for users who find buttons via
interfaces that present them out of the context of
the page, like screenreaders.
2019-05-08 17:16:08 +01:00
Tom Byers
42a9a0cf23 Make selection summary a live region
Live regions need to be in the original HTML of
the page to work. We were generating the summary
in JS.

This changes the JS to only generate the contents
of the summary so changes to its contents are
announces by the existing live-region.
2019-05-08 17:16:06 +01:00
Tom Byers
33d074c00a Allow nested checkboxes to be collapsible
Expands the API of the macro to allow nested
checkboxes to have a summary tracking the current
selection, the fieldset to expand/collapse and
buttons to be added to allow jumping between
states.

Includes making 'Done' button inline on mobile.
Helps differentiate it form the form submit.
2019-05-08 17:08:16 +01:00
Tom Byers
20a94910cb Give permissions form legend heading styles
Also includes putting the text at the foot of the
checkboxes into a hint below the legend.
2019-05-08 11:35:58 +01:00
Chris Hill-Scott
a67e14b900 Even out the spacing a bit 2019-05-02 14:17:14 +01:00
Chris Hill-Scott
078e9bc7a4 Say ‘done’ not ‘back’
We use ‘back’ to label a control which navigates to a previous page now.
It could be confusing to keep this control labelled the same way. And
in the future the folder permissions interaction definitely shouldn’t be
using ‘back’, because it suggests undoing the selection you’ve made.
2019-05-02 11:29:24 +01:00
Chris Hill-Scott
71835a4182 Style radio select controls as buttons
For the upcoming user permissions enhancements we want to differentiate
between actions that take the user to a new page (eg changing a user’s
phone number or email address) and actions that reveal extra controls in
the current page (which will be changing the folders a team member can
see).

This change will be inconsistent with the interaction for scheduling a
job, which uses links to reveal other controls in the page.

This commit changes the scheduling interaction to use grey ‘secondary’
buttons for revealing extra controls in the page, for consistency with
the upcoming folder permissions work.
2019-05-02 11:19:29 +01:00
Chris Hill-Scott
74638f4cd0 Use proper icon for breadcrumb
Uses the asset from the GOV.UK Frontend Toolkit.
2019-04-30 16:03:27 +01:00
Chris Hill-Scott
8ad58d641c Fix vertical position of ‘Manage’ link
This doesn’t line up now that the heading sizes have changed.
2019-04-30 15:30:31 +01:00