git.gnu.io has moved to IP address 209.51.188.249 -- please double check where you are logging in.

Commit ce0100ee authored by hannes's avatar hannes

better handling of user designs, and a new custom welcome text option

parent fb271860
......@@ -65,8 +65,15 @@ class QvitterPlugin extends Plugin {
// DEFAULT LINK COLOR
$settings['defaultlinkcolor'] = '#0084B4';
// ENABLE WELCOME TEXT
$settings['enablewelcometext'] = true;
// ENABLE DEFAULT WELCOME TEXT
$settings['enablewelcometext'] = false;
// CUSTOM WELCOME TEXT (overrides 'enablewelcometext')
$settings['customwelcometext'] = false;
// Example:
// $settings['customwelcometext']['sv'] = '<h1>Välkommen till Quitter.se – en federerad<sup>1</sup> mikrobloggsallmänning!</h1><p>Det här är stället för dig som har tröttnat på att privata företag kontrollerar dina relationer och samtal och säljer dem för vinst. Här är du inte instängd i en kommersiell tjänst; med Quitter.se kan du följa och prata med mikrobloggare från hela det öppna <em>GNU Social</em>-nätverket.<sup>2</sup> Tillsammans tar vi makten över kommunikationsmedlen och skapar verklig demokrati på nätet.<br><br>Quitter.se är inte en tjänst, eftersom vi inte säljer varor.<sup>3</sup> Istället kallar vi det för en allmänning.<sup>4</sup> Sajten sköts av den ideella föreningen <em>En kompis kompis</em><sup>5</sup> och finansieras av gåvor och medlemsavgifter. Allt arbete är oavlönat och frivilligt. Det är helt gratis att <span class="welcome-text-register-link">registrera sig</span>, men den som vill hjälpa till lite extra kan bli stödmedlem i föreningen eller donera valfri summa anonymt.<sup>6</sup><br><br><small class="notes"><sup>1</sup> "Federerad" är motsatsen till centraliserad. Epost är federerat, du kan mejla från Gmail till Hotmail. Kommersiella sociala medier är inte federerade, du kan inte prata med Facebook-användare på Twitter. Att hängna in och isolera en stor användarskara är nämligen hela affärsidén med sociala medier!<br><sup>2</sup> <a href="http://gnu.io/social/">http://gnu.io/social/</a> "GNU Social" är den mjukvara som Quitter.se använder. Nätverket kallas även <em>fediversum</em> ("The Fediverse" på engelska) och består egentligen av alla sajter som kommunicerar enligt Ostatus-protokollet. GNU Social-anslutna mikrobloggssajter kallas <em>instanser</em>. Det finns många andra, t ex: <a href="https://quitter.is/">quitter.is</a>, <a href="https://quitter.no/">quitter.no</a>, <a href="https://quitter.es/">quitter.es</a> och <a href="https://quitter.cat/">quitter.cat</a>. Det spelar ingen roll vilken du har ditt konto på, du kan ändå kommunicera med alla på nätverket.<br><sup>3</sup> Karl Marx. <em>Kapitalet, band I-III</em><br><sup>4</sup> <a href="http://skapaallmanningar.se/vad-ar-en-allmanning/">http://skapaallmanningar.se/vad-ar-en-allmanning/</a><br><sup>5</sup> <a href="http://enkompiskompis.se/">http://enkompiskompis.se/</a><br><sup>6</sup> <a href="http://enkompiskompis.se/sv/donationer/">http://enkompiskompis.se/sv/donationer/</a></small></p>';
// $settings['customwelcometext']['en'] = '<h1>Welcome to Quitter.se – a federated microblog common!</h1><p></p>';
// TIME BETWEEN POLLING
$settings['timebetweenpolling'] = 5000; // ms
......
......@@ -3,7 +3,7 @@ Qvitter
* Author: Hannes Mannerheim (<h@nnesmannerhe.im>)
* Last mod.: May, 2015
* Version: 4
* Version: 5-alpha
* GitHub: <https://github.com/hannesmannerheim/qvitter>
Qvitter is free software: you can redistribute it and / or modify it
......
......@@ -200,7 +200,8 @@ class QvitterAction extends ApiAction
window.defaultLinkColor = '<?php print QvitterPlugin::settings("defaultlinkcolor"); ?>';
window.defaultBackgroundColor = '<?php print QvitterPlugin::settings("defaultbackgroundcolor"); ?>';
window.siteBackground = '<?php print QvitterPlugin::settings("sitebackground"); ?>';
window.enableWelcomeText = '<?php print QvitterPlugin::settings("enablewelcometext"); ?>';
window.enableWelcomeText = <?php print json_encode(QvitterPlugin::settings("enablewelcometext")); ?>;
window.customWelcomeText = <?php print json_encode(QvitterPlugin::settings("customwelcometext")); ?>;
window.urlShortenerAPIURL = '<?php print QvitterPlugin::settings("urlshortenerapiurl"); ?>';
window.urlShortenerSignature = '<?php print QvitterPlugin::settings("urlshortenersignature"); ?>';
window.commonSessionToken = '<?php print common_session_token(); ?>';
......@@ -391,8 +392,6 @@ class QvitterAction extends ApiAction
}
?><div class="front-welcome-text <?php if ($registrationsclosed) { print 'registrations-closed'; } ?>">
<h1></h1>
<p></p>
</div>
<div id="user-container" style="display:none;">
<div id="login-content">
......
......@@ -474,8 +474,7 @@ body.rtl .dropdown-menu li:not(.dropdown-caret) {
direction: ltr;
unicode-bidi: bidi-override;
}
.front-welcome-text,
#site-notice {
color: #EEEEEE;
font-size: 30px;
......@@ -487,7 +486,101 @@ body.rtl .dropdown-menu li:not(.dropdown-caret) {
text-shadow: 0 1px 2px #000000;
display:none;
font-family: "Helvetica Neue",Arial,sans-serif;
}
.front-welcome-text {
color: #333;
font-size: 30px;
font-weight: 300;
line-height: 32px;
margin: 0;
padding: 20px 30px 20px 30px;
margin:10px 0 20px 0;
text-align: left;
text-shadow: 0 1px 2px #fff;
display:none;
font-family: "Helvetica Neue",Arial,sans-serif;
background-color:rgba(255,255,255,0.8);
position:relative;
border-radius:3px;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.front-welcome-text.expanded {
padding-bottom:100px;
background-color:rgba(255,255,255,1);
}
.front-welcome-text.expanded .show-full-welcome-text:before {
content: "\f106";
}
.show-full-welcome-text {
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
cursor:pointer;
}
.show-full-welcome-text:before {
content: "\f107";
font-family:FontAwesome;
position:absolute;
background:blue;
text-align:center;
display:block;
width:100%;
height:60px;
padding-top:40px;
font-size:100px;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0px, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0px,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0px,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0) 0px,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0px,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0px,rgba(255,255,255,1) 100%); /* W3C */
text-shadow:2px 2px 3px rgba(255,255,255,0.9), -2px 2px 3px rgba(255,255,255,0.9), -2px -2px 3px rgba(255,255,255,0.9), 2px -2px 3px rgba(255,255,255,0.9);
}
.front-welcome-text h1 {
color: #333;
font-size: 30px;
font-weight: 700;
margin: 0 0 3px 0;
padding:0;
line-height: 1.2;
}
.front-welcome-text sup {
font-size:0.8em;
cursor:pointer;
}
.front-welcome-text p {
font-size:23px;
line-height:29px;
}
.front-welcome-text p a,
.front-welcome-text p a:active,
.front-welcome-text p a:visited {
color:#333;
text-decoration:underline;
}
.welcome-text-register-link {
text-decoration:underline;
cursor:pointer;
}
.front-welcome-text p small.notes {
display:inline-block;
font-size:12px;
line-height:17px;
border-top:1px solid #666;
padding-top:10px;
}
body.rtl .front-welcome-text {
direction:rtl;
text-align:right;
......@@ -512,15 +605,7 @@ body.rtl .front-welcome-text {
#qvitter-notice a:hover {
opacity:0.8;
}
.front-welcome-text h1 {
color: #FFFFFF;
font-size: 30px;
font-weight: 700;
margin-bottom: 3px;
line-height: 1;
text-shadow: 0 1px 2px #000000;
}
.front-welcome-text #federated-tooltip {
text-decoration:underline;
position:relative;
......
......@@ -199,9 +199,9 @@ function postNewBackgroundColor(newBackgroundColor) {
dataType:"json",
error: function(data){ console.log(data); },
success: function(data) {
window.userBackgroundColor = newBackgroundColor;
$('body').css('background-image','url(""'); // unset background image
window.userBackgroundImage = '';
// unset background image and set new color
window.loggedIn.background_image = false;
changeDesign({backgroundimage:false,backgroundcolor:newBackgroundColor});
}
});
}
......
......@@ -188,7 +188,7 @@ function profileCardFromFirstObject(data,screen_name) {
// change design
changeDesign(first.user);
changeDesign({backgroundimage:first.user.background_image, backgroundcolor:first.user.backgroundcolor, linkcolor:first.user.linkcolor});
// remove any old profile card
$('#feed').siblings('.profile-card').remove();
......@@ -241,7 +241,7 @@ function profileCardFromFirstObject(data,screen_name) {
}
// change design
changeDesign(data);
changeDesign({backgroundimage:data.background_image, backgroundcolor:data.backgroundcolor, linkcolor:data.linkcolor});
// remove any old profile card and show profile card
$('#feed').siblings('.profile-card').remove();
......@@ -289,6 +289,10 @@ function groupProfileCard(groupAlias) {
if(typeof window.loggedIn.screen_name == 'undefined') {
var memberButton = '<div class="user-actions"><button type="button" class="external-member-button"><span class="button-text join-text"><i class="join"></i>' + window.sL.joinExternalGroup + '</span></button></div>';
}
// change design
changeDesign({backgroundimage:false, backgroundcolor:false, linkcolor:false});
// add card to DOM
$('#feed').siblings('.profile-card').remove(); // remove any old profile card
......@@ -433,7 +437,7 @@ function setNewCurrentStream(stream,actionOnSuccess,setLocation) {
addStreamToHistoryMenuAndMarkAsCurrent(streamHeader, defaultStreamName);
// and change design immediately
changeDesign(window.oldStreamsDesigns[window.currentStream]);
changeDesign(window.oldStreamsDesigns[theUserOrGroupThisStreamBelongsTo(window.currentStream)]);
}
// otherwise we fade out and wait for stream to load
......@@ -462,7 +466,7 @@ function setNewCurrentStream(stream,actionOnSuccess,setLocation) {
if(window.currentStream == stream) {
// change design
changeDesign(window);
changeDesign({backgroundimage:window.loggedIn.background_image, backgroundcolor:window.loggedIn.backgroundcolor, linkcolor:window.loggedIn.linkcolor});
// get screen name from stream, if not found, this is me
if(stream.indexOf('screen_name=')>-1) {
......@@ -504,7 +508,7 @@ function setNewCurrentStream(stream,actionOnSuccess,setLocation) {
if(window.currentStream == stream) {
// change design
changeDesign(window);
changeDesign({backgroundimage:window.loggedIn.background_image, backgroundcolor:window.loggedIn.backgroundcolor, linkcolor:window.loggedIn.linkcolor});
// show profile card if this is a user's queet stream
if(stream.substring(0,27) == 'statuses/user_timeline.json') {
......
This diff is collapsed.
......@@ -56,6 +56,32 @@ window.onpopstate = function(event) {
}
/* ·
·
· welcome text expand and collapse
·
· · · · · · · · · · · · · */
$('body').on('click','.show-full-welcome-text, .front-welcome-text:not(.expanded) sup',function(){
$('.front-welcome-text').toggleClass('expanded');
if($('.front-welcome-text').hasClass('expanded')) {
var welcomeTextInnerObjectsHeightSum = $('.front-welcome-text > p').outerHeight() + $('.front-welcome-text > h1').outerHeight() + 50;
$('.front-welcome-text').css('height', welcomeTextInnerObjectsHeightSum + 'px')
}
else {
$('.front-welcome-text').css('height', '180px');
$('.front-welcome-text').css('overflow', 'hidden');
var scrollTo = $(window).scrollTop() - ($('.front-welcome-text').outerHeight()-200);
if(scrollTo < 0) { scrollTo = 0;}
$('html, body').animate({ scrollTop: scrollTo}, 300, 'linear');
}
});
$('body').on('click','.welcome-text-register-link',function(){
var scrollTo = $('#user-container').offset().top;
$('html, body').animate({ scrollTop: scrollTo}, 300, 'linear');
});
/* ·
·
· fix login and register box to top when they reach top
......@@ -63,10 +89,18 @@ window.onpopstate = function(event) {
· · · · · · · · · · · · · */
$(window).scroll(function(e){
if ($(this).scrollTop() > ($('#feed').offset().top-50) && $('#login-content').css('position') != 'fixed'){
$('#login-content, .front-signup').not('#popup-signup').css({'position': 'fixed', 'top': '50px'});
if($('#page-container > .profile-card').length > 0) {
var feedOrProfileCardOffsetTop = $('#page-container > .profile-card').offset().top;
}
else {
var feedOrProfileCardOffsetTop = $('#feed').offset().top;
}
else if ($(this).scrollTop() < ($('#feed').offset().top-50) && $('#login-content').css('position') != 'absolute'){
if ($(this).scrollTop() > (feedOrProfileCardOffsetTop-55) && $('#login-content').css('position') != 'fixed'){
$('#login-content, .front-signup').not('#popup-signup').css({'position': 'fixed', 'top': '55px'});
}
else if ($(this).scrollTop() < (feedOrProfileCardOffsetTop-55) && $('#login-content').css('position') != 'absolute'){
$('#login-content, .front-signup').not('#popup-signup').css({'position': 'absolute', 'top': 'auto'});
}
});
......@@ -331,16 +365,30 @@ function proceedToSetLanguageAndLogin(data){
window.siteTitle = $('head title').html(); // remember this for later use
// replace placeholders in translation
$.each(window.sL,function(k,v){
window.sL[k] = v.replace(/{site-title}/g,window.siteTitle);
});
// set some static string
$('.front-welcome-text h1').html(window.sL.welcomeHeading);
if (window.enableWelcomeText) {
$('.front-welcome-text p').html(window.sL.welcomeText);
}
// set some static strings
if(window.customWelcomeText !== false && typeof window.customWelcomeText[window.selectedLanguage] != 'undefined') {
$('.front-welcome-text').html(window.customWelcomeText[window.selectedLanguage]);
// collapse long welcome texts and add expand button
if($('.front-welcome-text').outerHeight()>250) {
$('.front-welcome-text').css('height','240px');
$('.front-welcome-text').css('overflow', 'hidden');
$('.front-welcome-text').append('<div class="show-full-welcome-text"></div>');
}
}
else {
$('.front-welcome-text').html('<h1>' + window.sL.welcomeHeading + '</h1>');
if(window.enableWelcomeText) {
$('.front-welcome-text').append(window.sL.welcomeText);
}
}
$('#nickname').attr('placeholder',window.sL.loginUsername);
$('#password').attr('placeholder',window.sL.loginPassword);
$('button#submit-login').html(window.sL.loginSignIn);
......@@ -421,26 +469,6 @@ function doLogin(streamToSet) {
$('#submit-login').focus(); // prevents submit on enter to close alert-popup on wrong credentials
display_spinner();
// set colors if the api supports it
if(typeof window.loggedIn.linkcolor != 'undefined' &&
typeof window.loggedIn.backgroundcolor != 'undefined') {
window.loggedIn.linkcolor = window.loggedIn.linkcolor || ''; // no null value
window.loggedIn.backgroundcolor = window.loggedIn.backgroundcolor || ''; // no null value
window.userLinkColor = window.loggedIn.linkcolor;
window.userBackgroundColor = window.loggedIn.backgroundcolor;
window.userBackgroundImage = window.loggedIn.background_image;
if(window.userLinkColor.length != 6) {
window.userLinkColor = window.defaultLinkColor;
}
if(window.userBackgroundColor.length != 6) {
window.userBackgroundColor = window.defaultBackgroundColor;
}
if(window.userBackgroundImage.length < 1) {
window.userBackgroundImage = '';
}
}
// add user data to DOM, show search form, remeber user id, show the feed
$('#user-container').css('z-index','1000');
$('#top-compose').removeClass('hidden');
......@@ -573,11 +601,7 @@ $('#classic-link').click(function(){
· · · · · · · · · · · · · */
function logoutWithoutReload(doShake) {
if(window.currentStream == 'statuses/public_timeline.json') {
$('body').css('background-image', 'url(' + window.fullUrlToThisQvitterApp + window.siteBackground +')');
}
$('input#nickname').focus();
$('.front-signup').animate({opacity:'1'},200);
if(doShake) {
......@@ -591,7 +615,7 @@ function logoutWithoutReload(doShake) {
$('input#password').animate({backgroundColor:'#fff'},1000);
});
}
$('.front-welcome-text').fadeIn(3000);
$('.front-welcome-text').show();
});
$('#page-container').animate({opacity:'1'},200);
......@@ -1393,13 +1417,14 @@ $('body').on('click','.queet',function (event) {
/* ·
·
· Collapse all open conversations and ellipsis menus on esc or when clicking the margin
· Collapse all open conversations, ellipsis menus and the welcome text on esc or when clicking the margin
·
· · · · · · · · · · · · · */
$('body').click(function(event){
if($(event.target).is('body')) {
$('.action-ellipsis-container').children('.dropdown-menu').remove();
$('.front-welcome-text.expanded > .show-full-welcome-text').trigger('click');
$.each($('.stream-item.expanded'),function(){
expand_queet($(this), false);
});
......@@ -1409,6 +1434,7 @@ $('body').click(function(event){
$(document).keyup(function(e){
if(e.keyCode==27) { // esc
$('.action-ellipsis-container').children('.dropdown-menu').remove();
$('.front-welcome-text.expanded > .show-full-welcome-text').trigger('click');
$.each($('.stream-item.expanded'),function(){
expand_queet($(this), false);
});
......@@ -2249,11 +2275,11 @@ $('body').on('click','.edit-profile-button',function(){
<div class="profile-banner-footer">\
<div class="color-selection">\
<label for="link-color-selection">' + window.sL.linkColor + '</label>\
<input id="link-color-selection" type="text" value="#' + window.userLinkColor + '" />\
<input id="link-color-selection" type="text" value="#' + window.loggedIn.linkcolor + '" />\
</div>\
<div class="color-selection">\
<label for="link-color-selection">' + window.sL.backgroundColor + '</label>\
<input id="background-color-selection" type="text" value="#' + window.userBackgroundColor + '" />\
<input id="background-color-selection" type="text" value="#' + window.loggedIn.backgroundcolor + '" />\
</div>\
<div class="user-actions">\
<button type="button" class="abort-edit-profile-button"><span class="button-text edit-profile-text">' + window.sL.cancelVerb + '</span>\
......@@ -2268,14 +2294,16 @@ $('body').on('click','.edit-profile-button',function(){
// save colors on change
$('#link-color-selection').minicolors({
change: function(hex) {
changeLinkColor(hex);
changeDesign({linkcolor:hex});
postNewLinkColor(hex.substring(1));
window.loggedIn.linkcolor = hex.substring(1);
}
});
$('#background-color-selection').minicolors({
change: function(hex) {
$('body').css('background-color',hex);
changeDesign({backgroundcolor:hex});
postNewBackgroundColor(hex.substring(1));
window.loggedIn.backgroundcolor = hex.substring(1);
}
});
// also on keyup in input (minicolors 'change' event does not do this, apparently)
......@@ -2450,8 +2478,8 @@ $('body').on('click','.crop-and-save-button',function(){
$('.crop-and-save-button').removeAttr('disabled');
$('.crop-and-save-button').removeClass('disabled');
cleanUpAfterCropping();
$('body').css('background-image','url(\'' + data.url + '\')');
window.userBackgroundImage = data.url;
changeDesign({backgroundimage:data.url});
window.loggedIn.background_image = data.url;
}
else {
alert('Try again! ' + data.error);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment