libretic
/
etherpad-lite
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css: improve popup opening animation

This commit is contained in:
Sebastian Castro 2020-04-06 11:11:08 +02:00 committed by muxator
parent a5d461f25f
commit 2dc4cfdfe1
10 changed files with 74 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/static/css/pad/gritter.css
View File

@ -7,14 +7,17 @@
z-index: 9999; z-index: 9999;
} }
.gritter-item { .gritter-item.popup {
position: relative; position: relative;
max-width: 400px; max-width: 400px;
min-width: 0; min-width: 0;
margin: 0 auto; margin: 0 auto;
visibility: visible;
top: auto;
}
.gritter-item .popup-content {
display: flex; display: flex;
} }
.gritter-item .gritter-content { .gritter-item .gritter-content {
flex: 1 auto; flex: 1 auto;
text-align: center; text-align: center;
@ -29,7 +32,7 @@
display: block; display: block;
} }
.gritter-item.error { .gritter-item.error .popup-content {
color: #a84341; color: #a84341;
background-color: #eed3d4; background-color: #eed3d4;
} }

37
src/static/css/pad/popup.css
View File

@ -1,15 +1,38 @@
.popup.popup-show {
visibility: visible;
}
.popup > .popup-content {
transform: scale(0.7);
opacity: 0;
transition: all 0.3s cubic-bezier(0.74, -0.05, 0.27, 1.75)
}
.popup.popup-show > .popup-content {
transform: scale(1);
opacity: 1;
}
.popup { .popup {
position: absolute; position: absolute;
top: 0; top: 10px;
right: 20px; right: 30px;
display: none; visibility: hidden;
z-index: 500; z-index: 500;
min-width: 300px; min-width: 300px;
max-width: 600px; max-width: 600px;
}
#mycolorpicker {
top: 0;
}
.popup.toolbar-popup {
right: auto;
margin-left: -10px;
}
.popup-content {
padding: 10px; padding: 10px;
border-radius: 0 0 6px 6px; border-radius: 6px;
border: 1px solid #ccc; border: 1px solid #ccc;
border-top: none;
box-shadow: 0 2px 4px #ddd; box-shadow: 0 2px 4px #ddd;
background: #f7f7f7; background: #f7f7f7;
} }
@ -58,7 +81,7 @@
max-width: none !important; max-width: none !important;
} }
/* Move popup to the bottom, except popup linked to left toolbar, like hyperklink popup */ /* Move popup to the bottom, except popup linked to left toolbar, like hyperklink popup */
.popup:not(.hyperlink-dialog):not(.toolbar-popup) { .popup:not(.toolbar-popup) {
top: auto; top: auto;
bottom: 0; bottom: 0;
border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0;
@ -67,7 +90,7 @@
box-shadow: 0 -2px 4px #ddd; box-shadow: 0 -2px 4px #ddd;
} }
.toolbar-popup, .hyperlink-dialog { .toolbar-popup {
left: 0 !important; /* overide javascript positionning */ left: 0 !important; /* overide javascript positionning */
right: 0 !important; right: 0 !important;
} }

14
src/static/js/gritter.js
View File

@ -81,11 +81,13 @@
_tpl_title: '<h3 class="gritter-title">[[title]]</h3>', _tpl_title: '<h3 class="gritter-title">[[title]]</h3>',
_tpl_item: [ _tpl_item: [
'<div id="gritter-item-[[number]]" class="popup gritter-item [[item_class]]">', '<div id="gritter-item-[[number]]" class="popup gritter-item [[item_class]]">',
'<div class="gritter-content">', '<div class="popup-content">',
'[[title]]', '<div class="gritter-content">',
'<p>[[text]]</p>', '[[title]]',
'<p>[[text]]</p>',
'</div>',
'<div class="gritter-close"><i class="buttonicon buttonicon-cancel"></i></div>',
'</div>', '</div>',
'<div class="gritter-close"><i class="buttonicon buttonicon-cancel"></i></div>',
'</div>'].join(''), '</div>'].join(''),
@ -162,7 +164,7 @@
var item = $('#gritter-item-' + this._item_count); var item = $('#gritter-item-' + this._item_count);
item.fadeIn(this.fade_in_speed, function(){ item.addClass('popup-show').fadeIn(this.fade_in_speed, function(){
Gritter['_after_open_' + number]($(this)); Gritter['_after_open_' + number]($(this));
}); });
@ -244,7 +246,7 @@
e.animate({ height: 0 }, 300, function(){ e.animate({ height: 0 }, 300, function(){
Gritter._countRemoveWrapper(unique_id, e, manual_close); Gritter._countRemoveWrapper(unique_id, e, manual_close);
}) })
}) }).removeClass('popup-show')
} }
else { else {

10
src/static/js/pad_editbar.js
View File

@ -231,8 +231,7 @@ var padeditbar = (function()
if(module.css('display') != "none") if(module.css('display') != "none")
{ {
$("li[data-key=" + thisModuleName + "] > a").removeClass("selected"); $("li[data-key=" + thisModuleName + "] > a").removeClass("selected");
module.slideUp("fast", cb); module.removeClass("popup-show");
returned = true;
} }
} }
if(!returned && cb) return cb(); if(!returned && cb) return cb();
@ -246,15 +245,16 @@ var padeditbar = (function()
var thisModuleName = self.dropdowns[i]; var thisModuleName = self.dropdowns[i];
var module = $("#" + thisModuleName); var module = $("#" + thisModuleName);
if(module.css('display') != "none") if(module.hasClass('popup-show'))
{ {
$("li[data-key=" + thisModuleName + "] > a").removeClass("selected"); $("li[data-key=" + thisModuleName + "] > a").removeClass("selected");
module.slideUp("fast"); module.removeClass("popup-show");
} }
else if(thisModuleName==moduleName) else if(thisModuleName==moduleName)
{ {
$("li[data-key=" + thisModuleName + "] > a").addClass("selected"); $("li[data-key=" + thisModuleName + "] > a").addClass("selected");
module.slideDown("fast", cb); module.addClass("popup-show")
cb();
} }
} }
} }

4
src/static/js/pad_userlist.js
View File

@ -785,7 +785,7 @@ function closeColorPicker(accept)
} }
colorPickerOpen = false; colorPickerOpen = false;
$("#mycolorpicker").fadeOut("fast"); $("#mycolorpicker").removeClass('popup-show');
} }
function showColorPicker() function showColorPicker()
@ -823,7 +823,7 @@ function showColorPicker()
colorPickerSetup = true; colorPickerSetup = true;
} }
$("#mycolorpicker").fadeIn(); $("#mycolorpicker").addClass('popup-show')
colorPickerOpen = true; colorPickerOpen = true;
$("#colorpickerswatches li").removeClass('picked'); $("#colorpickerswatches li").removeClass('picked');

2
src/static/skins/colibris/pad.css
View File

@ -72,7 +72,7 @@ p[data-l10n-id="ep_comments_page.comment"],
#slider-btn-container .stepper, #importmessageabiword, #importmessageabiword > a, #slider-btn-container .stepper, #importmessageabiword, #importmessageabiword > a,
.toolbar .show-more-icon-btn .toolbar .show-more-icon-btn
{ color: #64d29b; } { color: #64d29b; }
#timeslider-slider #ui-slider-handle, #playpause_button_icon, .gritter-item:not(.error) { #timeslider-slider #ui-slider-handle, #playpause_button_icon, .gritter-item:not(.error) .popup-content{
background-color: #64d29b; background-color: #64d29b;
} }
#slider-btn-container button { #slider-btn-container button {

2
src/static/skins/colibris/src/components/gritter.css
View File

@ -1,5 +1,7 @@
.gritter-item { .gritter-item {
margin-bottom: 10px; margin-bottom: 10px;
}
.gritter-item .popup-content {
color: white; color: white;
box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08); box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
} }

6
src/static/skins/colibris/src/components/popup.css
View File

@ -1,8 +1,6 @@
.popup { .popup-content {
top: -2px;
right: 30px;
border-radius: 3px; border-radius: 3px;
padding: 20px 20px; padding: 25px;
background: none; background: none;
background-color: white; background-color: white;
border: none; border: none;

24
src/templates/pad.html
View File

@ -117,7 +117,7 @@
<!-- SETTINGS POPUP (change font, language, chat parameters) --> <!-- SETTINGS POPUP (change font, language, chat parameters) -->
<!-------------------------------------------------------------> <!------------------------------------------------------------->
<div id="settings" class="popup"> <div id="settings" class="popup"><div class="popup-content">
<h1 data-l10n-id="pad.settings.padSettings"></h1> <h1 data-l10n-id="pad.settings.padSettings"></h1>
<% e.begin_block("mySettings"); %> <% e.begin_block("mySettings"); %>
<h2 data-l10n-id="pad.settings.myView"></h2> <h2 data-l10n-id="pad.settings.myView"></h2>
@ -180,14 +180,14 @@
<span data-l10n-id="pad.settings.poweredBy">Powered by</span> <span data-l10n-id="pad.settings.poweredBy">Powered by</span>
<a href="http://etherpad.org">Etherpad-lite</a> <a href="http://etherpad.org">Etherpad-lite</a>
<% if (settings.exposeVersion) { %>(commit <%=settings.getGitCommit()%>)<% } %> <% if (settings.exposeVersion) { %>(commit <%=settings.getGitCommit()%>)<% } %>
</div> </div></div>
<!-------------------------> <!------------------------->
<!-- IMPORT EXPORT POPUP --> <!-- IMPORT EXPORT POPUP -->
<!-------------------------> <!------------------------->
<div id="import_export" class="popup"> <div id="import_export" class="popup"><div class="popup-content">
<h1 data-l10n-id="pad.importExport.import_export"></h1> <h1 data-l10n-id="pad.importExport.import_export"></h1>
<div class="acl-write"> <div class="acl-write">
<% e.begin_block("importColumn"); %> <% e.begin_block("importColumn"); %>
@ -232,14 +232,14 @@
</a> </a>
<% e.end_block(); %> <% e.end_block(); %>
</div> </div>
</div> </div></div>
<!----------------------------------------------------> <!---------------------------------------------------->
<!-- CONNECTIVITY POPUP (when you get disconnected) --> <!-- CONNECTIVITY POPUP (when you get disconnected) -->
<!----------------------------------------------------> <!---------------------------------------------------->
<div id="connectivity" class="popup"> <div id="connectivity" class="popup"><div class="popup-content">
<% e.begin_block("modals"); %> <% e.begin_block("modals"); %>
<div class="connected visible"> <div class="connected visible">
<h2 data-l10n-id="pad.modals.connected"></h2> <h2 data-l10n-id="pad.modals.connected"></h2>
@ -304,14 +304,14 @@
<input type="hidden" class="missedChanges" name="missedChanges"> <input type="hidden" class="missedChanges" name="missedChanges">
</form> </form>
<% e.end_block(); %> <% e.end_block(); %>
</div> </div></div>
<!--------------------------------> <!-------------------------------->
<!-- EMBED POPUP (Share, embed) --> <!-- EMBED POPUP (Share, embed) -->
<!--------------------------------> <!-------------------------------->
<div id="embed" class="popup"> <div id="embed" class="popup"><div class="popup-content">
<% e.begin_block("embedPopup"); %> <% e.begin_block("embedPopup"); %>
<h1 data-l10n-id="pad.share"></h1> <h1 data-l10n-id="pad.share"></h1>
<div id="embedreadonly" class="acl-write"> <div id="embedreadonly" class="acl-write">
@ -327,7 +327,7 @@
<input id="embedinput" type="text" value="" onclick="this.select()"> <input id="embedinput" type="text" value="" onclick="this.select()">
</div> </div>
<% e.end_block(); %> <% e.end_block(); %>
</div> </div></div>
<div class="sticky-container"> <div class="sticky-container">
@ -335,18 +335,18 @@
<!-- USERS POPUP (set username, color, see other users names & color) --> <!-- USERS POPUP (set username, color, see other users names & color) -->
<!----------------------------------------------------------------------> <!---------------------------------------------------------------------->
<div id="users" class="popup"> <div id="users" class="popup"><div class="popup-content">
<% e.begin_block("userlist"); %> <% e.begin_block("userlist"); %>
<div id="connectionstatus"></div> <div id="connectionstatus"></div>
<div id="myuser"> <div id="myuser">
<div id="mycolorpicker" class="popup"> <div id="mycolorpicker" class="popup"><div class="popup-content">
<div id="colorpicker"></div> <div id="colorpicker"></div>
<div class="btn-container"> <div class="btn-container">
<button id="mycolorpickersave" data-l10n-id="pad.colorpicker.save" class="btn btn-primary"></button> <button id="mycolorpickersave" data-l10n-id="pad.colorpicker.save" class="btn btn-primary"></button>
<button id="mycolorpickercancel" data-l10n-id="pad.colorpicker.cancel" class="btn btn-default"></button> <button id="mycolorpickercancel" data-l10n-id="pad.colorpicker.cancel" class="btn btn-default"></button>
<span id="mycolorpickerpreview" class="myswatchboxhoverable"></span> <span id="mycolorpickerpreview" class="myswatchboxhoverable"></span>
</div> </div>
</div> </div></div>
<div id="myswatchbox"><div id="myswatch"></div></div> <div id="myswatchbox"><div id="myswatch"></div></div>
<div id="myusernameform"> <div id="myusernameform">
<input type="text" id="myusernameedit" disabled="disabled" data-l10n-id="pad.userlist.entername"> <input type="text" id="myusernameedit" disabled="disabled" data-l10n-id="pad.userlist.entername">
@ -360,7 +360,7 @@
</div> </div>
<div id="userlistbuttonarea"></div> <div id="userlistbuttonarea"></div>
<% e.end_block(); %> <% e.end_block(); %>
</div> </div></div>
<!-----------------------------> <!----------------------------->

12
src/templates/timeslider.html
View File

@ -121,7 +121,7 @@
<!-- IMPORT EXPORT POPUP --> <!-- IMPORT EXPORT POPUP -->
<!-------------------------> <!------------------------->
<div id="import_export" class="popup" > <div id="import_export" class="popup" ><div class="popup-content">
<div id="export"> <div id="export">
<p data-l10n-id="timeslider.exportCurrent"></p> <p data-l10n-id="timeslider.exportCurrent"></p>
<a id="exportetherpada" target="_blank" class="exportlink"><div class="exporttype" id="exportetherpad" data-l10n-id="pad.importExport.exportetherpad"></div></a> <a id="exportetherpada" target="_blank" class="exportlink"><div class="exporttype" id="exportetherpad" data-l10n-id="pad.importExport.exportetherpad"></div></a>
@ -131,14 +131,14 @@
<a id="exportpdfa" target="_blank" class="exportlink"><div class="exporttype" id="exportpdf" data-l10n-id="pad.importExport.exportpdf"></div></a> <a id="exportpdfa" target="_blank" class="exportlink"><div class="exporttype" id="exportpdf" data-l10n-id="pad.importExport.exportpdf"></div></a>
<a id="exportopena" target="_blank" class="exportlink"><div class="exporttype" id="exportopen" data-l10n-id="pad.importExport.exportopen"></div></a> <a id="exportopena" target="_blank" class="exportlink"><div class="exporttype" id="exportopen" data-l10n-id="pad.importExport.exportopen"></div></a>
</div> </div>
</div> </div></div>
<!----------------------------------------------------> <!---------------------------------------------------->
<!-- CONNECTIVITY POPUP (when you get disconnected) --> <!-- CONNECTIVITY POPUP (when you get disconnected) -->
<!----------------------------------------------------> <!---------------------------------------------------->
<div id="connectivity" class="popup"> <div id="connectivity" class="popup"><div class="popup-content">
<% e.begin_block("modals"); %> <% e.begin_block("modals"); %>
<div class="connected visible"> <div class="connected visible">
<h2 data-l10n-id="pad.modals.connected"></h2> <h2 data-l10n-id="pad.modals.connected"></h2>
@ -203,14 +203,14 @@
<input type="hidden" class="missedChanges" name="missedChanges"> <input type="hidden" class="missedChanges" name="missedChanges">
</form> </form>
<% e.end_block(); %> <% e.end_block(); %>
</div> </div></div>
<!----------------------------------> <!---------------------------------->
<!-- SETTINGS POPUP (change font) --> <!-- SETTINGS POPUP (change font) -->
<!----------------------------------> <!---------------------------------->
<div id="settings" class="popup" > <div id="settings" class="popup"><div class="popup-content">
<label for="viewfontmenu" data-l10n-id="pad.settings.fontType">Font type:</label> <label for="viewfontmenu" data-l10n-id="pad.settings.fontType">Font type:</label>
<select id="viewfontmenu"> <select id="viewfontmenu">
<option value="normal" data-l10n-id="pad.settings.fontType.normal"></option> <option value="normal" data-l10n-id="pad.settings.fontType.normal"></option>
@ -234,7 +234,7 @@
<option value="sansserif" data-l10n-id="pad.settings.fontType.sansserif"></option> <option value="sansserif" data-l10n-id="pad.settings.fontType.sansserif"></option>
<option value="serif" data-l10n-id="pad.settings.fontType.serif"></option> <option value="serif" data-l10n-id="pad.settings.fontType.serif"></option>
</select> </select>
</div> </div></div>
</div> </div>
</body> </body>