web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Center vertically slides in present mode and checkbox to disable transitions

Browse Source
This commit is contained in:
yflory 2017-05-11 10:58:33 +02:00
parent cf81b02096
commit 5d0535966c
6 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
customize.dist/translations/messages.fr.js
View File

@ -107,6 +107,7 @@ define(function () {
out.printDate = "Afficher la date";
out.printTitle = "Afficher le titre du pad";
out.printCSS = "Personnaliser l'apparence (CSS):";
out.printTransition = "Activer les animations de transition";
out.slideOptionsTitle = "Personnaliser la présentation";
out.slideOptionsButton = "Enregistrer (Entrée)";

1
customize.dist/translations/messages.js
View File

@ -109,6 +109,7 @@ define(function () {
out.printDate = "Display the date";
out.printTitle = "Display the pad title";
out.printCSS = "Custom style rules (CSS):";
out.printTransition = "Enable transition animations";
out.slideOptionsTitle = "Customize your slides";
out.slideOptionsButton = "Save (enter)";

8
www/slide/main.js
View File

@ -188,6 +188,7 @@ define([
title: false,
slide: false,
date: false,
transition: true,
style: ''
};
@ -220,6 +221,13 @@ define([
}).appendTo($p).css('width', 'auto');
$('<label>', {'for': 'checkTitle'}).text(Messages.printTitle).appendTo($p);
$p.append($('<br>'));
// Transition
$('<input>', {type: 'checkbox', id: 'checkTransition', checked: slideOptionsTmp.transition}).on('change', function () {
var c = this.checked;
slideOptionsTmp.transition = c;
}).appendTo($p).css('width', 'auto');
$('<label>', {'for': 'checkTransition'}).text(Messages.printTransition).appendTo($p);
$p.append($('<br>'));
// CSS
$('<label>', {'for': 'cssPrint'}).text(Messages.printCSS).appendTo($p);
$p.append($('<br>'));

8
www/slide/slide.css
View File

@ -168,13 +168,16 @@ body .CodeMirror-focused .cm-matchhighlight {
}
.cp div.modal #content,
.cp div#modal #content {
transition: margin-left 1s;
font-size: 20vh;
position: relative;
height: 100%;
overflow: visible;
white-space: nowrap;
}
.cp div.modal #content.transition,
.cp div#modal #content.transition {
transition: margin-left 1s;
}
.cp div.modal #content .slide-frame,
.cp div#modal #content .slide-frame {
display: inline-block;
@ -198,10 +201,11 @@ body .CodeMirror-focused .cm-matchhighlight {
}
.cp div.modal #content .slide-container,
.cp div#modal #content .slide-container {
display: inline-block;
display: inline-flex;
height: 100%;
width: 100vw;
text-align: center;
vertical-align: top;
}
.cp div.modal .center,
.cp div#modal .center {

4
www/slide/slide.js
View File

@ -184,6 +184,10 @@ define([
$('<div>', {'class': 'slideTitle'}).text(APP.title).appendTo($(el));
}
});
$content.removeClass('transition');
if (options.transition) {
$content.addClass('transition');
}
//$content.find('.' + slideClass).hide();
//$content.find('.' + slideClass + ':eq( ' + i + ' )').show();
$content.css('margin-left', -(i*100)+'vw');

5
www/slide/slide.less
View File

@ -161,7 +161,9 @@ div.modal, div#modal {
width: 100%;
}
#content {
&.transition {
transition: margin-left 1s;
}
font-size: 20vh;
position: relative;
height: 100%;
@ -191,9 +193,10 @@ div.modal, div#modal {
margin: auto;
}
.slide-container {
display: inline-block;
display: inline-flex;
height: 100%; width: 100vw;
text-align: center;
vertical-align: top;
}
}