From b70ba41e174e10742725766c78f5565f1f407e8f Mon Sep 17 00:00:00 2001 From: Samuel Georges Date: Tue, 26 May 2015 19:16:09 +1000 Subject: [PATCH] Move flash messages out --- modules/backend/assets/js/october.js | 5 +- modules/backend/assets/less/controls.less | 1 - .../backend/assets/less/core/variables.less | 6 - modules/backend/assets/less/october.less | 11 +- modules/system/assets/ui/docs/flag.md | 239 ++++++++++++++++++ modules/system/assets/ui/docs/flashmessage.md | 7 + .../assets/ui/js/flashmessage.js} | 0 modules/system/assets/ui/less/button.less | 8 + .../system/assets/ui/less/button.mixins.less | 51 +++- .../assets/ui/less}/flashmessage.less | 15 +- .../assets/ui/less/global.mixins.css3.less | 20 ++ modules/system/assets/ui/less/icon.close.less | 36 +++ modules/system/assets/ui/less/icon.less | 1 + 13 files changed, 385 insertions(+), 15 deletions(-) create mode 100644 modules/system/assets/ui/docs/flashmessage.md rename modules/{backend/assets/js/october.flashmessage.js => system/assets/ui/js/flashmessage.js} (100%) rename modules/{backend/assets/less/controls => system/assets/ui/less}/flashmessage.less (74%) create mode 100644 modules/system/assets/ui/less/icon.close.less diff --git a/modules/backend/assets/js/october.js b/modules/backend/assets/js/october.js index 339b93503..e6abb0925 100644 --- a/modules/backend/assets/js/october.js +++ b/modules/backend/assets/js/october.js @@ -7,9 +7,11 @@ * @see october-min.js * +=require ../../../system/assets/ui/js/foundation.js +=require ../../../system/assets/ui/js/flashmessage.js + =require october.controls.js =require october.utils.js -=require ../../../system/assets/ui/js/foundation.js =require october.scrollpad.js =require october.triggerapi.js =require october.dragscroll.js @@ -28,7 +30,6 @@ =require october.hotkey.js =require october.loadindicator.js =require october.stripeloadindicator.js -=require october.flashmessage.js =require october.inputpreset.js =require october.layout.js =require october.sidepaneltab.js diff --git a/modules/backend/assets/less/controls.less b/modules/backend/assets/less/controls.less index 0afe32f66..8bae2fc04 100644 --- a/modules/backend/assets/less/controls.less +++ b/modules/backend/assets/less/controls.less @@ -17,7 +17,6 @@ @import "controls/common.less"; @import "controls/dropdown.less"; @import "controls/tab.less"; -@import "controls/flashmessage.less"; @import "controls/pagination.less"; @import "controls/scoreboard.less"; @import "controls/charts.less"; diff --git a/modules/backend/assets/less/core/variables.less b/modules/backend/assets/less/core/variables.less index aa772c505..69f4cefa6 100644 --- a/modules/backend/assets/less/core/variables.less +++ b/modules/backend/assets/less/core/variables.less @@ -167,12 +167,6 @@ @color-outer-header: #1d2d3d; @color-outer-form-label: #666666; -@color-flash-success-bg: #8da85e; -@color-flash-error-bg: #cc3300; -@color-flash-warning-bg: #f0ad4e; -@color-flash-info-bg: #5fb6f5; -@color-flash-text: #ffffff; - @color-filter-text: #666666; @color-filter-bg: #f3f3f3; @color-filter-bg-active: #cc3300; diff --git a/modules/backend/assets/less/october.less b/modules/backend/assets/less/october.less index a4aa565a1..b627da928 100644 --- a/modules/backend/assets/less/october.less +++ b/modules/backend/assets/less/october.less @@ -10,15 +10,20 @@ // 1200-9000 - Reserved for frequency manager // +// +// Controls +// + +@import "../../../system/assets/ui/less/icon.less" +@import "../../../system/assets/ui/less/flag.less" +@import "../../../system/assets/ui/less/flashmessage.less" + // // Combines layout and vendor styles // // Core (shared elements) @import "core/bootstrap.less"; -@import "../../../system/assets/vendor/font-autumn/less/font-autumn.less"; -@import "core/icons.less"; -@import "core/flags.less"; @import "core/fonts.less"; @import "core/animations.less"; diff --git a/modules/system/assets/ui/docs/flag.md b/modules/system/assets/ui/docs/flag.md index f95390e59..50ae451cc 100644 --- a/modules/system/assets/ui/docs/flag.md +++ b/modules/system/assets/ui/docs/flag.md @@ -1,2 +1,241 @@ Provides flags of various descriptions +# Example + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/modules/system/assets/ui/docs/flashmessage.md b/modules/system/assets/ui/docs/flashmessage.md new file mode 100644 index 000000000..b10757666 --- /dev/null +++ b/modules/system/assets/ui/docs/flashmessage.md @@ -0,0 +1,7 @@ +# Example + +

This message is created from a static element. It will go away in 5 seconds.

+ +

Create Success message

+

Create Error message

+

Create Warning message

diff --git a/modules/backend/assets/js/october.flashmessage.js b/modules/system/assets/ui/js/flashmessage.js similarity index 100% rename from modules/backend/assets/js/october.flashmessage.js rename to modules/system/assets/ui/js/flashmessage.js diff --git a/modules/system/assets/ui/less/button.less b/modules/system/assets/ui/less/button.less index 677bb3c5a..af12a7e58 100644 --- a/modules/system/assets/ui/less/button.less +++ b/modules/system/assets/ui/less/button.less @@ -1,6 +1,14 @@ +// +// Dependencies +// -------------------------------------------------- + +@import "global.less"; + // // Buttons // -------------------------------------------------- +@import "button.mixins"; +@import "button.variables"; @import "button.base"; @import "button.groups"; diff --git a/modules/system/assets/ui/less/button.mixins.less b/modules/system/assets/ui/less/button.mixins.less index 082f5dd42..fa9e40af4 100644 --- a/modules/system/assets/ui/less/button.mixins.less +++ b/modules/system/assets/ui/less/button.mixins.less @@ -1,3 +1,50 @@ -// Mixins -// -------------------------- +// Button variants +// ------------------------- +// Easily pump out default styles, as well as :hover, :focus, :active, +// and disabled options for all buttons +.button-variant(@color; @background; @border) { + color: @color; + background-color: @background; + border-color: @border; + &:hover, + &:focus, + &:active, + &.active, + .open .dropdown-toggle& { + color: @color; + background-color: darken(@background, 8%); + border-color: darken(@border, 12%); + } + &:active, + &.active, + .open .dropdown-toggle& { + background-image: none; + } + &.disabled, + &[disabled], + fieldset[disabled] & { + &, + &:hover, + &:focus, + &:active, + &.active { + background-color: @background; + border-color: @border; + } + } + + .badge { + color: @background; + background-color: @color; + } +} + +// Button sizes +// ------------------------- +.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) { + padding: @padding-vertical @padding-horizontal; + font-size: @font-size; + line-height: @line-height; + border-radius: @border-radius; +} diff --git a/modules/backend/assets/less/controls/flashmessage.less b/modules/system/assets/ui/less/flashmessage.less similarity index 74% rename from modules/backend/assets/less/controls/flashmessage.less rename to modules/system/assets/ui/less/flashmessage.less index ba0333a27..8028ab54e 100644 --- a/modules/backend/assets/less/controls/flashmessage.less +++ b/modules/system/assets/ui/less/flashmessage.less @@ -1,9 +1,22 @@ +// +// Dependencies +// -------------------------------------------------- + +@import "global.less"; +@import "icon.close.less"; + // // Flash Messages // -------------------------------------------------- +@color-flash-success-bg: #8da85e; +@color-flash-error-bg: #cc3300; +@color-flash-warning-bg: #f0ad4e; +@color-flash-info-bg: #5fb6f5; +@color-flash-text: #ffffff; + #layout-canvas { - .flash-message{display: none;} + .flash-message{ display: none; } } .flash-message { diff --git a/modules/system/assets/ui/less/global.mixins.css3.less b/modules/system/assets/ui/less/global.mixins.css3.less index e82836b39..9019c0d62 100644 --- a/modules/system/assets/ui/less/global.mixins.css3.less +++ b/modules/system/assets/ui/less/global.mixins.css3.less @@ -199,3 +199,23 @@ @opacity-ie: (@opacity * 100); filter: ~"alpha(opacity=@{opacity-ie})"; } + +// Universal transform +// -------------------------------------------------- + +.transform(@transform) { + -webkit-transform: @transform; + -ms-transform: @transform; // IE9+ + transform: @transform; +} + +// Transformations +// + +.scaleAxes(@x, @y) { + -webkit-transform: scale(@x, @y); + -moz-transform: scale(@x, @y); + -ms-transform: scale(@x, @y); + -o-transform: scale(@x, @y); + transform: scale(@x, @y); +} \ No newline at end of file diff --git a/modules/system/assets/ui/less/icon.close.less b/modules/system/assets/ui/less/icon.close.less new file mode 100644 index 000000000..9e5403662 --- /dev/null +++ b/modules/system/assets/ui/less/icon.close.less @@ -0,0 +1,36 @@ +// +// Close icons +// -------------------------------------------------- + +@close-font-weight: bold; +@close-color: #000; +@close-text-shadow: 0 1px 0 #fff; + +.close { + float: right; + font-size: (@font-size-base * 1.5); + font-weight: @close-font-weight; + line-height: 1; + color: @close-color; + text-shadow: @close-text-shadow; + .opacity(.2); + + &:hover, + &:focus { + color: @close-color; + text-decoration: none; + cursor: pointer; + .opacity(.5); + } + + // Additional properties for button version + // iOS requires the button element instead of an anchor tag. + // If you want the anchor version, it requires `href="#"`. + button& { + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; + } +} diff --git a/modules/system/assets/ui/less/icon.less b/modules/system/assets/ui/less/icon.less index 69c56e387..b11045826 100644 --- a/modules/system/assets/ui/less/icon.less +++ b/modules/system/assets/ui/less/icon.less @@ -5,6 +5,7 @@ @import "icon.variables.less"; @import "icon.mixins.less"; @import "icon.icons.less"; +@import "icon.close.less"; @font-face { font-family: 'FontAwesome';