deepcrayon
/
lila
1
0
Fork 0
Code Releases Activity

style notifications

es2016
Thibault Duplessis 2019-02-10 19:58:33 +07:00
parent 0d73aed209
commit 0d0a6c5272
9 changed files with 125 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/@types/lichess/index.d.ts vendored
View File

@ -168,7 +168,7 @@ interface Variant {
interface Paginator<A> {
currentPage: number
maxPerPage: number
currentPageResults: [A]
currentPageResults: Array<A>
nbResults: number
previousPage?: number
nextPage?: number

2
ui/common/css/theme/_default.scss
View File

@ -58,7 +58,7 @@ $c-link-hover: c-clearer(saturate($c-primary, 100%), 35%);
$c-bg-input: mix(white, $c-bg-page, 60%);
$c-border: hsl(0, 0%, 80%);
$c-border: hsl(0, 0%, 85%);
$c-page-mask: hsla(0, 0, 0%, 0.5);

105
ui/notify/css/_notify.scss 100644
View File

@ -0,0 +1,105 @@
$c-new: $c-secondary;
#notify_app {
width: 25rem;
right: 0;
border-radius: $box-radius-size 0 0 $box-radius-size;
& .empty {
text-align: center;
padding: 2rem 0;
}
& .spinner {
margin: 50px auto;
}
& .notifications {
transition: opacity 0.3s;
}
& .notifications.scrolling {
opacity: 0.5;
}
& .site_notification {
display: flex;
padding: .6rem 1rem;
background: $c-header-dropdown-bg;
border-bottom: $border;
position: relative;
&:first-child {
border-top-left-radius: $box-radius-size;
}
&:last-child {
border-bottom-left-radius: $box-radius-size;
}
&:hover {
background: $c-zebra;
& i {
color: $c-link;
opacity: 0.9;
}
}
&.new {
background: mix($c-new, $c-header-dropdown-bg, 27%);
& i {
color: $c-new;
opacity: 0.7;
}
&:hover {
background: mix($c-new, $c-header-dropdown-bg, 36%);
& i {
opacity: 1;
}
}
}
& i {
font-size: 2em;
opacity: 0.5;
margin-right: 1rem;
}
}
& .pager {
display: block;
padding: .5rem;
text-align: center;
&.disabled::before {
opacity: 0.3;
}
&:not(.disabled) {
cursor: pointer;
color: $c-link;
transition: 0.13s;
}
&:not(.disabled):hover {
background: $c-primary;
color: $c-primary-over;
}
&.prev {
border-bottom: $border;
border-top-left-radius: $box-radius-size;
}
&.next {
border-bottom-left-radius: $box-radius-size;
}
}
}
.site_notification .content {
flex: 0 1 100%;
white-space: nowrap;
overflow: hidden;
}
.site_notification .content span:first-child {
display: flex;
justify-content: space-between;
}
.site_notification .content span:last-child {
display: block;
text-overflow: ellipsis;
overflow: hidden;
}
.site_notification .content time {
font-size: 0.9em;
font-family: 'Roboto';
font-weight: 300;
}

8
ui/notify/css/build/_notify.scss 100644
View File

@ -0,0 +1,8 @@
@import '../../../common/css/plugin';
$c-notify: $c-secondary;
$c-notify-over: $c-secondary-over;
$c-notify-light: c-dimmer($c-notify, 85);
$c-slider: $c-notify;
@import '../notify';

2
ui/notify/css/build/notify.dark.scss 100644
View File

@ -0,0 +1,2 @@
@import '../../../common/css/theme/dark';
@import 'notify';

2
ui/notify/css/build/notify.light.scss 100644
View File

@ -0,0 +1,2 @@
@import '../../../common/css/theme/light';
@import 'notify';

2
ui/notify/css/build/notify.transp.scss 100644
View File

@ -0,0 +1,2 @@
@import '../../../common/css/theme/transp';
@import 'notify';

4
ui/notify/gulpfile.js
View File

@ -1,3 +1,3 @@
const lilaGulp = require('../gulp/tsProject.js');
require('../gulp/tsProject.js')('LichessNotify', 'lichess.notify', __dirname);
lilaGulp('LichessNotify', 'lichess.notify', __dirname);
require('../gulp/cssProject.js')(__dirname);

3
ui/site/src/main.js
View File

@ -359,7 +359,7 @@ lichess.topMenuIntent = function() {
booted = true;
var $el = $('#notify_app').html(initiatingHtml);
var isDev = $('body').data('dev');
lichess.loadCss('stylesheets/notifyApp.css');
lichess.loadCss(lichess.cssPath('notify'));
lichess.loadScript('compiled/lichess.notify' + (isDev ? '' : '.min') + '.js').done(function() {
instance = LichessNotify.default($el.empty()[0], {
data: data,
@ -388,6 +388,7 @@ lichess.topMenuIntent = function() {
if (instance && isVisible()) instance.setVisible();
}, 200);
});
setTimeout(() => $toggle.trigger('click'), 10);
return {
update: function(data, incoming) {