This is better because it saves vertical space for the contents of the
pop-up menu.
This commit also adds some padding to the cancel and clear buttons, to
make them easier targets to hit.
Being able to see how many things you have selected gives you positive
feedback that reinforces that what you’ve done has been recognised. It
helps you understand the implications of your actions (ie you see ‘3
selected’ before you press the ‘Move’ button). And it gives you an
escape hatch the get out of the state you’re in by providing the ‘Clear’
button.
We also found in prototyping that having a ‘Nothing selected’ message
helps draws people’s attention to the checkboxes when they first
encounter the folders feature.
This commit implements the counter and the cancel button. It tries to
follow the existing patterns for this module.
When you hit enter while an input in a form is in focus, your browser
finds the first button in the form, and carries out that action. So,
for non-js users, we added a hidden submit button with a value of
"unknown" to reflect that we don't know the intention of the user.
However, with JS enabled, this ambiguity doesn't exist - there's only
submit button and forms to fill in at a time, and non-visible fields
aren't even submitted at all. We can remove the unknown button,
supporting enter as submit properly. If the user is on one of the grey
button states, with no submit, it'll press the first button, and go to
the new template / move to existing folder dialog. That's fine enough.
previously, it'd always show nothing-selected-buttons - however, if
some items were checked (due to being selected previously, and loading
with a form error message), it would be showing the wrong buttons.
Now, if the state is unknown, work out which state to show by counting
checkboxes, the same as when someone presses the cancel button.
If you’ve searched to select an item and then you want to perform an
action on it it’s confusing when it goes away if you change your search.
It should always be clear which items you’re performing an action on.
This means that checked items should always be visible, no matter what
your search term is.
the html now contains a `data-prev-state` attribute which contains the
previous state, taken from the `operation` value in the form data (from
the submit button). This is used to seed the `currentState` of the
templateFolderForm. If not specified (or 'unknown', because the user
hit enter last time round), then set it to nothingSelectedButtons.
so that they better align with the front-end, where they'll be used in
data attributes. Also, making the kebab case is nice because it doesn't
give favouritism to either JS or python naming conventions
only remove the add template button if they have the folder service
permission (thus can see the add button at the bottom).
Also make some unnecessary functions into strings in the js, and
remove some commented out code
when cancelled, clears any data inputted into the sub-form action, and
then uses an icky hack to go back to the buttons, by changing the
state to "nothingSelectedButtons", and then pretending a checkbox was
clicked so it works out which actions to show and re-renders.
the action buttons have a value that matches up with the key for the
target form in the `this.states` object - we can just set the
currentState to that and call re-render and it all Just Works™.
detatch and reattach feel better than hide/unhide, mainly because it
means when the form is posted, any data that might linger in them
definitely won't be sent in the POST.
if action buttons are shown (either the nothing selected actions or the
stuff selected actions), when a checkbox is selected or deselected,
count how many checkboxes are selected. If it's zero, then show the
new template/folder buttons, if it's non-zero, then show the move
options.
Under the hood, we set the `currentState` variable, then the render fn
shows that element and hides all others.
have a bunch of separate elements within the sticky_template_forms div
that we hide or show based on button presses and such. This commit just
sets up the class - it doesn't actually deal with button presses or
checkboxes etc yet.
If you have a folder structure like this:
> FA / FB / FC
and you search for ‘FA’, it’s very noisy to see:
> FA / FB
> FA / FB / T1
> FA / FB / T2
> FA / FB / FC
> FA / FB / FC / T3
> …
It’s clearer to just show:
> FA / FB
This also has the benefit of, if you type ‘template’ (for example) you
don’t get every item any more, because it’s only looking at the name of
the thing. It used to look at the entire description, ie:
> A / B / C / Example
> Text message template
Now it only searches on the name:
> A / B / C / *Example*
> Text message template
At the moment live search works by either setting something to hidden
or displayed. When the search term is empty, it sets everything to
visible.
This doesn’t work with folders because some of them should be hidden by
default (the ones not at the current level).
We can account for this special case (empty search term) by removing
the `display` CSS attribute when the search term is empty. This means
that each item’s visibility will be controlled by whatever is set in the
CSS file. Using jQuery Setting a property to `''` removes it.
Position of elements are normally checked when you
scroll but we also need it to check when the page
loads.
Re-calculate element positions if window resizes.
Adds a flag to mark if all elements have a height
which will not change as their contents have
loaded.
Detach all methods from sticky reference so they
can be attached to different objects.
Split sticky into stickAtTop and stickAtBottom and
make new versions of all methods and properties
specific to stickAtBottom.
Add CSS for stickAtBottom and call on load
This replicates how we let large spreadsheets scroll horizontally.
Pro: this looks nicer and is more usable
Con: the code for this feels a bit fragile, especially the calling of
`.maintainWidth` twice, ie as many times as a it takes to get stuff to
render properly.
It’s annoying that this button moves after you click on it. It’s
happening because the API key is wrapping onto multiple lines.
This commit fixes the height of the container so that it doesn’t reflow
when it has less content in it.
Uses a bit of flexbox to vertically centre the text.
The `oninput` event is a more performant way to detect changes to a
textbox’s contents (compared to `onkeydown`, `onpaste`, etc).
It’s not supported in older browsers, but since this is a likely to be
used by platform admin users only that’s OK.
This commit improves the code that previews a hex colour when setting up
or changing an email branding.
Specifically it:
- refactors the Javascript to conform to our patterns (module pattern,
preprocessed with Gulp)
- makes the code work when there are multiple colour previews on one
page
It also does some visual prettifying, because I couldn’t help myself…
Service contact details are needed if the upload document permission is
enabled - this used to be a link but services can now choose to use a
link, email address or phone number. The form to add or change service
contact details now gives these options and validates the data according
to the type of contact details provided.
When validating phone numbers we can't use the existing validation
because we want to allow landlines too, so there is a basic check that
the phone number is the right length and doesn't include certain
characters.
We’re interested to know which services are looking at the basic view
preview (even if they’re not turning it on).
This commit logs their service IDs as events into Google Analytics.
In research we found that:
- people didn’t initially realise that the permissions expanded when the
‘admin’ option was selected
- not having all the options visible at once makes it hard to know what
permissions you are (and more importantly aren’t) giving to people
This commit makes it so that:
- the options within the ‘admin’ option are always visible
- a bit of Javascript logic makes it so you can pick ‘caseworker’ and
‘manage service’, for example (by deselecting one when you pick the
other)
This commit changes the form that the user sees when inviting or editing
another user, if the service has the ‘caseworking’ permission set.
This will allow creating a new type of user, one who only has the
`send_messages` permission, without the `view_activity` permission.
We are doing this because we think there are a number of services with a
lot of users who don’t need to see the dashboard, or the other team
members, and that we can make a simpler interface for these users.
It’s noticeable when clicking from row to row in the spreadsheet that
the page jumps around a fair bit on load because there are a couple of
Javascript-powered components.
This commit makes sure:
- the radio select component doesn’t change height when rendering for
the first time
- the scrollable table doesn’t show parts of the table that should be
hidden by overflow for a fraction of second before all the JS has
run
- the right-hand shadow on horizontally scrollable tables doesn’t fade
in on initial page load but shows at 100% opacity immediately
We weren’t calculating the height quite right; we were trying to
compensate for something that should have been compensated for in the
`stick-at-top-when-scrolling` code.
Add the 5px to the shim there is required because we’re adding it to the
element that the shim in replacing.
There were three problems with showing tables fullscreen:
- it was over-optimised for very big spreadsheets, whereas most users
will only have a few columns in their files
- it was jarring to go from full screen and back to the normal layout
- it was a bit change for existing users, where we prefer incremental
changes that make things better without disrupting people’s work
(where possible)
So this commit changes the big table to scroll horizontally in the page,
not take up the full width of the page.
From the fullscreen table it keeps:
- the shimming method to keep the horizontal scrollbar at the bottom of
the screen at all times
It introduces some more refinements to make it nicer to use:
- fixing the first column, so you always know what row you’re on
- adding shadows indicate where there is content that’s scrolled outside
the edges of the container
Two bits of context:
1. As we start dealing with letters, which have more columns, it’s more
likely that people’s spreadsheets won’t fit in our current layout.
2. We already removed the view of the template from the page that shows
row-level errors (eg bad phone number or missing personalisation) in
spreadsheets because you don’t need to know about the content of the
message in order to fix the errors.
This commit goes further by removing anything that isn’t to do with
the errors, including the normal GOV.UK header and the service’s
navigation.
This means the content can go the width of the page, which means it can
be allowed to scroll horizontally without being a usability car
crash. Which means that the layout doesn’t break with a spreadsheet that
has lots of columns.
Have seen users complaining that they got an invitation email twice.
This is probably because they clicked the button twice even though they
think they only clicked it once.
Double form submission is a common issue on web pages, and there are a
number of different ways to prevent it. I’ve chosen to do it this way
because:
- temporarily, not permanently disabling the button means that this
addresses the double clicking issue without breaking things if the
user did, really want to click the button again deliberately (for
whatever reason)
- doing it with a `data` attribute, rather than the `disabled` attribute
means that the interaction behaviour of the button doesn’t change (
`disabled` buttons can’t be focused, for example)
