diff --git a/addons/rose/addon/components/rose/toolbar/index.hbs b/addons/rose/addon/components/rose/toolbar/index.hbs
index 2bc56e41b..2cbd74383 100644
--- a/addons/rose/addon/components/rose/toolbar/index.hbs
+++ b/addons/rose/addon/components/rose/toolbar/index.hbs
@@ -1,3 +1,12 @@
- {{yield}}
+ {{yield
+ (hash
+ primary=(component
+ 'rose/anonymous' tagName='span' class='rose-toolbar-primary'
+ )
+ secondary=(component
+ 'rose/anonymous' tagName='span' class='rose-toolbar-secondary'
+ )
+ )
+ }}
\ No newline at end of file
diff --git a/addons/rose/addon/components/rose/toolbar/index.stories.mdx b/addons/rose/addon/components/rose/toolbar/index.stories.mdx
index dd9dbb015..e0c16503e 100644
--- a/addons/rose/addon/components/rose/toolbar/index.stories.mdx
+++ b/addons/rose/addon/components/rose/toolbar/index.stories.mdx
@@ -6,10 +6,18 @@ import { action } from '@storybook/addon-actions';
# Toolbar
-renders a toolbar
+Renders a toolbar. Items may be added directly into the toolbar, or within
+predefined "regions" for left and right alignment, respectively.
```htmlbars
+ // place items here
+
+ // place left-aligned items here
+
+
+ // place right-aligned items here
+
```
diff --git a/addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss b/addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss
index a2cd92775..20a2424e6 100644
--- a/addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss
+++ b/addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss
@@ -6,9 +6,20 @@ $xxs: sizing.rems(xxs); // 4
$xxxxs: sizing.rems(xxxxs); // 1
.rose-toolbar {
+ display: flex;
background-color: var(--ui-gray-subtler-6);
padding: $xxs + $xxxxs;
+ .rose-toolbar-primary,
+ .rose-toolbar-secondary {
+ display: flex;
+ flex-grow: 1;
+ }
+
+ .rose-toolbar-secondary {
+ justify-content: flex-end;
+ }
+
// inside a toolbar, forms are always full-width
.rose-form,
.rose-form:not(.full-width) {
diff --git a/addons/rose/package.json b/addons/rose/package.json
index dfed2ed32..10f43bf1b 100644
--- a/addons/rose/package.json
+++ b/addons/rose/package.json
@@ -17,7 +17,7 @@
"lint:js": "eslint .",
"lint:sass": "sass-lint -v -q",
"format": "npm-run-all format:*",
- "format:hbs": "prettier --write 'addon/**/*.hbs'",
+ "format:hbs": "prettier --write '{addon,tests}/**/*.hbs'",
"format:js": "prettier --write '{addon,app,config,stories,tests}/**/*.js' *.js",
"format:sass": "prettier --write addon/**/*.scss",
"lint:js:fix": "eslint . --fix",
diff --git a/addons/rose/tests/dummy/app/controllers/index.js b/addons/rose/tests/dummy/app/controllers/index.js
index 08fa2b4f1..6a3993027 100644
--- a/addons/rose/tests/dummy/app/controllers/index.js
+++ b/addons/rose/tests/dummy/app/controllers/index.js
@@ -14,6 +14,8 @@ export default class IndexController extends Controller {
@tracked items = [...possibleItems];
@tracked selectedItems = [possibleItems[2]];
+ now = new Date();
+
// =actions
@action
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 6d73136e3..f6f131464 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -1,120 +1,26 @@
-
- Content
-
-
-Checkbox Group
-
-
-
-
-
- Items selected:
- {{#each this.selectedItems as |selected|}}
- {{selected.id}},
- {{/each}}
-
-
-
- Clear Selected Items
-
-
-
-
-KeyValue Dropdown
-
-
- <:key>ID
- <:value>cl_nbv9375hLHs
-
-
-
-
-
- <:key>Name
- <:value>Key/Value
-
-
-
-
-
- <:key>Description
- <:value>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda
- illo ratione libero ducimus magnam, porro sed provident repellat mollitia
- a, repellendus placeat. Magni consequuntur cumque, debitis obcaecati
- dolores quasi natus?
-
-
-
-
-Condensed dropdown
-
-
- cl_nbv9375hLHs
-
-
-
-
-
- Key/Value
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
- sit amet sem sodales neque ultrices sollicitudin vel sed justo. Vivamus
- vitae sollicitudin turpis.
-
-
-
-Normal Dropdown
-
-
- cl_nbv9375hLHs
-
-
-
-
- Key/Value
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
- sit amet sem sodales neque ultrices sollicitudin vel sed justo. Vivamus
- vitae sollicitudin turpis.
-
-
-
-Normal Dropdown
-
- Menu item
- Menu item 2
-
\ No newline at end of file
+
+ Clear somthing
+
+
+ Clear somthing
+ Clear somthing
+
+
+
+
+ Refresh
+
+
+
\ No newline at end of file
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index 15cd1b251..cab03b2f4 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -221,7 +221,9 @@
// Spinning animation for refresh button icon
.is-loading .rose-icon {
@keyframes hds-flight-icon-animation-rotation {
- to {transform: rotate(360deg);}
+ to {
+ transform: rotate(360deg);
+ }
}
> svg {
diff --git a/ui/admin/app/templates/scopes/scope/sessions/index.hbs b/ui/admin/app/templates/scopes/scope/sessions/index.hbs
index 72c1b447b..d16f8c035 100644
--- a/ui/admin/app/templates/scopes/scope/sessions/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/sessions/index.hbs
@@ -20,51 +20,57 @@
(has-resource-filter-selections 'scopes.scope.sessions' 'status')
)
}}
-
-
- {{#with
- (resource-filter 'scopes.scope.sessions' 'status')
- as |filter|
- }}
-
-
+
+
+ {{#with
+ (resource-filter 'scopes.scope.sessions' 'status')
+ as |filter|
+ }}
+
-
-
-
-
-
- {{/with}}
+
+
+
+
+
+
+ {{/with}}
- {{#if
- (has-resource-filter-selections 'scopes.scope.sessions' 'status')
- }}
- {{t 'actions.clear-all-filters'}}
-
- {{/if}}
+ {{#if
+ (has-resource-filter-selections
+ 'scopes.scope.sessions' 'status'
+ )
+ }}
+ {{t 'actions.clear-all-filters'}}
+
+ {{/if}}
+
+
+
+
-
{{/if}}
{{/if}}
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index 06eb9df3b..93c572319 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/ui/desktop/app/styles/app.scss
@@ -487,7 +487,9 @@ $chevron-down: url("data:image/svg+xml;utf-8,
-
+
+
+ {{#with
+ (resource-filter 'scopes.scope.projects.sessions' 'status')
+ as |filter|
+ }}
+
-
-
-
-
-
- {{/with}}
+
+
+
+
+
+
+ {{/with}}
- {{#with
- (resource-filter 'scopes.scope.projects.sessions' 'project')
- as |filter|
- }}
-
-
- {{#with
- (group-by filter.allowedValues 'scopeModel')
- as |groups|
- }}
- {{#each groups as |groupedItems|}}
-
-
-
- {{groupedItems.key.displayName}}
-
-
-
-
-
-
-
-
-
-
- {{/each}}
- {{/with}}
-
+ {{#with
+ (resource-filter 'scopes.scope.projects.sessions' 'project')
+ as |filter|
+ }}
+
+
+ {{#with
+ (group-by filter.allowedValues 'scopeModel')
+ as |groups|
+ }}
+ {{#each groups as |groupedItems|}}
+
+
+
+ {{groupedItems.key.displayName}}
+
+
+
+
+
+
+
+
+
+
+ {{/each}}
+ {{/with}}
+
+
+ {{/with}}
- {{! }}
-
- {{/with}}
-
- {{#if
- (has-resource-filter-selections
- 'scopes.scope.projects.sessions' 'status' 'project'
- )
- }}
- {{t 'actions.clear-all-filters'}}
-
- {{/if}}
+ {{#if
+ (has-resource-filter-selections
+ 'scopes.scope.projects.sessions' 'status' 'project'
+ )
+ }}
+ {{t 'actions.clear-all-filters'}}
+
+ {{/if}}
+
+
+
+
-
{{/if}}
{{/if}}
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs
index ff0f8d4a5..e15d6b4d2 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/targets/index.hbs
@@ -18,75 +18,77 @@
)
)
}}
-
-
- {{#with
- (resource-filter 'scopes.scope.projects.targets' 'project')
- as |filter|
- }}
-
-
- {{#with
- (group-by filter.allowedValues 'scopeModel')
- as |groups|
- }}
- {{#each groups as |groupedItems|}}
-
-
-
- {{groupedItems.key.displayName}}
-
-
-
-
-
-
-
-
-
-
- {{/each}}
- {{/with}}
-
+
+
+
+ {{#with
+ (resource-filter 'scopes.scope.projects.targets' 'project')
+ as |filter|
+ }}
+
+
+ {{#with
+ (group-by filter.allowedValues 'scopeModel')
+ as |groups|
+ }}
+ {{#each groups as |groupedItems|}}
+
+
+
+ {{groupedItems.key.displayName}}
+
+
+
+
+
+
+
+
+
+
+ {{/each}}
+ {{/with}}
+
+
+ {{/with}}
- {{! }}
-
- {{/with}}
-
- {{#if
- (has-resource-filter-selections
- 'scopes.scope.projects.targets' 'project'
- )
- }}
- {{t 'actions.clear-all-filters'}}
-
- {{/if}}
+ {{#if
+ (has-resource-filter-selections
+ 'scopes.scope.projects.targets' 'project'
+ )
+ }}
+ {{t 'actions.clear-all-filters'}}
+
+ {{/if}}
+
+
+
+
-
{{/if}}
{{/if}}