twisterarmy/twister-html
1
0
Fork 0
mirror of https://github.com/twisterarmy/twister-html.git synced 2025-01-14 00:48:05 +00:00
Code Issues Projects Releases Wiki Activity

add ability to minimize and resume modal buttons

Browse Source
This commit is contained in:
Simon Grim 2015-11-19 01:09:04 +05:00
parent b622635952
commit e28e824a94
8 changed files with 264 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
css/style.css
View File

@ -379,6 +379,39 @@ button.follow:hover, button.unfollow:hover, .following-list button.private:hover
margin: 4px 0 0 10px;
}
#modals-minimized {
background-color: rgba(0, 0, 0, 0);
z-index: 9000;
position: fixed;
bottom: 0;
left: 50%;
width: 900px;
height: 24px;
overflow: auto;
margin-left: -450px;
padding: 0 4%;
}
#modals-minimized.w1200 {
width: 1200px;
margin-left: -600px;
}
#modals-minimized li {
display: inline-block;
opacity: .88;
font-size: 10px;
color: #FFF;
background-color: #B43E34;
margin: 0 2px;
padding: 4px 8px;
}
#modals-minimized li:hover {
opacity: 1;
cursor: pointer;
}
/*******************************************************
****************** CONFIG SUBMENU & SEARCH RESULTS *****
*******************************************************/
@ -1483,7 +1516,7 @@ ol.toptrends-list {
height: 100%;
}
.modal-close {
.modal-close, .minimize-modal {
position: absolute;
right: 0;
top: 0;
@ -1495,15 +1528,19 @@ ol.toptrends-list {
transition: all .1s linear;
}
.modal-close:hover {
.modal-close:hover, .minimize-modal:hover {
color: #fff;
background: rgba( 0, 0, 0, .1 );
}
.minimize-modal {
right: 30px;
}
.modal-back,
.mark-all-as-read {
position: absolute;
right: 30px;
right: 60px;
top: 0;
padding: 1px 10px;
cursor: pointer;
@ -1520,6 +1557,14 @@ ol.toptrends-list {
background: rgba( 0, 0, 0, .1 );
}
.mark-all-as-read {
right: 90px;
}
.mark-all-as-read:before {
content: '\2714';
}
.modal-wrapper.reply .post {
background: #ececed;
padding: 10px 15px;
@ -1627,14 +1672,6 @@ ol.toptrends-list {
left: auto;
}
.mark-all-as-read {
right: 60px;
}
.mark-all-as-read:before {
content: '\2714';
}
/*************************************
****** GM NEW GROUP SETUP MODAL ******
**************************************/

3
following.html
View File

@ -170,6 +170,8 @@
<!-- LADO ESQUERDO DE MÓDULOS END -->
</div>
<ul id="modals-minimized"></ul>
<!-- TEMPLATES INIT -->
<div id="templates" style="display:none;">
<div id="search-profile-template">
@ -304,6 +306,7 @@
<div class="modal-wrapper">
<div class="modal-header">
<h3></h3>
<span class="minimize-modal"><b>_</b></span>
<span id="closeModal" class="modal-close">&times;</span>
<span class="modal-back">&lt;</span>
<span class="mark-all-as-read"></span>

3
home.html
View File

@ -185,6 +185,8 @@
<div class="dashboard right"></div>
</div>
<ul id="modals-minimized"></ul>
<!-- TEMPLATES INIT -->
<div id="templates" style="display:none;">
<div id="search-profile-template">
@ -396,6 +398,7 @@
<div class="modal-wrapper">
<div class="modal-header">
<h3></h3>
<span class="minimize-modal"><b>_</b></span>
<span id="closeModal" class="modal-close">&times;</span>
<span class="modal-back">&lt;</span>
<span class="mark-all-as-read"></span>

95
js/interface_common.js
View File

@ -6,6 +6,8 @@
// Post actions: submit, count characters
var window_scrollY = 0;
var _watchHashChangeDontLoadModal = false;
var _minimizedModals = {};
function openModal(modal) {
if (!modal.classBase) {
@ -65,6 +67,82 @@ function closeModalHandler(classBase) {
modalWindows.fadeOut('fast', function() {modalWindows.remove();});
}
function minimizeModal(modal, switchMode) {
function minimize(modal, scroll) {
modal.detach();
btnResume = $('<li>' + modal.find('.modal-header h3').text() + '</li>')
.on('click', {hashString: window.location.hash}, resumeModal)
.appendTo($('#modals-minimized'))
;
_minimizedModals[window.location.hash] = {
self: modal,
scroll: scroll,
btnResume: btnResume
};
}
var scroll; // MUST be setted before modal.detach(), modal.fadeOut() and so on
if (modal.is('.directMessages') || modal.is('.group-messages-new-group')
|| modal.is('.group-messages-join-group')) {
scroll = {
targetSelector: '.modal-content',
top: modal.find('.modal-content').scrollTop()
};
} else if (modal.is('.profile-modal')) {
if (modal.find('.profile-card').attr('data-screen-name')[0] === '*')
scroll = {
targetSelector: '.modal-content .members',
top: modal.find('.modal-content .members').scrollTop()
};
else
scroll = {
targetSelector: '.modal-content .postboard-posts',
top: modal.find('.modal-content .postboard-posts').scrollTop()
};
}
if (switchMode)
minimize(modal, scroll);
else
modal.fadeOut('fast', function () {
minimize(modal, scroll);
window.location.hash = '#';
window.scroll(window.pageXOffset, window_scrollY);
$('body').css({
'overflow': 'auto',
'margin-right': '0'
});
});
}
function resumeModal(event) {
var elemEvent = $(event.target);
elemEvent.fadeOut('fast', function () {elemEvent.remove();});
var modalActive = $('.modal-wrapper:not(#templates *)');
if (modalActive.length)
minimizeModal(modalActive, true);
else {
window_scrollY = window.pageYOffset;
$('body').css('overflow', 'hidden');
}
var modal = _minimizedModals[event.data.hashString];
if (modal) {
_minimizedModals[event.data.hashString] = undefined;
_watchHashChangeDontLoadModal = true;
window.location.hash = event.data.hashString;
modal.self.prependTo('body').fadeIn('fast', function () {
// TODO also need reset modal height here maybe and then compute new scroll
if (modal.scroll)
modal.self.find($(modal.scroll.targetSelector).scrollTop(modal.scroll.top));
});
}
}
function confirmPopup(event, req) {
if (event && event.stopPropagation)
event.stopPropagation();
@ -425,6 +503,7 @@ function watchHashChange(e) {
var prevurlsplit = e.oldURL.split('#');
var prevhashstring = prevurlsplit[1];
// FIXME need to move back button handling to special function and call it in openModal() and resumeModal()
var notFirstModalView = (prevhashstring !== undefined && prevhashstring.length > 0);
var notNavigatedBackToFirstModalView = (window.history.state == null ||
(window.history.state != null && window.history.state.showCloseButton !== false));
@ -437,10 +516,18 @@ function watchHashChange(e) {
}
}
loadModalFromHash();
if (_watchHashChangeDontLoadModal)
_watchHashChangeDontLoadModal = false;
else
loadModalFromHash();
}
function loadModalFromHash() {
if (_minimizedModals[window.location.hash]) {
_minimizedModals[window.location.hash].btnResume.click();
return;
}
var hashstring = decodeURIComponent(window.location.hash);
var hashdata = hashstring.split(':');
@ -1526,11 +1613,13 @@ function replaceDashboards() {
$('.userMenu').addClass('w1200');
$('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
$('.module.twistday-reminder').detach().appendTo($('.dashboard.right'));
$('#modals-minimized').addClass('w1200');
} else if (width < 1200 && wrapper.hasClass('w1200')) {
wrapper.removeClass('w1200');
$('.userMenu').removeClass('w1200');
$('.module.who-to-follow').detach().insertAfter($('.module.mini-profile'));
$('.module.twistday-reminder').detach().insertAfter($('.module.toptrends'));
$('#modals-minimized').removeClass('w1200');
}
}
@ -1543,6 +1632,10 @@ function initInterfaceCommon() {
closeModal();
});
$('.minimize-modal').on('click', function (event) {
minimizeModal($(event.target).closest('.modal-wrapper'));
});
$('.modal-back').on('click', function() {history.back();});
$('.prompt-close').on('click', closePrompt);

59
theme_calm/css/style.css
View File

@ -500,6 +500,39 @@ input.userMenu-search-field:focus::-ms-input-placeholder {
margin: 4px 0 0 -5px;
}
#modals-minimized {
background-color: rgba(0, 0, 0, 0);
z-index: 9000;
position: fixed;
bottom: 0;
left: 50%;
width: 900px;
height: 24px;
overflow: auto;
margin-left: -450px;
padding: 0 4%;
}
#modals-minimized.w1200 {
width: 1200px;
margin-left: -600px;
}
#modals-minimized li {
display: inline-block;
opacity: .88;
font-size: 10px;
color: #FFF;
background-color: #7691CE;
margin: 0 2px;
padding: 4px 8px;
}
#modals-minimized li:hover {
opacity: 1;
cursor: pointer;
}
/*******************************************************
****************** CONFIG SUBMENU & SEARCH RESULTS *****
*******************************************************/
@ -1868,7 +1901,7 @@ textarea.splited-post {
height: 100%;
}
.modal-close {
.modal-close, .minimize-modal {
position: absolute;
right: 0;
top: 0;
@ -1880,15 +1913,19 @@ textarea.splited-post {
transition: all .1s linear;
}
.modal-close:hover {
.modal-close:hover, .minimize-modal:hover {
color: #fff;
background: rgba( 0, 0, 0, .1 );
}
.minimize-modal {
right: 30px;
}
.modal-back,
.mark-all-as-read {
position: absolute;
right: 30px;
right: 60px;
top: 0;
padding: 1px 10px;
cursor: pointer;
@ -1905,6 +1942,14 @@ textarea.splited-post {
background: rgba( 0, 0, 0, .1 );
}
.mark-all-as-read {
right: 90px;
}
.mark-all-as-read:before {
content: '\2714';
}
.modal-wrapper.reply .post {
background: #ececed;
padding: 10px 15px;
@ -2020,14 +2065,6 @@ textarea.splited-post {
background: none;
}
.mark-all-as-read {
right: 60px;
}
.mark-all-as-read:before {
content: '\2714';
}
/*************************************
****** GM NEW GROUP SETUP MODAL ******
**************************************/

43
theme_nin/css/style.css
View File

@ -1892,6 +1892,34 @@ button:disabled:hover, button.disabled:hover, .mini-profile-actions span.disable
margin-left: 880px;
}
#modals-minimized {
background-color: rgba(0, 0, 0, 0);
z-index: 9000;
position: fixed;
bottom: 0;
left: 50%;
width: 1180px;
height: 24px;
overflow: auto;
margin-left: -590px;
padding: 0 4%;
}
#modals-minimized li {
display: inline-block;
opacity: .88;
font-size: 10px;
color: #FFF;
background-color: #66686B;
margin: 0 2px;
padding: 4px 8px;
}
#modals-minimized li:hover {
opacity: 1;
cursor: pointer;
}
/********** CONFIG SUBMENU & SEARCH RESULTS *********** */
/* line 76, ../sass/style.sass */
@ -2706,7 +2734,7 @@ ol.toptrends-list a:hover {
}
/* line 629, ../sass/style.sass */
.modal-close {
.modal-close, .minimize-modal {
position: absolute;
right: 10px;
top: 0;
@ -2716,7 +2744,7 @@ ol.toptrends-list a:hover {
color: rgba(255, 255, 255, 0.7);
}
/* line 639, ../sass/style.sass */
.modal-close:hover {
.modal-close:hover, .minimize-modal:hover {
color: white;
}
/* line 641, ../sass/style.sass */
@ -2724,6 +2752,10 @@ ol.toptrends-list a:hover {
display: none;
}
.minimize-modal {
right: 35px;
}
/* line 644, ../sass/style.sass */
.mark-all-as-read {
float: left;
@ -2744,7 +2776,7 @@ ol.toptrends-list a:hover {
/* line 662, ../sass/style.sass */
.modal-back {
position: absolute;
right: 35px;
right: 70px;
top: 0;
font-size: 14px;
line-height: 40px;
@ -3489,6 +3521,11 @@ ul.dropdown-menu .active, ul.dropdown-menu .active a {
float: left;
font-size: 80%;
}
#modals-minimized {
width: 900px;
margin-left: -450px;
}
}
@media (max-width: 900px) {
/* line 21, ../sass/_responsive.sass */

4
theme_nin/sass/_responsive.sass
View File

@ -15,6 +15,10 @@
float: left
font-size: 80%
#modals-minimized
width: 900px
margin-left: -450px
@media (max-width: 900px)
.profile-modal .modal-wrapper
margin-left: 0

24
theme_nin/sass/style.sass
View File

@ -65,6 +65,30 @@
margin-left: 880px;
@extend .clear-fix
#modals-minimized
background-color: rgba(0, 0, 0, 0)
z-index: 9000
position: fixed
bottom: 0
left: 50%
width: $site-width
height: 24px
overflow: auto
margin-left: $site-width/2
padding: 0 4%
li
display: inline-block
opacity: .88
font-size: 10px
color: #FFF
background-color: #66686B
margin: 0 2px
padding: 4px 8px
&:hover
opacity: 1
cursor: pointer
/********** CONFIG SUBMENU & SEARCH RESULTS ************/