twisterarmy/twister-html
1
0
Fork 0
mirror of https://github.com/twisterarmy/twister-html.git synced 2025-01-11 15:37:55 +00:00
Code Issues Projects Releases Wiki Activity

add button to switch beetween reply and retransmit on the fly; fix of modal prompt CSS

Browse Source
This commit is contained in:
Simon Grim 2015-08-20 17:19:54 +05:00
parent dd41d62e49
commit b12d3d450e
9 changed files with 147 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
css/style.css
View File

@ -1091,13 +1091,13 @@ ol.toptrends-list {
text-align: right;
height: 23px;
}
.post-interactions span,
.post-expand
{
.post-interactions span, .post-expand, .prompt-wrapper .switch-mode {
color: #e34f42;
cursor: pointer;
font-size: 12px;
font-size: 11px;
}
.post-expand
{
position: absolute;
@ -1702,12 +1702,14 @@ ol.toptrends-list {
}
.prompt-wrapper .modal-buttons {
padding: 10px;
margin: 4px 16px;
text-align: right;
}
.prompt-wrapper .modal-buttons button:last-child {
padding: 5px 20px;
.prompt-wrapper .switch-mode {
display: inline-block;
float: left;
margin: 4px;
}
/*************************************
@ -1723,10 +1725,6 @@ ol.toptrends-list {
text-align: center;
}
.following-config-modal .modal-buttons {
display: none;
}
.following-config-method-buttons {
padding: 10px;
}
@ -1745,13 +1743,13 @@ ol.toptrends-list {
}
.reTwist .post {
margin: 5px;
padding: 5px;
margin: 8px;
padding: 4px;
min-height: 68px;
}
.reTwist .post-area-extras {
margin-right: 10px;
margin: 4px 16px;
}
/*************************************
@ -1762,10 +1760,6 @@ ol.toptrends-list {
margin-top: -140px;
}
.reply .modal-buttons {
display: none;
}
.reply .post-expand,
.reply .post-interactions {
display: none;
@ -1781,12 +1775,12 @@ ol.toptrends-list {
}
.reply .post-area-extras {
margin-right: 10px;
margin: 4px 16px;
}
.reply .post {
margin: 10px;
padding: 5px;
margin: 8px;
padding: 4px;
min-height: 68px;
}

35
following.html
View File

@ -289,9 +289,7 @@
</a>
<li class="descendant module post">
</li>
<!-- TEMPLATE INVÓLUCRO DO POST EXPANDIDO END -->
<!-- TEMPLATE DO MODAL GENÉRICO INIT -->
<div class="modal-wrapper">
<div class="modal-header">
<h3></h3>
@ -302,27 +300,16 @@
<div class="modal-content"></div>
<div class="modal-blackout cancel"></div>
</div>
<!-- TEMPLATE DO MODAL GENÉRICO END -->
<!-- TEMPLATE GENERAL PROMPT -->
<div class="prompt-wrapper">
<div class="modal-header">
<h3></h3>
<span class="modal-close prompt-close">&times;</span>
</div>
<div class="modal-content"></div>
<div class="modal-buttons">
<button class="modal-cancel prompt-close">Cancel</button>
<button class="modal-propagate">Retransmit</button>
</div>
</div>
<!-- TEMPLATE GENERAL PROMPT END-->
<!-- MODAL DE RETWEET INIT -->
<!-- MODAL DE RETWEET END -->
<!-- MODAL DE REPLY INIT -->
<div id="reply-modal-template">
<div id="reTwist-modal-template">
<div class="post-area">
<form class="post-area-new open">
<textarea placeholder="New Post..."></textarea>
@ -331,11 +318,27 @@
<button class="undo-unicode disabled" disabled="true">undo</button>
<button class="post-submit disabled" disabled="true">post</button>
</div>
<div class="modal-buttons">
<span class="switch-mode">Switch to Reply</span>
<button class="modal-propagate">Retransmit</button>
</div>
</form>
</div>
</div>
<div id="reply-modal-template">
<div class="post-area">
<form class="post-area-new open">
<textarea placeholder="New Post..."></textarea>
<div class="post-area-extras">
<span class="switch-mode">Switch to Retransmit</span>
<span class="post-area-remaining">140</span>
<button class="undo-unicode disabled" disabled="true">undo</button>
<button class="post-submit disabled" disabled="true">post</button>
</div>
</form>
</div>
<!-- use "module post" here -->
</div>
<!-- MODAL DE REPLY END -->
<!-- MODAL DE DIRECT MESSAGES INIT -->
<!-- Este modal possui dois templates, o primeiro da lista de pessoas que enviaram mensagens e o segundo

35
home.html
View File

@ -381,9 +381,7 @@
<li class="descendant module post">
</li>
<!-- TEMPLATE INVÓLUCRO DO POST EXPANDIDO END -->
<!-- TEMPLATE DO MODAL GENÉRICO INIT -->
<div class="modal-wrapper">
<div class="modal-header">
<h3></h3>
@ -394,27 +392,16 @@
<div class="modal-content"></div>
<div class="modal-blackout cancel"></div>
</div>
<!-- TEMPLATE DO MODAL GENÉRICO END -->
<!-- TEMPLATE GENERAL PROMPT -->
<div class="prompt-wrapper">
<div class="modal-header">
<h3></h3>
<span class="modal-close prompt-close">&times;</span>
</div>
<div class="modal-content"></div>
<div class="modal-buttons">
<button class="modal-cancel prompt-close">Cancel</button>
<button class="modal-propagate">Retransmit</button>
</div>
</div>
<!-- TEMPLATE GENERAL PROMPT END-->
<!-- MODAL DE RETWEET INIT -->
<!-- MODAL DE RETWEET END -->
<!-- MODAL DE REPLY INIT -->
<div id="reply-modal-template">
<div id="reTwist-modal-template">
<div class="post-area">
<form class="post-area-new open">
<textarea placeholder="New Post..."></textarea>
@ -423,11 +410,27 @@
<button class="undo-unicode disabled" disabled="true">undo</button>
<button class="post-submit disabled" disabled="true">post</button>
</div>
<div class="modal-buttons">
<span class="switch-mode">Switch to Reply</span>
<button class="modal-propagate">Retransmit</button>
</div>
</form>
</div>
</div>
<div id="reply-modal-template">
<div class="post-area">
<form class="post-area-new open">
<textarea placeholder="New Post..."></textarea>
<div class="post-area-extras">
<span class="switch-mode">Switch to Retransmit</span>
<span class="post-area-remaining">140</span>
<button class="undo-unicode disabled" disabled="true">undo</button>
<button class="post-submit disabled" disabled="true">post</button>
</div>
</form>
</div>
<!-- use "module post" here -->
</div>
<!-- MODAL DE REPLY END -->
<!-- MODAL DE DIRECT MESSAGES INIT -->
<!-- Este modal possui dois templates, o primeiro da lista de pessoas que enviaram mensagens e o segundo

41
js/interface_common.js
View File

@ -373,13 +373,17 @@ function initHashWatching() {
setTimeout(watchHashChange, 1000);
}
function reTwistPopup(e) {
e.stopPropagation();
function reTwistPopup(event, post, textArea) {
event.stopPropagation();
if (!defaultScreenName) {
alert(polyglot.t('You have to log in to retransmit messages.'));
return;
}
if (typeof post === 'undefined')
post = $.evalJSON($(event.target).parents('.post-data').attr('data-userpost'));
var modal = openModal({
classBase: '.prompt-wrapper',
classAdd: 'reTwist',
@ -387,22 +391,31 @@ function reTwistPopup(e) {
});
modal.content
.append(postToElem($.evalJSON($(this).parents('.post-data').attr('data-userpost')), ''))
.append($('#reply-modal-template').children().clone(true)) // FIXME retwist-reply-modal-template
.append(postToElem(post, ''))
.append($('#reTwist-modal-template').children().clone(true))
;
modal.content.find('.switch-mode')
.text(polyglot.t('Switch to Reply'))
.on('click', (function(event) {replyInitPopup(event, post,
$(event.target).parents('form').find('textarea').detach());}).bind(post))
;
var replyArea = modal.content.find('.post-area .post-area-new');
var textArea = replyArea.find('textarea');
if (typeof textArea === 'undefined') {
textArea = replyArea.find('textarea');
var textAreaPostInline = modal.content.find('.post .post-area-new textarea');
$.each(['placeholder', 'data-reply-to'], function(i, attribute) {
textArea.attr(attribute, textAreaPostInline.attr(attribute));
});
} else {
replyArea.find('textarea').replaceWith(textArea);
}
replyArea.find('.post-submit').addClass('with-reference');
}
// Expande Área do Novo post
function replyInitPopup(e, post) {
function replyInitPopup(e, post, textArea) {
var modal = openModal({
classBase: '.prompt-wrapper',
classAdd: 'reply',
@ -416,14 +429,22 @@ function replyInitPopup(e, post) {
.append($('#reply-modal-template').children().clone(true))
;
// FIXME passing data through attributes may result in a mess like following
modal.content.find('.switch-mode')
.text(polyglot.t('Switch to Retransmit'))
.on('click', (function(event) {reTwistPopup(event, post,
$(event.target).parents('form').find('textarea').detach())}).bind(post))
;
var replyArea = modal.content.find('.post-area .post-area-new').addClass('open');
var textArea = replyArea.find('textarea');
if (typeof textArea === 'undefined') {
textArea = replyArea.find('textarea');
var textAreaPostInline = modal.content.find('.post .post-area-new textarea');
$.each(['placeholder', 'data-reply-to'], function(i, attribute) {
textArea.attr(attribute, textAreaPostInline.attr(attribute));
});
} else {
replyArea.find('textarea').replaceWith(textArea);
}
composeNewPost(e, replyArea);
}

26
js/interface_localization.js
View File

@ -130,6 +130,8 @@ if(preferredLanguage == "en"){
"Retransmit": "Retransmit",
"Retransmits": "Retransmits",
"Retransmitted by": "Retransmitted by",
"Switch to Reply": "Switch to Reply",
"Switch to Retransmit": "Switch to Retransmit",
"search": "search",
"seconds": "%{smart_count} second |||| %{smart_count} seconds",
"send": "send",
@ -428,6 +430,8 @@ if(preferredLanguage == "es"){
"Retransmit": "Retransmicion",
"Retransmits": "Retransmiciones",
"Retransmitted by": "Retransmitido por",
"Switch to Reply": "Switch to Reply",
"Switch to Retransmit": "Switch to Retransmit",
"search": "search",
"seconds": "%{smart_count} segundo |||| %{smart_count} segundos",
"send": "send",
@ -711,6 +715,8 @@ if(preferredLanguage == "uk"){
"Retransmit": "Переслати",
"Retransmits": "Пересилання",
"Retransmitted by": "Переслано ",
"Switch to Reply": "Switch to Reply",
"Switch to Retransmit": "Switch to Retransmit",
"search": "пошук",
"seconds": "%{smart_count} секунда |||| %{smart_count} секунд",
"send": "відіслати",
@ -991,6 +997,8 @@ if(preferredLanguage == "zh-CN"){
"Retransmit": "转发",
"Retransmits": "转发",
"Retransmitted by": "转发于",
"Switch to Reply": "Switch to Reply",
"Switch to Retransmit": "Switch to Retransmit",
"search": "搜索",
"seconds": "%{smart_count} 秒",
"send": "发送",
@ -1289,6 +1297,8 @@ if(preferredLanguage == "nl"){
"Retransmit": "Retransmit",
"Retransmits": "Retransmits",
"Retransmitted by": "Retransmitted door",
"Switch to Reply": "Switch to Reply",
"Switch to Retransmit": "Switch to Retransmit",
"search": "Zoeken",
"seconds": "%{smart_count} seconde |||| %{smart_count} seconden",
"send": "Verstuur",
@ -1571,6 +1581,8 @@ if(preferredLanguage == "it"){
"Retransmit": "Ripubblica",
"Retransmits": "Ripubblicati",
"Retransmitted by": "Ripubblicato da",
"Switch to Reply": "Switch to Reply",
"Switch to Retransmit": "Switch to Retransmit",
"search": "Cerca",
"seconds": "%{smart_count} secondo |||| %{smart_count} secondi",
"send": "Invia",
@ -1850,6 +1862,8 @@ if(preferredLanguage == "fr"){
"Retransmit": "Retransmission",
"Retransmits": "Retransmissions",
"Retransmitted by": "Retransmis par",
"Switch to Reply": "Switch to Reply",
"Switch to Retransmit": "Switch to Retransmit",
"search": "recherche",
"seconds": "%{smart_count} seconde |||| %{smart_count} secondes",
"send": "envoyer",
@ -2134,6 +2148,8 @@ if(preferredLanguage == "ru"){
"Retransmit": "Перепостить",
"Retransmits": "Репосты",
"Retransmitted by": "Перепощено ",
"Switch to Reply": "Переключиться на ответ",
"Switch to Retransmit": "Переключиться на ретвист",
"search": "найти",
"seconds": "%{smart_count} секунда |||| %{smart_count} секунд",
"send": "отправить",
@ -2422,6 +2438,8 @@ if(preferredLanguage == "de"){
"Retransmit": "Weiterleiten",
"Retransmits": "Weiterleitungen",
"Retransmitted by": "Weitergeleitet von",
"Switch to Reply": "Switch to Reply",
"Switch to Retransmit": "Switch to Retransmit",
"search": "suchen",
"seconds": "%{smart_count} Sekunde |||| %{smart_count} Sekunden",
"send": "senden",
@ -2705,6 +2723,8 @@ if(preferredLanguage == "ja"){
"Retransmit": "リトランスミット",
"Retransmits": "リトランスミット",
"Retransmitted by": "リトランスミットしたユーザー",
"Switch to Reply": "Switch to Reply",
"Switch to Retransmit": "Switch to Retransmit",
"search": "検索",
"seconds": "%{smart_count} 秒 |||| %{smart_count} 秒",
"send": "送信",
@ -2986,6 +3006,8 @@ if(preferredLanguage == "pt-BR"){
"Retransmit": "Retransmitir",
"Retransmits": "Retransmissões",
"Retransmitted by": "Retransmitido por",
"Switch to Reply": "Switch to Reply",
"Switch to Retransmit": "Switch to Retransmit",
"search": "procurar",
"seconds": "%{smart_count} segundo |||| %{smart_count} segundos",
"send": "enviar",
@ -3269,6 +3291,8 @@ if(preferredLanguage == "tr"){
"Retransmit": "Tekar ilet",
"Retransmits": "Tekrar iletenler",
"Retransmitted by": "Tekrar ileten",
"Switch to Reply": "Switch to Reply",
"Switch to Retransmit": "Switch to Retransmit",
"search": "ara",
"seconds": "%{smart_count} saniye |||| %{smart_count} saniye",
"send": "gönder",
@ -3551,6 +3575,8 @@ if(preferredLanguage == "cs"){
"Retransmit": "Přeposlat",
"Retransmits": "Přeposlání",
"Retransmitted by": "Přeposlal(a)",
"Switch to Reply": "Switch to Reply",
"Switch to Retransmit": "Switch to Retransmit",
"search": "hledat",
"seconds": "%{smart_count} vteřinou |||| %{smart_count} vteřinami |||| %{smart_count} vteřinami",
"send": "odeslat",

43
theme_calm/css/style.css
View File

@ -861,9 +861,7 @@ textarea.splited-post {
.mini-profile .post-submit {
margin-right: 0;
}
.reply .post-submit {
margin-right: 35px;
}
.post-submit.disabled {
opacity: .6;
-webkit-transition: all 200ms;
@ -1453,9 +1451,8 @@ textarea.splited-post {
text-align: right;
height: 25px;
}
.post-interactions span,
.post-expand
{
.post-interactions span, .post-expand, .prompt-wrapper .switch-mode {
color: #b2b2b2;
cursor: pointer;
font-size: 12px;
@ -1465,6 +1462,7 @@ textarea.splited-post {
-o-transition: all 200ms;
transition: all 200ms;
}
.post-expand
{
position: absolute;
@ -2094,12 +2092,14 @@ textarea.splited-post {
}
.prompt-wrapper .modal-buttons {
padding: 10px;
margin: 4px 16px;
text-align: right;
}
.prompt-wrapper .modal-buttons button:last-child {
padding: 5px 20px;
.prompt-wrapper .switch-mode {
display: inline-block;
float: left;
margin: 4px;
}
/*************************************
@ -2115,10 +2115,6 @@ textarea.splited-post {
text-align: center;
}
.following-config-modal .modal-buttons {
display: none;
}
.following-config-method-buttons {
padding: 10px;
}
@ -2137,13 +2133,13 @@ textarea.splited-post {
}
.reTwist .post {
margin: 5px;
padding: 5px;
margin: 8px;
padding: 4px;
min-height: 68px;
}
.reTwist .post-area-extras {
margin-right: 10px;
margin: 4px 16px;
}
/*************************************
@ -2154,10 +2150,6 @@ textarea.splited-post {
margin-top: -140px;
}
.reply .modal-buttons {
display: none;
}
.reply .post-expand,
.reply .post-interactions {
display: none;
@ -2173,12 +2165,12 @@ textarea.splited-post {
}
.reply .post-area-extras {
margin-right: 10px;
margin: 4px 16px;
}
.reply .post {
margin: 10px;
padding: 5px;
margin: 8px;
padding: 4px;
min-height: 68px;
}
@ -2518,11 +2510,6 @@ p.post-text img {
height: 20px;
}
.reply textarea{
margin-top: 20px;
}
.post-rt-reference {
background-color: #FAFAFA;
border: 1px solid #ccc;

16
theme_nin/css/style.css
View File

@ -925,7 +925,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
line-height: 12px;
}
/* line 171, ../sass/_postboard.sass */
.post-interactions span {
.post-interactions span, .prompt-wrapper .switch-mode {
color: #b3b5b7;
cursor: pointer;
font-size: 12px;
@ -2747,12 +2747,14 @@ ol.toptrends-list a:hover {
}
.prompt-wrapper .modal-buttons {
padding: 10px;
margin: 4px 0;
text-align: right;
}
.prompt-wrapper .modal-buttons button:last-child {
padding: 5px 20px;
.prompt-wrapper .switch-mode {
display: inline-block;
float: left;
margin: 4px;
}
/****** FOLLOWING-CONFIG PROMPT ******/
@ -2766,10 +2768,6 @@ ol.toptrends-list a:hover {
text-align: center;
}
.following-config-modal .modal-buttons {
display: none;
}
.following-config-modal h2 {
text-transform: none;
}
@ -2810,7 +2808,7 @@ ol.toptrends-list a:hover {
margin-top: -110px;
}
/* line 719, ../sass/style.sass */
.reply .modal-buttons, .reply .post-expand, .reply .post-interactions {
.reply .post-expand, .reply .post-interactions {
display: none;
}
/* line 721, ../sass/style.sass */

2
theme_nin/sass/_postboard.sass
View File

@ -171,7 +171,7 @@
text-align: right
height: 12px
line-height: 12px
span
span, .prompt-wrapper .switch-mode
color: lighten($dark-grey,30%)
cursor: pointer
font-size: 12px

12
theme_nin/sass/style.sass
View File

@ -753,10 +753,12 @@ ol.toptrends-list
margin-left: -300px
box-shadow: 0 0 30px rgba( 0, 0, 0, .6 )
.modal-buttons
padding: 10px
margin: 4px 0
text-align: right
button:last-child
padding: 5px 20px;
.switch-mode
display: inline-block
float: left
margin: 4px
/************ FOLLOWING-CONFIG MODAL **********/
@ -765,8 +767,6 @@ ol.toptrends-list
.modal-content
padding: 10px
text-align: center
.modal-buttons
display: none
h2
text-transform: none
.following-config-method-buttons
@ -793,7 +793,7 @@ ol.toptrends-list
.prompt-wrapper.reply
&.prompt-wrapper
margin-top: -110px
.modal-buttons, .post-expand, .post-interactions
.post-expand, .post-interactions
display: none
.post-area
padding-bottom: 6px