Commit Graph

10 Commits

Author SHA1 Message Date
John Cowen 095eb22dd0
ui: Dropdown/select improvements (#8468)
* ui: Better org of split-button/sort-button ready for design change

* ui: Improve keyboard accessibility of dropdown menu
2020-08-10 16:00:05 +01:00
John Cowen 0b9647c3b9
ui: ConsulKind explanatory tooltip panels (#8048)
* ui: Add tooltip panels to ConsulKind
2020-06-09 11:10:14 +01:00
John Cowen dfb1b16f72
ui: Misc amends for Safari and Firefox (#7907)
1. Ensure dropdown menus function correctly in Safari
2. Ensure default grey color for buttons is not used
3. Ensure IntersectionObservers are cleaned up properly in Safari
2020-05-18 17:21:10 +01:00
Kenia 7c203a9220 ui: Create PopoverSelect, CatalogToolbar, and update tests (#7489)
* Create PopoverSelect component and styling

* Create CatalogToolbar component and Styling

* ui: Adds `selectable-key-values` helper (#7472)

Preferably we want all copy/text to live in the template. Whilst you can
achieve what we've done here with a combination of different helpers, as
we will be using this approach in various places it's probably best to
make a helper.

We also hit an ember bug related to using the `let` helper and trying to
access `thingThatWasLet.firstObject` (which can also be worked around
using `object-at`).

Moving everything to a helper 'sorted' everything.

Probably worthwhile noting that if the sort option themselves become
dynamic, I'm not sure if the helper here would actually react as you
would expect (I'm aware that ember helpers on react on the root
arguments, not necesarily sub properties of those arguments). If we get
to that point this helper could take the same approach as what I believe
ember-composable-helpers does to get around this, or move them to the
view controller. If we do ever moved this to the view controller, we
can still use the exported function from the new helper here to keep
using the same functionality and tests we have here.

* Create tests for sorting services with CatalogToolbar

* Add rule to print 'ember/no-global-jquery' as a warning

Co-authored-by: John Cowen <johncowen@users.noreply.github.com>
2020-05-12 17:14:48 +00:00
Kenia 919b38c63a ui: Update the shadows for radio buttons and the cards (#7391)
* Update box-shadowing for cards and radio buttons to low
* Update box-shadowing for hover cards to middle
* Create a new box-shadow CSS variable for form elements
2020-05-12 17:14:14 +00:00
Kenia 6275e13f93 ui: Create CSS variables for box-shadowing consistency (#7337)
* Table - Lowest (on-hover of table items)
* Buttons - Middle
* Form-elements - Removed, no box-shadowing in input forms mocks.
* Menu-panel -High
* Modal-dialog - Highest
* Stats-card -Middle/High(Active)
* Tooltip - Middle
* Card - Middle
* Expanded-single-select - Middle
* Tabular-details - High
* Discovery chain - High
2020-05-12 17:14:09 +00:00
John Cowen efdae83a87
ui: Use structure-icons as much as possible (#6851)
* ui: Delete a bunch of CSS that we recently moved elsewhere

* ui: Add some masking placeholders

* Switch out hashicorp logo for one from structure-icons

* Change copy-button to use new copy-action icon

* Change secret-button to use new visibility-hide/show icons

* New folder icon for KVs

* Cleanup some of the icons we no longer use

* Switch from %with-exit to standard-like %with-exit-icon

* Move all chevrons to use structure-icons properly

* Use star-fill as much as possible

* Remove the remaining icons from icons/index plus the file itself
2020-01-16 09:10:32 +00:00
John Cowen 31f36ce096 ui: Namespace Support (#6639)
Adds namespace support to the UI:

1. Namespace CRUD/management
2. Show Namespace in relevant areas (intentions, upstreams)
3. Main navigation bar improvements
4. Logic/integration to interact with a new `internal/acl/authorize` endpoint
2019-12-18 12:26:47 +00:00
John Cowen eb7b69cc24 ui: CSS Upgrade (action-group,form-elements,sliding-toggle,breadcrumbs) (#6495)
This includes an update of our CSS npm module. The majority of this is
just moving files from one folder to another.

1. %breadrumbs: As well as moving we've added 'milestone' breadcrumbs
2. %checkbox-group: Moved
3. %radio-group: Moved
4. %sliding-toggle: Moved (used to be called just %toggle)
5. %form-elements: Moved and added a new %inline-alert for form field
messaging (see Structure design system)
6. %action-group is now a composition of %menu-panel, %toggle-button,
plus edits to existing style to bring the %action-groups inline with the
dropdowns from Structure). %action-group also includes a composed
%confirmation-alert that is yet to be include. This will be compiled out
until we integrate it.

We've also removed some of our old icon placeholders as the above
work seased to use some of them.

Now we done this I'd say all in all over half of our CSS components now
use the CSS npm module.

The CSS specific to Consul UI also uses much of this CSS module by way
of helper placeholders such as our %frames.
2019-12-18 12:26:43 +00:00
John Cowen 81637e2138 ui: CSS Components Migration (#5913)
Migrate roughly half of the base components into base
Adds a target for easily formatting CSS

Further CSS amends/migration (#5921)

1. tooltips within tables where a slightly bit troublesome due to a mix
of `inline-flex`, `overflow` and the need for truncation. This refineds
tooltips a slight bit more to work 'everywhere'.
2. We also move tooltip to use the correct color and min-width from
structure, but we overwrite the min-width here until we get confirmation
on widths/alignment of text within a tooltip.
3. Tiny fixes for breadcrumbs and toggle-buttons in tabular listings
4. Now we inline-flex our table cells, it means it is impossible to
truncate text without wrapping it in another element. This wraps all
Description like text in `<p>` tags. Generally the first column of text
is already wrapped in an `<a>` tag. Other items such as consul tags and
policy names etc get 'cutoff' rather than truncated.
5. We are now using all the icons from `@hashicorp/structure-icons`
2019-09-04 08:35:01 +00:00
Renamed from ui-v2/app/styles/components/buttons/skin.scss (Browse further)