diff --git a/frontend/resources/images/icons/msg-error.svg b/frontend/resources/images/icons/msg-error.svg new file mode 100644 index 000000000..44ef863ce --- /dev/null +++ b/frontend/resources/images/icons/msg-error.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/msg-info.svg b/frontend/resources/images/icons/msg-info.svg new file mode 100644 index 000000000..8c04184cc --- /dev/null +++ b/frontend/resources/images/icons/msg-info.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/msg-success.svg b/frontend/resources/images/icons/msg-success.svg new file mode 100644 index 000000000..584811b18 --- /dev/null +++ b/frontend/resources/images/icons/msg-success.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/msg-warning.svg b/frontend/resources/images/icons/msg-warning.svg new file mode 100644 index 000000000..a2e327a0e --- /dev/null +++ b/frontend/resources/images/icons/msg-warning.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/styles/common/dependencies/colors.scss b/frontend/resources/styles/common/dependencies/colors.scss index faaf930ae..07a903d4f 100644 --- a/frontend/resources/styles/common/dependencies/colors.scss +++ b/frontend/resources/styles/common/dependencies/colors.scss @@ -14,7 +14,7 @@ $color-canvas: #E8E9EA; $color-primary: #31EFB8; // Secondary colors -$color-success: #49D793; +$color-success: #58C35C; $color-complete : #a599c6; $color-warning: #FC8802; $color-danger: #E65244; diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss index f4789d026..c94526be8 100644 --- a/frontend/resources/styles/common/framework.scss +++ b/frontend/resources/styles/common/framework.scss @@ -994,11 +994,186 @@ input[type=range]:focus::-ms-fill-upper { white-space: normal; width: 100%; } + } + } +} +// Messages + +// Banner top + +.msg-banner { + top: 0; + left: 0px; + width: 100%; + height: 40px; + z-index: 13; + + display: flex; + justify-content: center; + align-items: center; + + .close-button { + position: absolute; + right: 0px; + top: 0px; + width: 40px; + height: 40px; + + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + opacity: .35; + + svg { + fill: $color-black; + height: 18px; + width: 18px; + transform: rotate(45deg); } + &:hover { + opacity: .8; + } } + .msg-content { + align-items: center; + color: $color-white; + display: flex; + justify-content: center; + max-width: 60%; + + .icon { + display: flex; + margin-right: $medium; + svg { + fill: $color-white; + height: 20px; + width: 20px; + } + } + + span { + font-size: $fs15; + } + } + + &.fixed { + position: fixed; + } + + &.error { + background-color: $color-danger; + } + + &.success { + background-color: $color-success; + } + + &.warning { + background-color: $color-warning; + } + + &.info { + background-color: $color-info; + } + + &.quick { + .close-button { + display: none; + } + } + + &.hide-message { + @include animation(0, .6s, fadeOutUp); + } +} + +.msg-inline { + display: flex; + margin-bottom: $big; + min-height: 40px; + width: 100%; + + .icon { + display: flex; + flex-shrink: 0; + justify-content: center; + margin-right: $small; + padding: $small; + width: 40px; + + svg { + fill: $color-white; + height: 20px; + width: 20px; + } + } + + .msg-text { + display: flex; + font-size: $fs14; + color: $color-black; + padding: $small; + } + + &.error { + background-color: lighten($color-danger,30%); + .icon { + background-color: $color-danger; + } + } + + &.success { + background-color: lighten($color-success,30%); + .icon { + background-color: $color-success; + } + } + + &.warning { + background-color: lighten($color-warning,30%); + .icon { + background-color: $color-warning; + } + } + + &.info { + background-color: lighten($color-info,30%); + .icon { + background-color: $color-info; + } + } + + .close-button { + width: 40px; + height: 40px; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + opacity: .35; + + svg { + fill: $color-black; + height: 18px; + width: 18px; + transform: rotate(45deg); + } + + &:hover { + opacity: .8; + } + } + + &.quick { + .close-button { + display: none; + } + } } .message-version { diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss index e3409d409..122715b6a 100644 --- a/frontend/resources/styles/main-default.scss +++ b/frontend/resources/styles/main-default.scss @@ -42,7 +42,6 @@ //################################################# @import "main/partials/login"; -@import "main/partials/messages"; @import "main/partials/texts"; @import "main/partials/viewer"; @import "main/partials/viewer-header"; diff --git a/frontend/resources/styles/main/partials/messages.scss b/frontend/resources/styles/main/partials/messages.scss deleted file mode 100644 index a4bcc00ec..000000000 --- a/frontend/resources/styles/main/partials/messages.scss +++ /dev/null @@ -1,74 +0,0 @@ -// Messages - -.message { - position: fixed; - top: 0; - left: 0px; - width: 100%; - height: 40px; - z-index: 13; - - display: flex; - justify-content: center; - align-items: center; - - .close-button { - position: absolute; - right: 0px; - top: 0px; - width: 40px; - height: 40px; - - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - - svg { - fill: $color-black; - height: 18px; - width: 18px; - transform: rotate(45deg); - } - - &:hover { - opacity: .8; - } - - } - - .message-content { - color: $color-white; - - span { - font-size: $fs18; - max-width: 60%; - } - } - - &.error { - background-color: $color-danger; - border-color: $color-danger-dark; - } - - &.success { - background-color: $color-success; - border-color: $color-success-dark; - } - - &.info { - background-color: $color-info; - border-color: $color-info-dark; - } - - &.quick { - .close-button { - display: none; - } - } - - &.hide-message { - @include animation(0, .6s, fadeOutUp); - } -} - diff --git a/frontend/src/uxbox/main/ui/auth.cljs b/frontend/src/uxbox/main/ui/auth.cljs index f410a64ca..189f2d5dc 100644 --- a/frontend/src/uxbox/main/ui/auth.cljs +++ b/frontend/src/uxbox/main/ui/auth.cljs @@ -39,6 +39,13 @@ locale (mf/deref i18n/locale)] [:* [:& messages] + + [:div.msg-banner.error + [:div.msg-content + [:div.icon i/msg-error] + [:span "Lorem ipsum dolor sit amet"] + [:div.close-button i/close]]] + [:div.auth [:section.auth-sidebar [:a.logo {:href "/#/"} i/logo] diff --git a/frontend/src/uxbox/main/ui/auth/register.cljs b/frontend/src/uxbox/main/ui/auth/register.cljs index d51650314..016c46768 100644 --- a/frontend/src/uxbox/main/ui/auth/register.cljs +++ b/frontend/src/uxbox/main/ui/auth/register.cljs @@ -28,13 +28,14 @@ (mf/defc demo-warning + [_] - [:div.featured-note.warning - [:span - [:strong "WARNING: "] - "This is a " [:strong "demo"] " service, " - [:strong "DO NOT USE"] " for real work, " - " the projects will be periodicaly wiped."]]) + + [:div.msg-inline.warning.quick + [:div.icon i/msg-warning] + [:span.msg-text + "WARNING: This is a service, DO NOT USE for real work, the projects will be periodicaly wiped."] + [:div.close-button i/close]]) (s/def ::fullname ::fm/not-empty-string) (s/def ::password ::fm/not-empty-string) diff --git a/frontend/src/uxbox/main/ui/icons.cljs b/frontend/src/uxbox/main/ui/icons.cljs index ca1e58fda..e2a12b1d9 100644 --- a/frontend/src/uxbox/main/ui/icons.cljs +++ b/frontend/src/uxbox/main/ui/icons.cljs @@ -67,6 +67,10 @@ (def mail (icon-xref :mail)) (def minus (icon-xref :minus)) (def move (icon-xref :move)) +(def msg-error (icon-xref :msg-error)) +(def msg-success (icon-xref :msg-success)) +(def msg-warning (icon-xref :msg-warning)) +(def msg-info (icon-xref :msg-info)) (def navigate (icon-xref :navigate)) (def options (icon-xref :options)) (def organize (icon-xref :organize))