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;
}
.gritter-item {
.gritter-item.popup {
position: relative;
max-width: 400px;
min-width: 0;
margin: 0 auto;
visibility: visible;
top: auto;
}
.gritter-item .popup-content {
display: flex;
}
.gritter-item .gritter-content {
flex: 1 auto;
text-align: center;
@ -29,7 +32,7 @@
display: block;
}
.gritter-item.error {
.gritter-item.error .popup-content {
color: #a84341;
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 {
position: absolute;
top: 0;
right: 20px;
display: none;
top: 10px;
right: 30px;
visibility: hidden;
z-index: 500;
min-width: 300px;
max-width: 600px;
}
#mycolorpicker {
top: 0;
}
.popup.toolbar-popup {
right: auto;
margin-left: -10px;
}
.popup-content {
padding: 10px;
border-radius: 0 0 6px 6px;
border-radius: 6px;
border: 1px solid #ccc;
border-top: none;
box-shadow: 0 2px 4px #ddd;
background: #f7f7f7;
}
@ -58,7 +81,7 @@
max-width: none !important;
}
/* 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;
bottom: 0;
border-radius: 6px 6px 0 0;
@ -67,7 +90,7 @@
box-shadow: 0 -2px 4px #ddd;
}
.toolbar-popup, .hyperlink-dialog {
.toolbar-popup {
left: 0 !important; /* overide javascript positionning */
right: 0 !important;
}

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

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

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

@ -231,8 +231,7 @@ var padeditbar = (function()
if(module.css('display') != "none")
{
$("li[data-key=" + thisModuleName + "] > a").removeClass("selected");
module.slideUp("fast", cb);
returned = true;
module.removeClass("popup-show");
}
}
if(!returned && cb) return cb();
@ -246,15 +245,16 @@ var padeditbar = (function()
var thisModuleName = self.dropdowns[i];
var module = $("#" + thisModuleName);
if(module.css('display') != "none")
if(module.hasClass('popup-show'))
{
$("li[data-key=" + thisModuleName + "] > a").removeClass("selected");
module.slideUp("fast");
module.removeClass("popup-show");
}
else if(thisModuleName==moduleName)
{
$("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;
$("#mycolorpicker").fadeOut("fast");
$("#mycolorpicker").removeClass('popup-show');
}
function showColorPicker()
@ -823,7 +823,7 @@ function showColorPicker()
colorPickerSetup = true;
}
$("#mycolorpicker").fadeIn();
$("#mycolorpicker").addClass('popup-show')
colorPickerOpen = true;
$("#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,
.toolbar .show-more-icon-btn
{ 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;
}
#slider-btn-container button {

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

@ -1,5 +1,7 @@
.gritter-item {
margin-bottom: 10px;
}
.gritter-item .popup-content {
color: white;
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 {
top: -2px;
right: 30px;
.popup-content {
border-radius: 3px;
padding: 20px 20px;
padding: 25px;
background: none;
background-color: white;
border: none;

24
src/templates/pad.html
View File

@ -117,7 +117,7 @@
<!-- 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>
<% e.begin_block("mySettings"); %>
<h2 data-l10n-id="pad.settings.myView"></h2>
@ -180,14 +180,14 @@
<span data-l10n-id="pad.settings.poweredBy">Powered by</span>
<a href="http://etherpad.org">Etherpad-lite</a>
<% if (settings.exposeVersion) { %>(commit <%=settings.getGitCommit()%>)<% } %>
</div>
</div></div>
<!------------------------->
<!-- 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>
<div class="acl-write">
<% e.begin_block("importColumn"); %>
@ -232,14 +232,14 @@
</a>
<% e.end_block(); %>
</div>
</div>
</div></div>
<!---------------------------------------------------->
<!-- CONNECTIVITY POPUP (when you get disconnected) -->
<!---------------------------------------------------->
<div id="connectivity" class="popup">
<div id="connectivity" class="popup"><div class="popup-content">
<% e.begin_block("modals"); %>
<div class="connected visible">
<h2 data-l10n-id="pad.modals.connected"></h2>
@ -304,14 +304,14 @@
<input type="hidden" class="missedChanges" name="missedChanges">
</form>
<% e.end_block(); %>
</div>
</div></div>
<!-------------------------------->
<!-- EMBED POPUP (Share, embed) -->
<!-------------------------------->
<div id="embed" class="popup">
<div id="embed" class="popup"><div class="popup-content">
<% e.begin_block("embedPopup"); %>
<h1 data-l10n-id="pad.share"></h1>
<div id="embedreadonly" class="acl-write">
@ -327,7 +327,7 @@
<input id="embedinput" type="text" value="" onclick="this.select()">
</div>
<% e.end_block(); %>
</div>
</div></div>
<div class="sticky-container">
@ -335,18 +335,18 @@
<!-- 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"); %>
<div id="connectionstatus"></div>
<div id="myuser">
<div id="mycolorpicker" class="popup">
<div id="mycolorpicker" class="popup"><div class="popup-content">
<div id="colorpicker"></div>
<div class="btn-container">
<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>
<span id="mycolorpickerpreview" class="myswatchboxhoverable"></span>
</div>
</div>
</div></div>
<div id="myswatchbox"><div id="myswatch"></div></div>
<div id="myusernameform">
<input type="text" id="myusernameedit" disabled="disabled" data-l10n-id="pad.userlist.entername">
@ -360,7 +360,7 @@
</div>
<div id="userlistbuttonarea"></div>
<% e.end_block(); %>
</div>
</div></div>
<!----------------------------->

12
src/templates/timeslider.html
View File

@ -121,7 +121,7 @@
<!-- IMPORT EXPORT POPUP -->
<!------------------------->
<div id="import_export" class="popup" >
<div id="import_export" class="popup" ><div class="popup-content">
<div id="export">
<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>
@ -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="exportopena" target="_blank" class="exportlink"><div class="exporttype" id="exportopen" data-l10n-id="pad.importExport.exportopen"></div></a>
</div>
</div>
</div></div>
<!---------------------------------------------------->
<!-- CONNECTIVITY POPUP (when you get disconnected) -->
<!---------------------------------------------------->
<div id="connectivity" class="popup">
<div id="connectivity" class="popup"><div class="popup-content">
<% e.begin_block("modals"); %>
<div class="connected visible">
<h2 data-l10n-id="pad.modals.connected"></h2>
@ -203,14 +203,14 @@
<input type="hidden" class="missedChanges" name="missedChanges">
</form>
<% e.end_block(); %>
</div>
</div></div>
<!---------------------------------->
<!-- 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>
<select id="viewfontmenu">
<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="serif" data-l10n-id="pad.settings.fontType.serif"></option>
</select>
</div>
</div></div>
</div>
</body>