Files
gerrit/polygerrit-ui/app/elements/shared/gr-alert/gr-alert.html
Andrew Bonventre 8f2310717b Show network and server errors in a toast 🍞 notification
gr-error-manager is introduced to deal with error events
fired from gr-rest-api-interface. Currently it will display
the first error it sees for 5 seconds, ignoring others during
that time. If a response comes back as a 403, it prompts the
user to refresh the page and the alert remains on the screen
indefinitely.

Bug: Issue 3992
Bug: Issue 3953
Change-Id: I4a54eb1e865b88f9a5531e864e0b1d58d638a4cd
2016-05-05 11:37:31 -04:00

67 lines
1.9 KiB
HTML

<!--
Copyright (C) 2016 The Android Open Source Project
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../gr-button/gr-button.html">
<dom-module id="gr-alert">
<template>
<style>
/**
* ALERT: DO NOT ADD TRANSITION PROPERTIES WITHOUT PROPERLY UNDERSTANDING
* HOW THEY ARE USED IN THE CODE.
*/
:host([toast]) {
background-color: #333;
bottom: 1.25rem;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
color: #fff;
left: 1.25rem;
padding: 1em 1.5em;
position: fixed;
transform: translateY(5rem);
transition: transform var(--gr-alert-transition-duration, 80ms) ease-out;
}
:host([shown]) {
transform: translateY(0);
}
.text {
display: inline-block;
max-width: 25em;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
white-space: nowrap;
}
.action {
color: #a1c2fa;
font-weight: bold;
margin-left: 1em;
text-decoration: none;
}
</style>
<span class="text">[[text]]</span>
<gr-button
link
class="action"
hidden$="[[_hideActionButton]]"
on-tap="_handleActionTap">[[actionText]]</gr-button>
</template>
<script src="gr-alert.js"></script>
</dom-module>