mirror_php/winter
1
0
Fork 0
mirror of https://github.com/wintercms/winter.git synced 2024-06-28 05:33:29 +02:00
Code Issues Projects Releases Wiki Activity

Move flash messages out

Browse Source
This commit is contained in:
Samuel Georges 2015-05-26 19:16:09 +10:00
parent 5a66dd7fb6
commit b70ba41e17
13 changed files with 385 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
modules/backend/assets/js/october.js
View File

@ -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

1
modules/backend/assets/less/controls.less
View File

@ -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";

6
modules/backend/assets/less/core/variables.less
View File

@ -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;

11
modules/backend/assets/less/october.less
View File

@ -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";

239
modules/system/assets/ui/docs/flag.md
View File

@ -1,2 +1,241 @@
Provides flags of various descriptions
# Example
<i class="flag-eu"></i>
<i class="flag-ad"></i>
<i class="flag-ae"></i>
<i class="flag-af"></i>
<i class="flag-ag"></i>
<i class="flag-ai"></i>
<i class="flag-al"></i>
<i class="flag-am"></i>
<i class="flag-ao"></i>
<i class="flag-aq"></i>
<i class="flag-ar"></i>
<i class="flag-as"></i>
<i class="flag-at"></i>
<i class="flag-au"></i>
<i class="flag-aw"></i>
<i class="flag-ax"></i>
<i class="flag-az"></i>
<i class="flag-ba"></i>
<i class="flag-bb"></i>
<i class="flag-bd"></i>
<i class="flag-be"></i>
<i class="flag-bf"></i>
<i class="flag-bg"></i>
<i class="flag-bh"></i>
<i class="flag-bi"></i>
<i class="flag-bj"></i>
<i class="flag-bm"></i>
<i class="flag-bn"></i>
<i class="flag-bo"></i>
<i class="flag-br"></i>
<i class="flag-bs"></i>
<i class="flag-bt"></i>
<i class="flag-bw"></i>
<i class="flag-by"></i>
<i class="flag-bz"></i>
<i class="flag-ca"></i>
<i class="flag-cg"></i>
<i class="flag-cf"></i>
<i class="flag-cd"></i>
<i class="flag-ch"></i>
<i class="flag-ci"></i>
<i class="flag-ck"></i>
<i class="flag-cl"></i>
<i class="flag-cm"></i>
<i class="flag-cn"></i>
<i class="flag-co"></i>
<i class="flag-cr"></i>
<i class="flag-cu"></i>
<i class="flag-cv"></i>
<i class="flag-cy"></i>
<i class="flag-cz"></i>
<i class="flag-de"></i>
<i class="flag-dj"></i>
<i class="flag-dk"></i>
<i class="flag-dm"></i>
<i class="flag-do"></i>
<i class="flag-dz"></i>
<i class="flag-ec"></i>
<i class="flag-ee"></i>
<i class="flag-eg"></i>
<i class="flag-eh"></i>
<i class="flag-er"></i>
<i class="flag-es"></i>
<i class="flag-et"></i>
<i class="flag-fi"></i>
<i class="flag-fj"></i>
<i class="flag-fm"></i>
<i class="flag-fo"></i>
<i class="flag-fr"></i>
<i class="flag-bl"></i>
<i class="flag-cp"></i>
<i class="flag-mf"></i>
<i class="flag-yt"></i>
<i class="flag-ga"></i>
<i class="flag-gb"></i>
<i class="flag-sh"></i>
<i class="flag-gd"></i>
<i class="flag-ge"></i>
<i class="flag-gg"></i>
<i class="flag-gh"></i>
<i class="flag-gi"></i>
<i class="flag-gl"></i>
<i class="flag-gm"></i>
<i class="flag-gn"></i>
<i class="flag-gp"></i>
<i class="flag-gq"></i>
<i class="flag-gr"></i>
<i class="flag-gt"></i>
<i class="flag-gu"></i>
<i class="flag-gw"></i>
<i class="flag-gy"></i>
<i class="flag-hk"></i>
<i class="flag-hn"></i>
<i class="flag-hr"></i>
<i class="flag-ht"></i>
<i class="flag-hu"></i>
<i class="flag-id"></i>
<i class="flag-mc"></i>
<i class="flag-ie"></i>
<i class="flag-il"></i>
<i class="flag-im"></i>
<i class="flag-in"></i>
<i class="flag-iq"></i>
<i class="flag-ir"></i>
<i class="flag-is"></i>
<i class="flag-it"></i>
<i class="flag-je"></i>
<i class="flag-jm"></i>
<i class="flag-jo"></i>
<i class="flag-jp"></i>
<i class="flag-ke"></i>
<i class="flag-kg"></i>
<i class="flag-kh"></i>
<i class="flag-ki"></i>
<i class="flag-km"></i>
<i class="flag-kn"></i>
<i class="flag-kp"></i>
<i class="flag-kr"></i>
<i class="flag-kw"></i>
<i class="flag-ky"></i>
<i class="flag-kz"></i>
<i class="flag-la"></i>
<i class="flag-lb"></i>
<i class="flag-lc"></i>
<i class="flag-li"></i>
<i class="flag-lk"></i>
<i class="flag-lr"></i>
<i class="flag-ls"></i>
<i class="flag-lt"></i>
<i class="flag-lu"></i>
<i class="flag-lv"></i>
<i class="flag-ly"></i>
<i class="flag-ma"></i>
<i class="flag-md"></i>
<i class="flag-me"></i>
<i class="flag-mg"></i>
<i class="flag-mh"></i>
<i class="flag-mk"></i>
<i class="flag-ml"></i>
<i class="flag-mm"></i>
<i class="flag-mn"></i>
<i class="flag-mo"></i>
<i class="flag-mq"></i>
<i class="flag-mr"></i>
<i class="flag-ms"></i>
<i class="flag-mt"></i>
<i class="flag-mu"></i>
<i class="flag-mv"></i>
<i class="flag-mw"></i>
<i class="flag-mx"></i>
<i class="flag-my"></i>
<i class="flag-mz"></i>
<i class="flag-na"></i>
<i class="flag-nc"></i>
<i class="flag-ne"></i>
<i class="flag-ng"></i>
<i class="flag-ni"></i>
<i class="flag-nl"></i>
<i class="flag-bq"></i>
<i class="flag-no"></i>
<i class="flag-bv"></i>
<i class="flag-nq"></i>
<i class="flag-sj"></i>
<i class="flag-np"></i>
<i class="flag-nr"></i>
<i class="flag-nz"></i>
<i class="flag-om"></i>
<i class="flag-pa"></i>
<i class="flag-pe"></i>
<i class="flag-pf"></i>
<i class="flag-pg"></i>
<i class="flag-ph"></i>
<i class="flag-pk"></i>
<i class="flag-pl"></i>
<i class="flag-pr"></i>
<i class="flag-ps"></i>
<i class="flag-pt"></i>
<i class="flag-pw"></i>
<i class="flag-py"></i>
<i class="flag-qa"></i>
<i class="flag-re"></i>
<i class="flag-ro"></i>
<i class="flag-rs"></i>
<i class="flag-ru"></i>
<i class="flag-rw"></i>
<i class="flag-sa"></i>
<i class="flag-sb"></i>
<i class="flag-sc"></i>
<i class="flag-sd"></i>
<i class="flag-se"></i>
<i class="flag-sg"></i>
<i class="flag-si"></i>
<i class="flag-sk"></i>
<i class="flag-sl"></i>
<i class="flag-sm"></i>
<i class="flag-sn"></i>
<i class="flag-so"></i>
<i class="flag-sr"></i>
<i class="flag-st"></i>
<i class="flag-sv"></i>
<i class="flag-sy"></i>
<i class="flag-sz"></i>
<i class="flag-tc"></i>
<i class="flag-td"></i>
<i class="flag-tg"></i>
<i class="flag-th"></i>
<i class="flag-tj"></i>
<i class="flag-tl"></i>
<i class="flag-tm"></i>
<i class="flag-tn"></i>
<i class="flag-to"></i>
<i class="flag-tr"></i>
<i class="flag-tt"></i>
<i class="flag-tv"></i>
<i class="flag-tw"></i>
<i class="flag-tz"></i>
<i class="flag-ua"></i>
<i class="flag-ug"></i>
<i class="flag-us"></i>
<i class="flag-uy"></i>
<i class="flag-uz"></i>
<i class="flag-va"></i>
<i class="flag-vc"></i>
<i class="flag-ve"></i>
<i class="flag-vg"></i>
<i class="flag-vi"></i>
<i class="flag-vn"></i>
<i class="flag-vu"></i>
<i class="flag-ws"></i>
<i class="flag-ye"></i>
<i class="flag-za"></i>
<i class="flag-zm"></i>
<i class="flag-zw"></i>
<i class="flag-sx"></i>
<i class="flag-cw"></i>
<i class="flag-ss"></i>

7
modules/system/assets/ui/docs/flashmessage.md Normal file
View File

@ -0,0 +1,7 @@
# Example
<p data-control="flash-message" data-interval="5" class="success">This message is created from a static element. It will go away in 5 seconds.</p>
<p><a href="#" class="btn btn-primary" onclick="$.oc.flashMsg({text: 'The record has been successfully saved. This message will go away in 1 second.', 'class': 'success', 'interval': 1}); return false;">Create Success message</a></p>
<p><a href="#" class="btn btn-danger" onclick="$.oc.flashMsg({text: 'Babam!', 'class': 'error'}); return false;">Create Error message</a></p>
<p><a href="#" class="btn btn-warning" onclick="$.oc.flashMsg({text: 'Warning! October is too good for this world!', 'class': 'warning'}); return false;">Create Warning message</a></p>

0
modules/backend/assets/js/october.flashmessage.js → modules/system/assets/ui/js/flashmessage.js
View File

8
modules/system/assets/ui/less/button.less
View File

@ -1,6 +1,14 @@
//
// Dependencies
// --------------------------------------------------
@import "global.less";
//
// Buttons
// --------------------------------------------------
@import "button.mixins";
@import "button.variables";
@import "button.base";
@import "button.groups";

51
modules/system/assets/ui/less/button.mixins.less
View File

@ -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;
}

15
modules/backend/assets/less/controls/flashmessage.less → modules/system/assets/ui/less/flashmessage.less
View File

@ -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 {

20
modules/system/assets/ui/less/global.mixins.css3.less
View File

@ -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);
}

36
modules/system/assets/ui/less/icon.close.less Normal file
View File

@ -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;
}
}

1
modules/system/assets/ui/less/icon.less
View File

@ -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';