Files
threshold-ui/ui/desktop/app/templates/application.hbs
T
Lauren 6181df4c69 [Replace][Desktop] Rose::Button (#2812)
* replace rose::button in ui/desktop

* replace .rose-button in ui/admin acceptance tests

* update @iconOnly to @isIconOnly

* add required @text arg for isIconOnly btns

* re-add title html element

* add _button.scss for custom styling

* add hover styling over close btn

* fix a bug when we hover in dark mode

* fix bug in main, hover white should trigger in dark mode

* remove &:not(:disabled) on btn close window class

* fix merge conflict

* fix styling
2025-05-20 12:15:45 -04:00

148 lines
4.0 KiB
Handlebars

{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: BUSL-1.1
}}
{{page-title (app-name)}}
<Rose::Layout::Global as |layout|>
<layout.header>
<Rose::Header
class='{{if (is-loading) " loading"}}
{{if this.hasMacOSChrome " header-cushion"}}'
as |header|
>
<header.brand @logo='logo-app' @text={{(app-name)}} />
<header.nav>
<div id='header-nav'></div>
</header.nav>
<header.utilities as |utilities|>
{{#if this.showWindowActions}}
<Hds::Button
{{on 'click' this.close}}
class='button-window-close'
title={{t 'actions.close'}}
@text={{t 'actions.close'}}
@icon='x'
@isIconOnly={{true}}
/>
<Hds::Button
{{on 'click' this.toggleFullScreen}}
class='button-window-fullscreen'
title={{t 'actions.fullscreen'}}
@text={{t 'actions.fullscreen'}}
@icon='square'
@isIconOnly={{true}}
@color='secondary'
/>
<Hds::Button
{{on 'click' this.minimize}}
class='button-window-minimize'
title={{t 'actions.minimize'}}
@text={{t 'actions.minimize'}}
@icon='minus'
@isIconOnly={{true}}
@color='secondary'
/>
{{/if}}
{{#if this.session.isAuthenticated}}
<utilities.dropdown
@text={{this.session.data.authenticated.username}}
@icon='user-circle'
as |dropdown|
>
<dropdown.button {{on 'click' this.invalidateSession}}>
{{t 'actions.deauthenticate'}}
</dropdown.button>
</utilities.dropdown>
{{/if}}
</header.utilities>
</Rose::Header>
</layout.header>
<layout.body>
{{outlet}}
</layout.body>
</Rose::Layout::Global>
{{#if this.flashMessages.queue}}
<div class='ember-notify-cn'>
{{#each this.flashMessages.queue as |flash|}}
<div class='ember-notify-show ember-notify'>
<Hds::Toast
@color={{map-type-to-color flash.notificationType}}
@onDismiss={{fn flash.dismiss flash}}
data-test-toast-notification
as |T|
>
<T.Title>{{t (concat 'states.' flash.notificationType)}}</T.Title>
<T.Description>{{flash.message}}</T.Description>
</Hds::Toast>
</div>
{{/each}}
</div>
{{/if}}
<PendingConfirmations as |confirmation accept deny|>
{{#if confirmation.options.isConnectError}}
<Hds::Modal @color='critical' as |M|>
<M.Header @icon='alert-diamond' @onDismiss={{deny}}>
{{t 'states.error'}}
</M.Header>
<M.Body>
<Hds::Text::Body @tag='p'>
{{confirmation.text}}
</Hds::Text::Body>
<br />
<Hds::Text::Body @tag='p'>
{{t 'questions.retry-confirm'}}
</Hds::Text::Body>
</M.Body>
<M.Footer>
<Hds::ButtonSet>
<Hds::Button
@text={{t 'actions.retry'}}
@color='primary'
{{on 'click' accept}}
/>
<Hds::Button
@text={{t 'actions.cancel'}}
@color='secondary'
{{on 'click' deny}}
/>
</Hds::ButtonSet>
</M.Footer>
</Hds::Modal>
{{else}}
<Hds::Modal @color='warning' as |M|>
<M.Header @icon='alert-triangle' @onDismiss={{deny}}>
{{t 'actions.confirm'}}
</M.Header>
<M.Body>
<Hds::Text::Body @tag='p'>
{{confirmation.text}}
</Hds::Text::Body>
</M.Body>
<M.Footer>
<Hds::ButtonSet>
<Hds::Button
@text={{t 'actions.ok'}}
@color='primary'
{{on 'click' accept}}
/>
<Hds::Button
@text={{t 'actions.cancel'}}
@color='secondary'
{{on 'click' deny}}
/>
</Hds::ButtonSet>
</M.Footer>
</Hds::Modal>
{{/if}}
</PendingConfirmations>