Skip to content

Commit

Permalink
Merge branch 'task/dev/#72' into nightly
Browse files Browse the repository at this point in the history
  • Loading branch information
xaota committed Jul 18, 2017
2 parents 58f1448 + b17ea5b commit 535f967
Show file tree
Hide file tree
Showing 6 changed files with 124 additions and 0 deletions.
9 changes: 9 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -123,5 +123,14 @@ <h3>Добавить тег</h3>
</div>
</article>


<div id="notify" class="state info">
<h5>Заголовок уведомления</h5>
<div>
<p>Текст уведомления из нескольких строк</p>
<p>вторая строка</p>
<p>Третья строка</p>
</div>
</div>
</body>
</html>
8 changes: 8 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,5 +39,13 @@

/** @section INIT */
$.ready(_ => ui.ready());
$.ready(function() {
setTimeout(_ => {
UI.notify('Тест','текст').info()
.then(notify => notify.data('Ошибка!', 'текст ошибки').error())
.then(notify => notify.data('Процесс!', 'описание действия').process())
.then(notify => notify.data('Успех!', 'Ура-ура').success())
}, 1000);
});

})(window, document);
47 changes: 47 additions & 0 deletions script/ui.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,53 @@ class UI {
static value(input) { // ?
return $(input).value();
}

static notify(header = '', ...text) {
let types = 'info,error,success,process'.split(',');

let notify = {
data(header, ...text) {
$('#notify > h5').text(header);
$('#notify > div').clear().loop(init, text.length, text);
return this;
},
info(timeout = 5) {
return show(timeout);
},
error(timeout = 5) {
return show(timeout, 'error');
},
success(timeout = 3) {
return show(timeout, 'success');
},
process(timeout = 3) {
return show(timeout, 'process');
}
};

return notify.data(header, ...text);

function show(timeout = 0, type = 'info') {
timeout *= 1e3;
$('#notify').addClass('active').removeClass(types).addClass(type);
return new Promise(function(resolve, reject) {
if (timeout) {
setTimeout(_ => {
hide();
resolve(notify);
}, timeout);
} else resolve(notify);
});
}

function hide() {
$('#notify').removeClass('active');
}

function init(index, string) {
this.add('p').text(string);
}
}
}

class Controller {
Expand Down
1 change: 1 addition & 0 deletions style.less
Original file line number Diff line number Diff line change
Expand Up @@ -103,3 +103,4 @@ input.splash { display: none;
#layer-editor-toggle:checked ~ #splash > label[for="layer-editor-toggle"] { display: block; }

@import "style/control.less";
@import "style/notify.less";
54 changes: 54 additions & 0 deletions style/notify.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
/** @section основное */
#notify {
.font(1em);
.animate(.3s);
color: @color-black;
position: fixed;
left: 0;
bottom: 1em;
height: 4em;
width: 0;
padding: 0;
overflow: hidden;
box-shadow: none;
opacity: 0;
.edge;
}

/** @section состояния */
#notify.active {
.shadow(@shadow-offset, @shadow-offset, @shadow-blur, @color-shadow);
width: 320px;
left: 1em;
padding: 1em;
min-height: 4em;
height: auto;
overflow: auto;
opacity: 1;
}

/** @section типы уведомлений */
#notify.error {
background: @color-error;
.edge(darken(@color-error, 20%));
}

#notify.info {
background: @color-second;
.edge(@color-accent);
}

#notify.success {
background: @color-success;
.edge(darken(@color-success, 20%));
}

#notify.process {
background: @color-process;
.edge(darken(@color-process, 20%));
}

/** @section оформление */
#notify > h5 {
.font(1em, bold);
}
5 changes: 5 additions & 0 deletions style/variables.less
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@
@color-shadow: #ccc;
@color-accent: #03A9F4;

@color-error : #F9D0C4;
@color-info : @color-second;
@color-success: #C2E0C6;
@color-process: #DEF2F0;

@darkPrimaryColor: #1976D2;
@primaryColor: #2196F3;
@lightPrimaryColor: #BBDEFB;
Expand Down

0 comments on commit 535f967

Please sign in to comment.