diff --git a/css/style.css b/css/style.css index 4611ee1..27ad9f1 100644 --- a/css/style.css +++ b/css/style.css @@ -626,7 +626,6 @@ button.follow:hover, button.unfollow:hover, .following-list button.private:hover padding: 4px; font-size: 13px; } - .post-area-new textarea:focus { border: solid 1px rgba( 227, 79, 66, .5 ); } @@ -648,6 +647,19 @@ textarea.splited-post { box-shadow: none!important; height: 28px; } + +#post-preview { + background-color: #F2FFBA; + border: solid 1px #B4C669; + font-size: 11px; + margin: 4px 0; + padding: 4px; +} + +#post-preview a { + color: #E34F42; +} + .splited-post-counter { color: rgba(0, 0, 0, 0.3); font-weight: bold; diff --git a/following.html b/following.html index 0122525..ab4f61e 100644 --- a/following.html +++ b/following.html @@ -206,6 +206,12 @@
    • +
    +
    +
    +
    + +
  • diff --git a/home.html b/home.html index b9ac963..c06955c 100644 --- a/home.html +++ b/home.html @@ -298,6 +298,11 @@
    • +
    +
    +
    +
    +
  • diff --git a/js/interface_common.js b/js/interface_common.js index 6d08428..40252a5 100644 --- a/js/interface_common.js +++ b/js/interface_common.js @@ -573,11 +573,34 @@ function composeNewPost(e, postAreaNew) { var textArea = postAreaNew.find('textarea'); if (textArea.attr('data-reply-to') && !textArea.val().length) { textArea.val(textArea.attr('data-reply-to')); + posPostPreview(e); } if (!postAreaNew.find('textarea:focus').length) postAreaNew.find('textarea:last').focus(); } +function posPostPreview(event) { + if (!$.Options.postPreview.val) + return; + + var textArea = $(event.target); + var postPreview = textArea.siblings('#post-preview'); + if (!postPreview.length) { + postPreview = $('#post-preview-template').children().clone() + .css('margin-left', textArea.css('margin-left')) + .css('margin-right', textArea.css('margin-right')) + ; + postPreview.width(textArea.width()); + postPreview.width(postPreview.width() // width is not accurate if we do it with textArea.width() directly, don't know why + - postPreview.css('padding-left') - postPreview.css('padding-right')); + } + if (textArea[0].value.length) + postPreview.html(htmlFormatMsg(textArea[0].value, [])).show(); + else + postPreview.hide(); + textArea.before(postPreview); +} + // Reduz Área do Novo post function unfocusThis() { $(this).removeClass('open'); @@ -680,6 +703,11 @@ function replyTextInput(event) { textArea.caret(caretPos); } } + + if (textArea[0].value.length) + textAreaForm.find('#post-preview').html(htmlFormatMsg(textArea[0].value, [])).show(); + else + textAreaForm.find('#post-preview').html('').hide(); } function getPostSplitingPML() { @@ -1196,6 +1224,8 @@ function postSubmit(e, oldLastPostId) { var $replyText = $this.closest('.post-area-new').find('textarea'); + $replyText.siblings('#post-preview').hide(); + var $postOrig = $this.closest('.post-data'); if (!$postOrig.length) { $postOrig = $this.closest('.modal-content').find('.post-data'); @@ -1372,6 +1402,7 @@ function initInterfaceCommon() { .clickoutside(unfocusThis) .children('textarea') .on({ + 'focus': posPostPreview, 'input': replyTextInput, // input event fires in modern browsers (IE9+) on any changes in textarea (and copypasting with mouse too) 'input focus': replyTextUpdateRemaining, 'keyup': replyTextKeySend diff --git a/js/interface_localization.js b/js/interface_localization.js index ab23eab..b8864db 100644 --- a/js/interface_localization.js +++ b/js/interface_localization.js @@ -207,6 +207,7 @@ if(preferredLanguage == "en"){ "Send key": "Send key", "Posts display": "Posts display", "Post editor": "Post editor", + "Post preview": "Post preview", "Inline image preview": "Inline image preview", "Display": "Display", "Line feeds": "Line feeds", @@ -501,6 +502,7 @@ if(preferredLanguage == "es"){ "Send key": "Send key", "Posts display": "Presentación de mensajes", "Post editor": "Post editor", + "Post preview": "Post preview", "Inline image preview": "Vista previa de imágenes en línea", "Display": "Mostrar", "Line feeds": "Avances de línea", @@ -776,6 +778,7 @@ if(preferredLanguage == "uk"){ "Send key": "Надсилання твістів", "Posts display": "Відображення твістів", "Post editor": "Редактор твістів", + "Post preview": "Post preview", "Inline image preview": "Контекстний перегляд зображення", "Display": "Відображати", "Line feeds": "Line feeds", @@ -1055,6 +1058,7 @@ if(preferredLanguage == "zh-CN"){ "Send key": "发送键", "Posts display": "推文显示", "Post editor": "信息编辑器", + "Post preview": "Post preview", "Inline image preview": "内嵌图像预览", "Display": "显示", "Line feeds": "Line feeds", @@ -1350,6 +1354,7 @@ if(preferredLanguage == "nl"){ "Send key": "Send key", "Posts display": "Posts display", "Post editor": "Post editor", + "Post preview": "Post preview", "Inline image preview": "Inline image preview", "Display": "Display", "Line feeds": "Line feeds", @@ -1625,6 +1630,7 @@ if(preferredLanguage == "it"){ "Send key": "Send key", "Posts display": "Posts display", "Post editor": "Post editor", + "Post preview": "Post preview", "Inline image preview": "Inline image preview", "Display": "Display", "Line feeds": "Line feeds", @@ -1903,6 +1909,7 @@ if(preferredLanguage == "fr"){ "Send key": "Send key", "Posts display": "Posts display", "Post editor": "Post editor", + "Post preview": "Post preview", "Inline image preview": "Inline image preview", "Display": "Display", "Line feeds": "Line feeds", @@ -2183,6 +2190,7 @@ if(preferredLanguage == "ru"){ "Send key": "Отправка сообщения", "Posts display": "Отображение сообщений", "Post editor": "Редактор сообщения", + "Post preview": "Предпросмотр сообщений", "Inline image preview": "Предпросмотр изображений", "Display": "Показывать", "Line feeds": "Переходы на новую строку", @@ -2468,6 +2476,7 @@ if(preferredLanguage == "de"){ "Send key": "Send key", "Posts display": "Posts display", "Post editor": "Nachrichten-Editor", + "Post preview": "Post preview", "Inline image preview": "Inline image preview", "Display": "Display", "Line feeds": "Line feeds", @@ -2743,6 +2752,7 @@ if(preferredLanguage == "ja"){ "Send key": "Send key", "Posts display": "Posts display", "Post editor": "Post editor", + "Post preview": "Post preview", "Inline image preview": "Inline image preview", "Display": "Display", "Line feeds": "Line feeds", @@ -3024,6 +3034,7 @@ if(preferredLanguage == "pt-BR"){ "Send key": "Send key", "Posts display": "Posts display", "Post editor": "Post editor", + "Post preview": "Post preview", "Inline image preview": "Inline image preview", "Display": "Display", "Line feeds": "Line feeds", @@ -3292,6 +3303,7 @@ if(preferredLanguage == "tr"){ "Send key": "Gönderme tuşu", "Posts display": "Gönderiler", "Post editor": "Gönderi düzenleyici", + "Post preview": "Post preview", "Inline image preview": "Dahili resim ön izleme", "Display": "Göster", "Line feeds": "Satır sonları", @@ -3577,6 +3589,7 @@ if(preferredLanguage == "cs"){ "Send key": "Klávesa pro odeslání", "Posts display": "Zobrazení příspěvků", "Post editor": "Editor příspěvků", + "Post preview": "Post preview", "Inline image preview": "Náhled vložených obrázků", "Display": "Zobrazit", "Line feeds": "Nové řádky", diff --git a/js/options.js b/js/options.js index 99c6f65..936c5f1 100644 --- a/js/options.js +++ b/js/options.js @@ -142,9 +142,15 @@ function twisterOptions() { valDefault: 'apply' }); this.add({ - name: 'displayPreview', + name: 'displayPreview', // it's inline image preview // FIXME we need some mechanism to rename options safely valDefault: 'disable' }); + this.add({ + name: 'postPreview', + selector: '#optPostPreview', + type: 'checkbox', + valDefault: true + }); this.add({ name: 'unicodeConversion', valDefault: 'disable', diff --git a/js/tmobile.js b/js/tmobile.js index dfd6c89..32603a6 100644 --- a/js/tmobile.js +++ b/js/tmobile.js @@ -26,6 +26,7 @@ function initializeTwister( redirectNetwork, redirectLogin, cbFunc, cbArg ) { // reply text counter both newmsg and dmchat $('.post-area-new textarea') .off('input keyup') + .on('focus', posPostPreview) .on('keyup', replyTextInput) .on('keyup', function() { replyTextUpdateRemaining(this); }) ; diff --git a/js/twister_directmsg.js b/js/twister_directmsg.js index f60f6aa..8748bf5 100644 --- a/js/twister_directmsg.js +++ b/js/twister_directmsg.js @@ -94,6 +94,8 @@ function directMsgSubmit(e) { var replyText = $(this).closest('.post-area-new').find('textarea'); + replyText.siblings('#post-preview').hide(); + newDirectMsg(replyText.val(), $('.directMessages').attr('data-dm-screen-name')); replyText.val(''); diff --git a/js/twister_formatpost.js b/js/twister_formatpost.js index 6b56813..66141e0 100644 --- a/js/twister_formatpost.js +++ b/js/twister_formatpost.js @@ -196,7 +196,7 @@ function dmDataToSnippetItem(dmData, remoteUser) { getGroupChatName( remoteUser, dmItem.find("a.post-info-name") ); else getFullname( remoteUser, dmItem.find("a.post-info-name") ); - dmItem.find(".post-text").html(htmlFormatMsg(dmData.text)); + dmItem.find(".post-text").html(htmlFormatMsg(dmData.text, [])); dmItem.find(".post-info-time").text(timeGmtToText(dmData.time)).attr("title",timeSincePost(dmData.time)); return dmItem; diff --git a/options.html b/options.html index 22b6a97..be7a2f6 100644 --- a/options.html +++ b/options.html @@ -374,6 +374,9 @@

    Post editor

    +
    +

    Post preview

    +

    Automatic unicode conversion options

    diff --git a/theme_calm/css/style.css b/theme_calm/css/style.css index 9d9fb55..6183598 100644 --- a/theme_calm/css/style.css +++ b/theme_calm/css/style.css @@ -776,6 +776,15 @@ textarea.splited-post { box-shadow: none!important; height: 28px; } + +#post-preview { + background-color: #F2FFBA; + border: solid 1px #B4C669; + font-size: 11px; + margin: 4px 0; + padding: 4px; +} + .splited-post-counter { color: rgba(0, 0, 0, 0.3); font-weight: bold; @@ -1252,8 +1261,9 @@ textarea.splited-post { { color: #76b2ce; } + /* external http links */ -.post-text a[href^="http"] { +.post-text a[href^="http"], #post-preview a[href^="http"] { font: italic 13px "Open Sans", sans-serif; text-decoration: none; color: #b46e67; @@ -1263,11 +1273,13 @@ textarea.splited-post { -o-transition: all 200ms; transition: all 200ms; } -.post-text a[href^="http"]:hover{ + +.post-text a[href^="http"]:hover, #post-preview a[href^="http"]:hover { color: #e18881; opacity: .8; } -.post-text a[href^="http"]:after { + +.post-text a[href^="http"]:after, #post-preview a[href^="http"]:after { content: ''; display: inline-block; position: relative; @@ -1284,10 +1296,13 @@ textarea.splited-post { -o-transition: all 200ms; transition: all 200ms; } -.post-text a[href^="http"]:hover:after { + +.post-text a[href^="http"]:hover:after, #post-preview a[href^="http"]:hover:after { opacity: .8; } -.post-text a[href^="#profile"], .follow-suggestions a[href^="#profile"] { + +.post-text a[href^="#profile"], .follow-suggestions a[href^="#profile"], +#post-preview a[href^="#profile"] { color: #5e8da4; text-decoration: none; -webkit-transition: all 200ms; @@ -1296,10 +1311,18 @@ textarea.splited-post { -o-transition: all 200ms; transition: all 200ms; } -.post-text a[href^="#profile"]:hover, .follow-suggestions a[href^="#profile"]:hover { + +.post-text a[href^="#profile"]:hover, .follow-suggestions a[href^="#profile"]:hover, +#post-preview a[href^="#profile"]:hover { color: #76b2ce; } -.toptrends-list a[href^="#hashtag"], .post-text a[href^="#hashtag"]{ + +#post-preview a { + font-size: 11px; +} + +.toptrends-list a[href^="#hashtag"], .post-text a[href^="#hashtag"], +#post-preview a[href^="#hashtag"] { color: #5e72a4; text-decoration: none; -webkit-transition: all 200ms; @@ -1308,7 +1331,9 @@ textarea.splited-post { -o-transition: all 200ms; transition: all 200ms; } -.toptrends-list a[href^="#hashtag"]:hover, .post-text a[href^="#hashtag"]:hover{ + +.toptrends-list a[href^="#hashtag"]:hover, .post-text a[href^="#hashtag"]:hover, +#post-preview a[href^="#hashtag"]:hover { color: #768fce; } @@ -1320,10 +1345,12 @@ textarea.splited-post { -o-transition: all 200ms; transition: all 200ms; } + .post-info a[href^="#profile"]:hover, .followers a[href^="#profile"]:hover, a[href^="#profile"].post-retransmited-by:hover { color: #5e8da4; text-decoration: none; } + /* Inpost previw */ .preview-container { diff --git a/theme_nin/css/style.css b/theme_nin/css/style.css index 3928b1a..c5e3673 100644 --- a/theme_nin/css/style.css +++ b/theme_nin/css/style.css @@ -2270,6 +2270,22 @@ textarea.splited-post { height: 28px; } +#post-preview { + background-color: #FCFFF3; + border: solid 1px #ECEFE3; + font-size: 12px; + margin: 4px 0; + padding: 4px; +} + +#post-preview a { + color: #AAA; +} + +#post-preview a:hover { + color: #B4C669; +} + /* line 384, ../sass/style.sass */ .splited-post-counter { color: rgba(0, 0, 0, 0.3); diff --git a/theme_nin/sass/style.sass b/theme_nin/sass/style.sass index 79aa579..094055f 100755 --- a/theme_nin/sass/style.sass +++ b/theme_nin/sass/style.sass @@ -354,6 +354,17 @@ ul.userMenu-search-profiles &:focus border-bottom: solid 2px $color-green +#post-preview + background-color: #FCFFF3 + border: solid 1px #ECEFE3 + font-size: 12px + margin: 4px 0 + padding: 4px + a + color: #AAA + a:hover + color: $color-green + #postboard-top clear: both position: relative diff --git a/tmobile.html b/tmobile.html index 7b63760..6a7699b 100644 --- a/tmobile.html +++ b/tmobile.html @@ -1,12 +1,12 @@ - - - + + + twister mobile - + @@ -38,8 +38,8 @@ - - + +
    @@ -94,7 +94,7 @@

    twister login

    -
    +
    - +
    Home Network @@ -153,7 +153,7 @@
    - +
    @@ -164,19 +164,19 @@ @
    - +

    New post
    -
    +
    - +
    Login Network @@ -186,7 +186,7 @@
    - +
    Search

    twister

    @@ -197,7 +197,7 @@
    - +
    Home Network @@ -208,7 +208,7 @@
    - +
    Search

    @@ -219,7 +219,7 @@
    - +
    Home Network @@ -229,7 +229,7 @@
    - +
    Search

    @@ -240,7 +240,7 @@
    - +
    Home Network @@ -252,16 +252,16 @@
    - +

    New post

    - +
    - +
    @@ -277,7 +277,7 @@
    - +
    Home Network @@ -317,7 +317,7 @@
    - +
    Search

    Profile

    @@ -325,7 +325,7 @@
    - +
    - + +
    +
    +
    +
    +
  • user-photo
    • - - + + - + user-photo - +
  • @@ -782,7 +787,7 @@

    • - +

  • @@ -791,9 +796,9 @@

    • - +
    - - + +