Browse Source

convert profile-edit.html to #/account modal

readme-update
Simon Grim 5 years ago
parent
commit
cecd428e5d
  1. 126
      css/profile.css
  2. 28
      home.html
  3. 281
      js/interface_common.js
  4. 119
      js/interface_profile-edit.js
  5. 10
      js/mobile_abstract.js
  6. 55
      js/tmobile.js
  7. 146
      js/twister_actions.js
  8. 18
      js/twister_formatpost.js
  9. 63
      js/twister_io.js
  10. 99
      js/twister_user.js
  11. 2
      network.html
  12. 2
      options.html
  13. 108
      profile-edit.html
  14. 170
      theme_calm/css/profile.css
  15. 138
      theme_nin/css/style.css
  16. 108
      theme_nin/sass/_profile.sass
  17. 8
      tmobile.html

126
css/profile.css

@ -68,86 +68,86 @@ @@ -68,86 +68,86 @@
right: 0;
}
.profile-card.forEdition
{
margin: 0 auto;
width: 540px;
}
.forEdition .profile-card-photo
{
border: solid 2px #fff;
border-radius: 0%;
float:none;
position: relative;
cursor: pointer;
transition: all .2s linear;
}
.forEdition .profile-card-main:hover:after,
.forEdition .profile-card-photo:after
{
content: "";
width: 36px;
height: 36px;
position: absolute;
top: 10px;
right: 10px;
background: url(../img/edit.png) no-repeat right top;
/*************************************
************ ACCOUNT MODAL ***********
**************************************/
.account-modal.modal-wrapper {
height: 394px;
margin-top: -197px;
}
.forEdition .profile-card-main:hover:before
{
border: solid 5px #fff;
.account-modal .module {
margin: 4px;
}
.forEdition .profile-card-main h2
{
margin-bottom: 8px;
.account-modal .module > div {
width: 100%;
margin: 4px 0;
padding: 4px 12px;
}
.forEdition .profile-card-main input, .forEdition .profile-card-main textarea {
.account-modal input, .account-modal textarea {
display: block;
margin: 0 auto;
background: rgba( 0, 0, 0, .1 );
border: none;
padding: 6px 4px;
color: #fff;
margin-bottom: 4px;
text-align: center;
transition: all .2s linear;
border: solid 1px rgba(0, 0, 0, .3);
border-radius: 3px;
width: 320px;
margin: 12px 16px;
padding: 2px 4px;
}
.forEdition .profile-card-main input:hover,
.forEdition .profile-card-main input:focus,
.forEdition .profile-card-main textarea:hover, .forEdition .profile-card-main textarea:focus,
.forEdition .profile-card-photo:hover
{
background: rgba( 0, 0, 0, .3 );
.account-modal textarea {
width: 330px;
max-width: 330px;
min-width: 330px;
min-height: 28px;
}
.input-description {
width: 90%;
max-width: 90%;
.account-modal input:focus, .account-modal textarea:focus {
border: solid 1px rgba(227, 79, 66, .5);
}
.input-name
{
font-size: 20px;
.account-modal .alias {
margin: 0px 16px;
}
.forEdition .profile-card-main .input-website,
.forEdition .profile-card-main .input-city
{
display: inline-block;
.account-modal .avatar {
position: absolute;
right: 12px;
top: 42px;
cursor: pointer;
width: 64px;
height: 64px;
overflow: hidden;
margin: 12px 16px;
}
.forEdition .profile-card-main .input-tox,
.forEdition .profile-card-main .input-bitmessage
{
width: 90%;
margin-top: 10px;
.account-modal .avatar img {
width: 64px;
height: auto;
border: solid 1px rgba(0, 0, 0, .3);
border-radius: 4px;
}
.profile-edition-buttons
{
padding: 10px;
.account-modal .c-buttons {
text-align: right;
}
.account-modal .toggle-secret-key {
float: left;
}
.account-modal .secret-key-container {
text-align: center;
font-size: 12px;
}
.account-modal .secret-key {
background-color: #FFFFED;
border: solid 1px rgba(0, 0, 0, .3);
font-weight: bold;
}
/*************************************
************ PROFILE MODAL ***********
**************************************/

28
home.html

@ -51,7 +51,7 @@ @@ -51,7 +51,7 @@
<a class="dropdown-menu-item uri-shortener">URI_shortener</a>
<a class="dropdown-menu-item" href="options.html">Options</a>
<a class="dropdown-menu-item" href="network.html">Network config</a>
<a class="dropdown-menu-item" href="profile-edit.html">Setup account</a>
<a class="dropdown-menu-item" href="#/account">Setup account</a>
<a class="dropdown-menu-item" href="#/login">Change user</a>
<a class="dropdown-menu-item updates-check-client">Check for client's updates</a>
<a class="dropdown-menu-item dropdown-menu-following" href="#following">Following users</a>
@ -474,6 +474,32 @@ @@ -474,6 +474,32 @@
</div>
</div>
<div id="template-account-modal">
<div class="module">
<div>
<div class="avatar">
<img src="img/genericPerson.png"/>
</div>
<input type="text" class="input-name"/>
<h2 class="alias"></h2>
<textarea class="input-bio"></textarea>
<input type="text" class="input-location"/>
<input type="text" class="input-url"/>
<input type="text" class="input-tox"/>
<input type="text" class="input-bitmessage"/>
</div>
<div class="c-buttons">
<button class="toggle-secret-key">Secret Key</button>
<button class="submit-changes">Save Changes</button>
</div>
</div>
<div class="module secret-key-container">
<div class="label">Secret key:</div>
<div class="secret-key"></div>
</div>
<input type="file" accept="image/*" class="input-avatar" style="display: none;"/>
</div>
<div id="template-login-modal">
<div class="module">
<div>

281
js/interface_common.js

@ -20,6 +20,7 @@ var twister = { @@ -20,6 +20,7 @@ var twister = {
},
modal: {},
res: {}, // reses for various reqs are cached here
twists: {},
var: {
dateFormatter: {
format: function (req) {
@ -456,6 +457,121 @@ function timeSincePost(t) { @@ -456,6 +457,121 @@ function timeSincePost(t) {
return polyglot.t('time_ago', {time: expression});
}
function openModalAccount() {
if (!defaultScreenName) {
alertPopup({
//txtTitle: polyglot.t(''), add some title (not 'error', please) or just KISS
txtMessage: polyglot.t('username_undefined')
});
history.back();
return;
}
var modal = openModal({
classAdd: 'account-modal',
content: twister.tmpl.accountMC.clone(true),
title: polyglot.t('Edit profile')
});
modal.content.find('.alias').text('@' + defaultScreenName);
loadProfileForEdit(defaultScreenName, {
fullname: modal.content.find('.input-name').attr('placeholder', polyglot.t('Full name here')),
bio: modal.content.find('.input-bio').attr('placeholder', polyglot.t('Describe yourself')),
location: modal.content.find('.input-location').attr('placeholder', polyglot.t('Location')),
url: modal.content.find('.input-url').attr('placeholder', polyglot.t('website')),
tox: modal.content.find('.input-tox').attr('placeholder', polyglot.t('Tox address')),
bitmessage: modal.content.find('.input-bitmessage').attr('placeholder', polyglot.t('Bitmessage address'))
});
loadAvatarForEdit(defaultScreenName, modal.content.find('.avatar img'));
dumpPubkey(defaultScreenName, checkAccountRegistrationCB, {
peerAlias: defaultScreenName,
cbFunc: checkAccountRegistrationCB,
submitChangesElem: modal.content.find('.submit-changes')
});
}
function checkAccountRegistrationCB(req, res) {
if (res.length > 0) {
if (followingUsers.indexOf('twister') !== -1) {
if (!isModalWithElemExists(req.submitChangesElem))
return;
req.submitChangesElem.attr('data-blocked', 'false');
if (req.submitChangesElem.attr('data-profile-changed') === 'true'
|| req.submitChangesElem.attr('data-avatar-changed') === 'true')
$.MAL.enableButton(req.submitChangesElem);
} else {
follow('twister', true,
function (req) {
// TODO add alertPopup() with welcome message
if (!isModalWithElemExists(req))
return;
req.attr('data-blocked', 'false');
if (req.attr('data-profile-changed') === 'true'
|| req.attr('data-avatar-changed') === 'true')
$.MAL.enableButton(req);
},
req.submitChangesElem
);
}
} else {
if (!req.notYetAcceptedWarnDisplayed) {
req.notYetAcceptedWarnDisplayed = true;
alertPopup({
//txtTitle: polyglot.t(''), add some title or just KISS
txtMessage: polyglot.t('user_not_yet_accepted')
});
}
setTimeout(dumpPubkey, 5000, req.peerAlias, req.cbFunc, req);
}
}
function handleAvatarFileSelect(event, avatarElem) {
if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
alert('The File APIs are not fully supported in this browser.');
return;
}
if (!event || !event.target || !event.target.files || !event.target.files.length
|| !avatarElem || !avatarElem.length)
return;
var file = event.target.files[0];
if (!file.type.startsWith('image/'))
return;
var reader = new FileReader();
reader.data = avatarElem;
reader.onload = function (event) {
var img = document.createElement('img');
img.data = event.target.data;
img.onload = function (event) {
var ratio = 64 / Math.max(event.target.width, event.target.height);
var canvas = document.createElement('canvas');
canvas.width = Math.round(event.target.width * ratio);
canvas.height = Math.round(event.target.height * ratio);
canvas.getContext('2d').drawImage(event.target, 0, 0, canvas.width, canvas.height);
var imgURL;
for (var quality = 1.0; (!imgURL || imgURL.length > 4096) && quality > 0.1; quality -= 0.01)
imgURL = canvas.toDataURL('image/jpeg', quality);
event.target.data.attr('src', imgURL);
};
img.src = event.target.result;
};
reader.readAsDataURL(file);
}
function openModalLogin() {
var modal = openModal({
classAdd: 'login-modal',
@ -958,7 +1074,8 @@ function addToCommonDMsList(list, targetAlias, message) { @@ -958,7 +1074,8 @@ function addToCommonDMsList(list, targetAlias, message) {
.text(timeGmtToText(message.time))
;
if (targetAlias[0] === '*') {
getAvatar(message.from, item.find('.post-photo img')); // it's impossible yet to get group avatar
getAvatar(message.from, // it's impossible yet to get or to set an avatar of a group itself
item.find('.post-photo').attr('data-peer-alias', message.from).find('img'));
getGroupChatName(targetAlias, item.find('a.post-info-name'));
} else {
getAvatar(targetAlias, item.find('.post-photo img'));
@ -1367,6 +1484,8 @@ function loadModalFromHash() { @@ -1367,6 +1484,8 @@ function loadModalFromHash() {
openGroupMessagesNewGroupModal();
else if (hashstring === '#groupmessages+joingroup')
openGroupMessagesJoinGroupModal();
else if (hashstring === '#/account')
openModalAccount();
else if (hashstring === '#/login')
openModalLogin();
else if (hashstring === '#whotofollow')
@ -2625,7 +2744,12 @@ function changeStyle() { @@ -2625,7 +2744,12 @@ function changeStyle() {
if (theme === 'nin') {
style = 'theme_nin/css/style.css';
profile = 'theme_nin/css/profile.css';
$.getScript('theme_nin/js/theme_option.js');
$.ajax({dataType: 'text', url: 'theme_nin/js/theme_option.js'})
.done(function(script, textStatus) {
eval(script); // FIXME
//applyThemePptions();
})
;
} else if (theme === 'calm') {
style = 'theme_calm/css/style.css';
profile = 'theme_calm/css/profile.css';
@ -2915,6 +3039,157 @@ function initInterfaceCommon() { @@ -2915,6 +3039,157 @@ function initInterfaceCommon() {
})
;
twister.tmpl.post.find('.post-stats').hide();
twister.tmpl.accountMC = extractTemplate('#template-account-modal');
twister.tmpl.accountMC.find('.avatar').on('click',
function (event) {
$(event.target).closest('.modal-content').find('.input-avatar').trigger('click');
}
);
twister.tmpl.accountMC.find('input[type="text"], textarea').on('input', function (event) {
var saveElem = $(event.target).closest('.modal-content').find('.submit-changes')
.attr('data-profile-changed', 'true');
if (saveElem.prop('disabled') && saveElem.attr('data-blocked') !== 'true')
$.MAL.enableButton(saveElem);
});
twister.tmpl.accountMC.filter('.input-avatar').on('change', function (event) {
var containerElem = $(event.target).closest('.modal-content');
var saveElem = containerElem.find('.submit-changes')
.attr('data-avatar-changed', 'true');
if (saveElem.prop('disabled') && saveElem.attr('data-blocked') !== 'true')
$.MAL.enableButton(saveElem);
handleAvatarFileSelect(event, containerElem.find('.avatar img'));
});
twister.tmpl.accountMC.find('.submit-changes').attr('data-blocked', 'true')
.on('click', function (event) {
var saveElem = $(event.target);
var containerElem = saveElem.closest('.modal-content');
$.MAL.disableButton(saveElem);
var profileDataChanged = saveElem.attr('data-profile-changed') === 'true';
var avatarDataChanged = saveElem.attr('data-avatar-changed') === 'true';
if (profileDataChanged) {
saveElem.attr('data-profile-changed', 'false');
var profileData = {
fullname: containerElem.find('.input-name').val(),
bio: containerElem.find('.input-bio').val(),
location: containerElem.find('.input-location').val(),
url: containerElem.find('.input-url').val(),
tox: containerElem.find('.input-tox').val(),
bitmessage: containerElem.find('.input-bitmessage').val()
};
}
if (avatarDataChanged) {
saveElem.attr('data-avatar-changed', 'false');
var avatarData = containerElem.find('.avatar img').attr('src');
}
if (profileDataChanged && avatarDataChanged) {
redrawProfileAndAvatar(defaultScreenName, profileData, avatarData);
saveProfile(defaultScreenName, profileData,
function (req) {
saveAvatar(req.peerAlias, req.avatarData,
alertPopup,
{
txtMessage: polyglot.t('profile_saved')
},
alertPopup,
{
txtMessage: polyglot.t('profile_not_saved') + '\n\nCan\'t save avatar data.',
cbConfirm: function (req) {
$.MAL.enableButton(req.attr('data-avatar-changed', 'true'));
},
cbConfirmReq: req.saveElem,
cbClose: 'cbConfirm'
}
);
},
{
peerAlias: defaultScreenName,
avatarData: avatarData,
saveElem: saveElem
},
alertPopup,
{
txtMessage: polyglot.t('profile_not_saved') + '\n\nCan\'t save profile data.',
cbConfirm: function (req) {
$.MAL.enableButton(req.attr('data-profile-changed', 'true'));
},
cbConfirmReq: saveElem,
cbClose: 'cbConfirm'
}
);
} else if (profileDataChanged) {
redrawProfile(defaultScreenName, profileData);
saveProfile(defaultScreenName, profileData,
alertPopup,
{
txtMessage: polyglot.t('profile_saved')
},
alertPopup,
{
txtMessage: polyglot.t('profile_not_saved') + '\n\nCan\'t save profile data.',
cbConfirm: function (req) {
$.MAL.enableButton(req.attr('data-profile-changed', 'true'));
},
cbConfirmReq: saveElem,
cbClose: 'cbConfirm'
}
);
} else if (avatarDataChanged) {
redrawAvatar(defaultScreenName, avatarData);
saveAvatar(defaultScreenName, avatarData,
alertPopup,
{
txtMessage: polyglot.t('profile_saved')
},
alertPopup,
{
txtMessage: polyglot.t('profile_not_saved') + '\n\nCan\'t save avatar data.',
cbConfirm: function (req) {
$.MAL.enableButton(req.attr('data-avatar-changed', 'true'));
},
cbConfirmReq: saveElem,
cbClose: 'cbConfirm'
}
);
} else
$.MAL.enableButton(saveElem);
})
;
$.MAL.disableButton(twister.tmpl.accountMC.find('.submit-changes'));
twister.tmpl.accountMC.filter('.secret-key-container').hide();
twister.tmpl.accountMC.find('.toggle-secret-key').on('click', function (event) {
var containerElem = $(event.target).closest('.modal-content').find('.secret-key-container');
if (containerElem.is(':visible'))
containerElem.slideUp('fast');
else {
var secretKeyElem = containerElem.find('.secret-key');
if (secretKeyElem.text())
containerElem.slideDown('fast');
else
dumpPrivkey(defaultScreenName,
function(req, res) {
req.secretKeyElem.text(res);
req.containerElem.slideDown('fast');
},
{
containerElem: containerElem,
secretKeyElem: secretKeyElem
}
);
}
});
}
function extractTemplate(selector) {
@ -3082,8 +3357,6 @@ $(function () { @@ -3082,8 +3357,6 @@ $(function () {
} else if (page.indexOf('options.html') === 0) {
initInterfaceCommon();
$.Options.initControls();
} else if (page.indexOf("profile-edit.html") === 0) {
initProfileEdit();
}
changeStyle();

119
js/interface_profile-edit.js

@ -1,119 +0,0 @@ @@ -1,119 +0,0 @@
// interface_profile-edit.js
// 2013 Miguel Freitas
//
// Profile editing interface (profile-edit.html)
var newUserWarnDisplayed = false;
function initProfileEdit() {
// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
// Great success! All the File APIs are supported.
} else {
alert('The File APIs are not fully supported in this browser.');
}
initInterfaceCommon();
$('.profile-card-photo.forEdition').on('click', function () {$('#avatar-file').trigger('click');});
$('#avatar-file').on('change', handleAvatarFileSelect);
$('.submit-changes').on('click', saveProfile);
$('.cancel-changes').on('click', $.MAL.goHome);
initUser(function() {
if (!defaultScreenName) {
alert(polyglot.t('username_undefined'));
$.MAL.goLogin();
return;
}
checkNetworkStatusAndAskRedirect();
loadFollowing(function() {
twisterFollowingO = TwisterFollowing(defaultScreenName);
verifyUserAlreadyInBlockchain();
initMentionsCount();
initDMsCount();
});
$('.profile-card-main h2').text('@' + defaultScreenName);
loadAvatarForEdit();
loadProfileForEdit();
$('.secret-key-container').hide();
$('.toggle-priv-key').on('click', function () {
if ($('.secret-key-container').is(':visible')) {
$('.secret-key-container').fadeOut(function () {
$('.secret-key').text('');
});
} else {
dumpPrivkey(defaultScreenName, function(args, key) {
$('.secret-key').text(key);
$('.secret-key-container').fadeIn();
}, {});
}
});
});
}
function handleAvatarFileSelect(event) {
var files = event.target.files; // FileList object
var file = files[0];
// Only process image files.
if (file.type.match('image.*')) {
var reader = new FileReader();
reader.onload = function(event) {
var img = new Image();
img.onload = function() {
var MAXWidthHeight = 64;
var ratio = MAXWidthHeight / Math.max(this.width, this.height);
var canvas = document.createElement('canvas');
canvas.width = Math.round(this.width * ratio);
canvas.height = Math.round(this.height * ratio);
canvas.getContext('2d').drawImage(this, 0, 0, canvas.width, canvas.height);
var imgURL = undefined;
for (var quality = 1.0; (!imgURL || imgURL.length > 4096) && quality > 0.1; quality -= 0.01) {
imgURL = canvas.toDataURL('image/jpeg', quality);
}
$('.profile-card-photo.forEdition').attr('src', imgURL);
}
img.src = event.target.result;
}
// Read in the image file as a data URL.
reader.readAsDataURL(file);
}
}
function verifyUserAlreadyInBlockchain() {
$.MAL.disableButton($('.submit-changes'));
dumpPubkey(defaultScreenName, function(args, pubkey) {
if (pubkey.length > 0) {
follow('twister', true, function() {
$.MAL.enableButton($('.submit-changes'));
});
} else {
if (!newUserWarnDisplayed) {
alert(polyglot.t('user_not_yet_accepted'));
newUserWarnDisplayed = true;
}
setTimeout(verifyUserAlreadyInBlockchain, 5000);
}
}, {});
}
function localizePlaceholders() {
$('.input-name').attr('placeholder', polyglot.t('Full name here'));
$('.input-description').attr('placeholder', polyglot.t('Describe yourself'));
$('.input-city').attr('placeholder', polyglot.t('Location'));
$('.input-website').attr('placeholder', polyglot.t('website'));
$('.input-tox').attr('placeholder', polyglot.t('Tox address'));
$('.input-bitmessage').attr('placeholder', polyglot.t('Bitmessage address'));
}
$(localizePlaceholders);

10
js/mobile_abstract.js

@ -326,7 +326,7 @@ var MAL = function() @@ -326,7 +326,7 @@ var MAL = function()
if( $.hasOwnProperty("mobile") ) {
$.mobile.navigate( "#profile-edit" );
} else {
window.location.href = "profile-edit.html";
window.location.hash = '#/account';
}
}
@ -420,7 +420,13 @@ var MAL = function() @@ -420,7 +420,13 @@ var MAL = function()
txtTitle: polyglot.t('propagating_nickname', {username: peerAlias}),
txtMessage: polyglot.t('new_account_briefing', {secretKey: secretKey}),
txtConfirm: polyglot.t('Login'),
cbConfirm: $.MAL.goProfileEdit,
cbConfirm: function () {
// FIXME we're reloading the page entirely for now
// here should be $.MAL.goProfileEdit but first an additional code should be added to change user globally
twister.var.initializated = false; // to not do openModalAccount()
window.location.href = '/#/account';
location.reload();
},
addBlackout: true,
removeCancel: true,
removeClose: true

55
js/tmobile.js

@ -136,8 +136,14 @@ var router=new $.mobile.Router( @@ -136,8 +136,14 @@ var router=new $.mobile.Router(
profileedit: function(type,match,ui) {
$.mobile.loading('show');
initializeTwister( true, true, function() {
loadAvatarForEdit();
loadProfileForEdit();
var containerElem = $('.profile-card.forEdition');
loadProfileForEdit(defaultScreenName, {
fullname: containerElem.find('.input-name').attr('placeholder', polyglot.t('Full name here')),
bio: containerElem.find('.input-bio').attr('placeholder', polyglot.t('Describe yourself')),
location: containerElem.find('.input-location').attr('placeholder', polyglot.t('Location')),
url: containerElem.find('.input-url').attr('placeholder', polyglot.t('website'))
});
loadAvatarForEdit(defaultScreenName, $('.profile-card-photo.forEdition'));
dumpPrivkey(defaultScreenName, function(args, key) {
$(".secret-key").text(key);
}, {});
@ -449,10 +455,47 @@ function installUserSearchHandler() { @@ -449,10 +455,47 @@ function installUserSearchHandler() {
function installProfileEditHandlers() {
$('.profile-card-photo.forEdition').on('click', function () {$('#avatar-file').trigger('click');});
$('#avatar-file').on('change', handleAvatarFileSelectMobile);
$('.submit-changes').on('click', function () {
saveProfile();
setTimeout( function() {$.MAL.goHome();}, 1000);
} );
$('.submit-changes').on('click', function (event) {
var saveElem = $(event.target);
var containerElem = saveElem.closest('.content');
$.MAL.disableButton(saveElem);
saveProfile(defaultScreenName,
{
fullname: containerElem.find('.input-name').val(),
bio: containerElem.find('.input-bio').val(),
location: containerElem.find('.input-location').val(),
url: containerElem.find('.input-url').val(),
tox: containerElem.find('.input-tox').val(),
bitmessage: containerElem.find('.input-bitmessage').val()
},
function (req) {
saveAvatar(req.peerAlias, req.avatarData,
function () {
alert(polyglot.t('profile_saved'));
$.MAL.goHome();
},
null,
function (req) {
alert(polyglot.t('profile_not_saved') + '\n\nCan\'t save avatar data.');
$.MAL.enableButton(req);
},
req.saveElem
);
},
{
peerAlias: defaultScreenName,
avatarData: containerElem.find('.profile-card-photo.forEdition').attr('src'),
saveElem: saveElem
},
function (req) {
alert(polyglot.t('profile_not_saved') + '\n\nCan\'t save profile data.');
$.MAL.enableButton(req);
},
saveElem
);
});
$('.cancel-changes').on('click', $.mobile.back);
}

146
js/twister_actions.js

@ -533,6 +533,152 @@ function updateProfilePosts(postsView, username, useGetposts) { @@ -533,6 +533,152 @@ function updateProfilePosts(postsView, username, useGetposts) {
});
}
function loadProfileForEdit(peerAlias, req) {
loadProfile(peerAlias,
function (peerAlias, req, res) {
for (var i in req)
if (req[i].length && res[i])
req[i].val(res[i]);
},
req
);
}
function loadAvatarForEdit(peerAlias, req) {
loadAvatar(peerAlias,
function (peerAlias, req, res) {
req.attr('src', res);
},
req
);
}
function redrawProfileAndAvatar(peerAlias, profileData, avatarData) {
var containerElem;
if (peerAlias === defaultScreenName) {
containerElem = $('.module .mini-profile-info, .userMenu .mini-profile-info');
containerElem.find('.mini-profile-name').text(profileData.fullname);
containerElem.find('.mini-profile-photo img').attr('src', avatarData);
}
containerElem = getElem('.profile-modal[data-modal-id="#profile?user=' + peerAlias + '"]')
.find('.profile-card-main');
if (containerElem.length) {
containerElem.find('.profile-name').text(profileData.fullname);
containerElem.find('.profile-bio').text(profileData.bio);
containerElem.find('.profile-location').text(profileData.location);
containerElem.find('.profile-url').text(profileData.url).attr('href', profileData.url);
containerElem.find('.profile-tox').text(profileData.tox);
containerElem.find('.profile-bitmessage').text(profileData.bitmessage);
containerElem.find('img.profile-card-photo').attr('src', avatarData);
}
containerElem = getElem('.post-data[data-screen-name="' + peerAlias + '"]');
if (containerElem.length) {
containerElem.find('.post-info-name').text(profileData.fullname);
containerElem.find('.post-photo img').attr('src', avatarData);
}
containerElem = getElem('.directMessages .direct-messages-thread .post.sent');
if (containerElem.length) {
containerElem.find('.post-info-name').text(profileData.fullname);
containerElem.find('.post-photo img').attr('src', avatarData);
}
getElem('.directMessages .direct-messages-list .post-photo'
+ '[data-peer-alias="' + peerAlias + '"] img').attr('src', avatarData);
containerElem = getElem('.twister-user-info[data-screen-name="' + peerAlias + '"]')
.closest('.twister-user');
if (containerElem.length) {
containerElem.find('.twister-user-full').text(profileData.fullname);
containerElem.find('.bio').text(profileData.bio);
containerElem.find('img.twister-user-photo').attr('src', avatarData);
}
containerElem = getElem('.twister-peer[data-peer-alias="' + peerAlias + '"]');
if (containerElem.length) {
containerElem.find('.fullname').text(profileData.fullname);
containerElem.find('.bio').text(profileData.bio);
containerElem.find('.avatar img').attr('src', avatarData);
}
containerElem = getElem('.avatar-row [data-peer-alias="' + peerAlias + '"]');
if (containerElem.length) {
containerElem.find('.user-name-tooltip').text(profileData.fullname);
containerElem.find('img.avatar').attr('src', avatarData);
}
}
function redrawProfile(peerAlias, profileData) {
var containerElem;
if (peerAlias === defaultScreenName)
$('.module .mini-profile-info, .userMenu .mini-profile-info')
.find('.mini-profile-name').text(profileData.fullname);
containerElem = getElem('.profile-modal[data-modal-id="#profile?user=' + peerAlias + '"]')
.find('.profile-card-main');
if (containerElem.length) {
containerElem.find('.profile-name').text(profileData.fullname);
containerElem.find('.profile-bio').text(profileData.bio);
containerElem.find('.profile-location').text(profileData.location);
containerElem.find('.profile-url').text(profileData.url).attr('href', profileData.url);
containerElem.find('.profile-tox').text(profileData.tox);
containerElem.find('.profile-bitmessage').text(profileData.bitmessage);
}
getElem('.post-data[data-screen-name="' + peerAlias + '"]')
.find('.post-info-name').text(profileData.fullname);
getElem('.directMessages .direct-messages-thread .post.sent')
.find('.post-info-name').text(profileData.fullname);
containerElem = getElem('.twister-user-info[data-screen-name="' + peerAlias + '"]')
.closest('.twister-user');
if (containerElem.length) {
containerElem.find('.twister-user-full').text(profileData.fullname);
containerElem.find('.bio').text(profileData.bio);
}
containerElem = getElem('.twister-peer[data-peer-alias="' + peerAlias + '"]');
if (containerElem.length) {
containerElem.find('.fullname').text(profileData.fullname);
containerElem.find('.bio').text(profileData.bio);
}
getElem('.avatar-row [data-peer-alias="' + peerAlias + '"]')
.find('.user-name-tooltip').text(profileData.fullname);
}
function redrawAvatar(peerAlias, avatarData) {
if (peerAlias === defaultScreenName)
$('.module .mini-profile-info, .userMenu .mini-profile-info')
.find('.mini-profile-photo img').attr('src', avatarData);
getElem('.profile-modal[data-modal-id="#profile?user=' + peerAlias + '"]').find('.profile-card-main')
.find('img.profile-card-photo').attr('src', avatarData);
getElem('.post-data[data-screen-name="' + peerAlias + '"]')
.find('.post-photo img').attr('src', avatarData);
getElem('.directMessages .direct-messages-thread .post.sent')
.find('.post-photo img').attr('src', avatarData);
getElem('.directMessages .direct-messages-list .post-photo'
+ '[data-peer-alias="' + peerAlias + '"] img').attr('src', avatarData);
getElem('.twister-user-info[data-screen-name="' + peerAlias + '"]').closest('.twister-user')
.find('img.twister-user-photo').attr('src', avatarData);
getElem('.twister-peer[data-peer-alias="' + peerAlias + '"]')
.find('.avatar img').attr('src', avatarData);
getElem('.avatar-row [data-peer-alias="' + peerAlias + '"]')
.find('img.avatar').attr('src', avatarData);
}
function queryCreateRes(query, resource, extra) {
var req = query + '@' + resource;
twister.res[req] = {

18
js/twister_formatpost.js

@ -54,6 +54,14 @@ function postToElem(post, kind, promoted, templatePost) { @@ -54,6 +54,14 @@ function postToElem(post, kind, promoted, templatePost) {
"sig_userpost" : signature by userpost.n
*/
/*if (!twister.twists[post.userpost.n])
twister.twists[post.userpost.n] = {};
else {
var i = post.sig_userpost ? post.userpost.k : - post.userpost.k;
if (twister.twists[post.userpost.n][i])
return twister.twists[post.userpost.n][i].elem.clone(true);
}*/
var username, k, time, msg, rt, content_to_rt, content_to_sigrt, retweeted_by;
// Obtain data from userpost
@ -109,6 +117,14 @@ function postToElem(post, kind, promoted, templatePost) { @@ -109,6 +117,14 @@ function postToElem(post, kind, promoted, templatePost) {
.attr('data-time', time)
;
/*var i = post.sig_userpost ? post.userpost.k : - post.userpost.k;
twister.twists[post.userpost.n][i] = {
data: post,
elem: elem
};
var twistId = post.userpost.n + '/' + i;
elem.attr('data-twist-id', twistId);*/
if (post.isNew)
elem.addClass('new');
@ -226,7 +242,7 @@ function postToElem(post, kind, promoted, templatePost) { @@ -226,7 +242,7 @@ function postToElem(post, kind, promoted, templatePost) {
}
}
return elem;
return elem; //.clone(true);
}
function setPostCommon(elem, username, time) {

63
js/twister_io.js

@ -537,16 +537,59 @@ function cacheAvatar(peerAlias, req, version) { @@ -537,16 +537,59 @@ function cacheAvatar(peerAlias, req, version) {
_putResourceIntoStorage('avatar:' + peerAlias, {src: req, version: version});
}
function clearAvatarAndProfileCache(peerAlias) {
var storage = $.localStorage;
storage.remove('avatar:' + peerAlias);
storage.remove('profile:' + peerAlias);
if (twister.avatars[peerAlias]) {
delete twister.avatars[peerAlias];
}
if (twister.profiles[peerAlias]) {
delete twister.profiles[peerAlias];
}
function saveProfile(peerAlias, req, cbFunc, cbReq, cbErrFunc, cbErrReq) {
if (twister.profiles[peerAlias] && twister.profiles[peerAlias].version)
req.version = ++twister.profiles[peerAlias].version;
else
req.version = 1;
cacheProfile(peerAlias, req);
var dat = {};
for (var i in req)
if (i !== 'version' && req[i])
dat[i] = req[i];
dhtput(peerAlias, 'profile', 's', dat,
peerAlias, req.version,
function (req, res) {
if (!res) {
if (typeof req.cbErrFunc === 'function')
req.cbErrFunc(req.cbErrReq);
return;
}
if (typeof req.cbFunc === 'function')
req.cbFunc(req.cbReq);
},
{cbFunc: cbFunc, cbReq: cbReq, cbErrFunc: cbErrFunc, cbErrReq: cbErrReq}
);
}
function saveAvatar(peerAlias, req, cbFunc, cbReq, cbErrFunc, cbErrReq) {
if (twister.avatars[peerAlias] && twister.avatars[peerAlias].version)
var version = ++twister.avatars[peerAlias].version;
else
var version = 1;
cacheAvatar(peerAlias, req, version);
dhtput(peerAlias, 'avatar', 's', req,
peerAlias, version,
function (req, res) {
if (!res) {
if (typeof req.cbErrFunc === 'function')
req.cbErrFunc(req.cbErrReq);
return;
}
if (typeof req.cbFunc === 'function')
req.cbFunc(req.cbReq);
},
{cbFunc: cbFunc, cbReq: cbReq, cbErrFunc: cbErrFunc, cbErrReq: cbErrReq}
);
}
// get estimative for number of followers (use known peers of torrent tracker)

99
js/twister_user.js

@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
//
// Load/save current user to localStorage
// keep track of lastPostId (used for posting as defaultScreenName)
// Load/save profile (profile-edit.html)
// Load/save profile
var defaultScreenName = undefined;
var lastPostId = undefined;
@ -158,100 +158,3 @@ function sendNewUserTransaction(peerAlias, cbFunc, cbReq) { @@ -158,100 +158,3 @@ function sendNewUserTransaction(peerAlias, cbFunc, cbReq) {
}
);
}
// profile-related functions used by profile-edit
// ----------------------------------------------
var avatarSeqNum = 0;
var profileSeqNum = 0;
function loadAvatarForEdit() {
dhtget( defaultScreenName, "avatar", "s",
function(args, imagedata, rawdata) {
if( rawdata ) {
var seq = parseInt(rawdata[0]["p"]["seq"]);
if( seq > avatarSeqNum ) avatarSeqNum = seq;
}
if( imagedata && imagedata.length ) {
$(".profile-card-photo.forEdition").attr("src", imagedata);
}
}, {} );
}
function loadProfileForEdit() {
dhtget( defaultScreenName, "profile", "s",
function(args, profile, rawdata) {
if( rawdata ) {
var seq = parseInt(rawdata[0]["p"]["seq"]);
if( seq > profileSeqNum ) profileSeqNum = seq;
}
if( profile ) {
if( "fullname" in profile)
$(".input-name").val(profile.fullname);
if( "bio" in profile)
$(".input-description").val(profile.bio);
if( "location" in profile)
$(".input-city").val(profile.location);
if( "url" in profile)
$(".input-website").val(profile.url);
if( "tox" in profile)
$(".input-tox").val(profile.tox);
if( "bitmessage" in profile)
$(".input-bitmessage").val(profile.bitmessage);
}
}, {} );
}
function saveProfile(e) {
function saveAvatar(req, isProfileDataSaved) {
dhtput(defaultScreenName, 'avatar', 's',
req.avatarImgSrc,
defaultScreenName, ++avatarSeqNum,
completeProfileSaving, {isProfileDataSaved: isProfileDataSaved}
);
}
function completeProfileSaving(req, isAvatarDataSaved) {
if (req.isProfileDataSaved && isAvatarDataSaved) {
clearAvatarAndProfileCache(defaultScreenName);
var txtTitle = '';
var txtMessage = polyglot.t('profile_saved');
} else {
var txtTitle = polyglot.t('error', {error: ''});
var txtMessage = polyglot.t('profile_not_saved');
}
alertPopup({
txtTitle: txtTitle,
txtMessage: txtMessage,
cbConfirm: $.MAL.enableButton,
cbConfirmReq: $('.submit-changes'),
cbClose: 'cbConfirm'
});
}
$.MAL.disableButton($('.submit-changes'));
dhtput(defaultScreenName, 'profile', 's',
setObjPropFromElemVal({}, {
fullname: '.input-name',
bio: '.input-description',
location: '.input-city',
url: '.input-website',
tox: '.input-tox',
bitmessage: '.input-bitmessage'
}),
defaultScreenName, ++profileSeqNum,
saveAvatar, {avatarImgSrc: $('.profile-card-photo.forEdition').attr('src')}
);
}
function setObjPropFromElemVal(object, req) {
var props = Object.getOwnPropertyNames(req); // req's props names will be object's props names
for (var i = 0; i < props.length; i++) {
elem = $(req[props[i]]); // req's props values are elements selectors
if (elem.length && elem.val())
object[props[i]] = elem.val();
}
return object;
}

2
network.html

@ -43,7 +43,7 @@ @@ -43,7 +43,7 @@
<span class="mini-profile-view">View</span>
</div>
<a class="dropdown-menu-item" href="options.html">Options</a>
<a class="dropdown-menu-item" href="profile-edit.html">Setup account</a>
<a class="dropdown-menu-item" href="/#/account">Setup account</a>
<a class="dropdown-menu-item updates-check-client">Check for client's updates</a>
</div>
</a>

2
options.html

@ -34,7 +34,7 @@ @@ -34,7 +34,7 @@
<a class="userMenu-config-dropdown">
<div class="config-menu dialog-modal">
<a class="dropdown-menu-item" href="network.html">Network config</a>
<a class="dropdown-menu-item" href="profile-edit.html">Setup account</a>
<a class="dropdown-menu-item" href="/#/account">Setup account</a>
</div>
</a>
</li>

108
profile-edit.html

@ -1,108 +0,0 @@ @@ -1,108 +0,0 @@
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Edit profile</title>
<link id="stylecss" rel="stylesheet" href="css/style.css" type="text/css">
<link id="profilecss" rel="stylesheet" href="css/profile.css" type="text/css">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jQueryPlugins.js"></script>
<script src="js/jquery.jsonrpcclient.js"></script>
<script src="js/jquery.storageapi.js"></script>
<script src="js/options.js"></script>
<script src="js/franc.js"></script>
<script src="js/notify.js"></script>
<script src="js/mobile_abstract.js"></script>
<script src="js/twister_io.js"></script>
<script src="js/polyglot.min.js"></script>
<script src="js/interface_localization.js"></script>
<script src="js/twister_user.js"></script>
<script src="js/twister_formatpost.js"></script>
<script src="js/twister_actions.js"></script>
<script src="js/twister_network.js"></script>
<script src="js/twister_following.js"></script>
<script src="js/twister_newmsgs.js"></script>
<script src="js/interface_common.js"></script>
<script src="js/interface_profile-edit.js"></script>
<script src="js/twister-crypto-bundle.js"></script>
<link rel="shortcut icon" type="image/png" href="img/twister_mini.png" />
</head>
<body>
<!-- MENU SUPERIOR INIT -->
<nav class="userMenu">
<ul>
<li class="userMenu-home"><a href="home.html">
<span class="selectable_theme theme_original label">Home</span>
<span class="selectable_theme theme_nin menu-news"></span>
</a></li>
<li class="userMenu-network selectable_theme theme_original theme_nin"><a class="label" href="network.html">Network</a></li>
<li class="userMenu-config">
<a class="userMenu-config-dropdown">
<div class="config-menu dialog-modal">
<div class="mini-profile-info selectable_theme theme_original">
<div class="mini-profile-photo"><img src="img/grayed_avatar_placeholder_24.png" alt="user-photo"/></div>
<a href="#" class="mini-profile-name">Fulano da Silva</a>
<span class="mini-profile-view">View</span>
</div>
<a class="dropdown-menu-item" href="options.html">Options</a>
<a class="dropdown-menu-item" href="profile-edit.html">Setup account</a>
<a class="dropdown-menu-item" href="network.html">Network config</a>
</div>
</a>
</li>
<li class="userMenu-dhtindicator selectable_theme theme_calm"><a href="network.html"></a></li>
</ul>
</nav>
<!-- MENU SUPERIOR END -->
<div class="wrapper">
<!-- ÁREA DE PROFILE PHOTO INIT -->
<div class="profile-card forEdition">
<!-- Coloquei a imagem de fundo do card do usuário como background da div abaixo inline na tag para poder ser alterada dinamicamente -->
<div class="profile-card-main" style="background: url(img/img.png) no-repeat center center #b43e34;">
<img class="profile-card-photo forEdition" src="img/genericPerson.png"/>
<input type="text" class="input-name" placeholder="Full name here"/>
<h2></h2>
<textarea class="input-description" placeholder="Describe yourself"></textarea>
<input type="text" class="input-city" placeholder="Location"/>
<input type="text" class="input-website" placeholder="website"/>
<input type="text" class="input-tox" placeholder="Tox address"/>
<input type="text" class="input-bitmessage" placeholder="Bitmessage address"/>
</div>
<div class="profile-edition-buttons">
<button class="toggle-priv-key" style="float: left" href="#">Secret Key</button>
<button class="cancel-changes" href="#">Cancel</button>
<button class="submit-changes" href="#">Save Changes</button>
</div>
<div style="font-size:80%;text-align: center;" class="secret-key-container">
<span class="label">Secret key:</span> <span class="secret-key"></span>
</div>
</div>
</div>
<input type="file" id="avatar-file" name="avatar_files" style="display:none;"/>
<div id="templates" style="display:none;">
<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-blackout"></div>
</div>
<div id="confirm-popup-template">
<div class="message"></div>
<div class="modal-buttons">
<button class="confirm"></button>
<button class="cancel"></button>
</div>
</div>
</div>
</body>
</html>

170
theme_calm/css/profile.css

@ -56,11 +56,6 @@ @@ -56,11 +56,6 @@
color: #7691ce;
font-size: 14px;
}
.forEdition .profile-card-main h2 {
left: 20%;
top: 19%;
color: #f8f8f8;
}
.profile-card-buttons {
padding: 4px 0;
@ -72,135 +67,86 @@ @@ -72,135 +67,86 @@
right: 0;
}
.profile-card.forEdition
{
margin: 0 auto;
width: 540px;
}
.forEdition .profile-card-photo
{
border: solid 2px #fff;
position: relative;
cursor: pointer;
transition: all .2s linear;
z-index: 10;
}
.forEdition .profile-card-main:hover:after,
.forEdition .profile-card-photo:after
{
content: "";
width: 36px;
height: 36px;
position: absolute;
top: -5px;
right: 0px;
background: url(../img/edit.png) no-repeat right top;
}
.forEdition .profile-card-main:hover:before
{
border: solid 5px #fff;
}
.forEdition .profile-card-main h2
{
margin-bottom: 8px;
}
.forEdition .profile-card-main input, .forEdition .profile-card-main textarea {
display: block;
margin: 0 auto;
background: rgba( 255, 255, 255, .8 );
border: none;
padding: 6px 4px;
margin-bottom: 4px;
text-align: center;
transition: all .2s linear;
}
/*************************************
************ ACCOUNT MODAL ***********
**************************************/
.forEdition .profile-card-main input:hover, .forEdition .profile-card-main textarea:hover {
background: rgba( 255, 255, 255, .7 );
.account-modal.modal-wrapper {
height: 394px;
margin-top: -197px;
}
.forEdition .profile-card-photo:hover{
background: #9096a5;
.account-modal .module {
margin: 4px;
}
.forEdition .profile-card-main input:focus, .forEdition .profile-card-main textarea:focus {
background: #fff;
color: #4d4d4d;
.account-modal .module > div {
width: 100%;
margin: 4px 0;
padding: 4px 12px;
}
/* inputs placeholders color */
.forEdition .profile-card-main input::-webkit-input-placeholder {
color: #4d4d4d;
}
.forEdition .profile-card-main input:-moz-placeholder {
color: #4d4d4d;
}
.forEdition .profile-card-main input::-moz-placeholder {
color: #4d4d4d;
}
.forEdition .profile-card-main input:-ms-input-placeholder {
color: #4d4d4d;
}
.forEdition .profile-card-main input:focus::-webkit-input-placeholder {
color: #fff;
.account-modal input, .account-modal textarea {
display: block;
border: solid 1px rgba(0, 0, 0, .3);
border-radius: 4px;
width: 320px;
margin: 12px 16px;
padding: 2px 4px;
}
.forEdition .profile-card-main input:focus:-moz-placeholder {
color: #fff;
.account-modal textarea {
width: 330px;
max-width: 330px;
min-width: 330px;
min-height: 28px;
}
.forEdition .profile-card-main input:focus::-moz-placeholder {
color: #fff;
.account-modal input:focus, .account-modal textarea:focus {
border: solid 1px rgba(118, 145, 206, .8);
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
.forEdition .profile-card-main input:focus::-ms-input-placeholder {
color: #fff;
.account-modal .alias {
margin: 0px 16px;
}
.profile-card-main input.input-name{
.account-modal .avatar {
position: absolute;
top: 30px;
right: 20px;
right: 12px;
top: 42px;
cursor: pointer;
width: 64px;
height: 64px;
overflow: hidden;
margin: 12px 16px;
}
.profile-card-main .input-description {
width: 90%;
max-width: 90%;
margin-top: 100px;
.account-modal .avatar img {
width: 64px;
height: auto;
border: solid 1px rgba(0, 0, 0, .3);
border-radius: 4px;
}
.input-name
{
font-size: 20px;
}
.forEdition .profile-card-main .input-website,
.forEdition .profile-card-main .input-city
{
display: inline-block;
margin-top: 10px;
}
.forEdition .profile-card-main .input-tox,
.forEdition .profile-card-main .input-bitmessage
{
width: 90%;
margin-top: 10px;
}
.profile-edition-buttons
{
padding: 10px;
.account-modal .c-buttons {
text-align: right;
}
.profile-edition-buttons button {
background: #f1f1f1;
color: #333;
}
.profile-edition-buttons button:hover {
background: #fff;
transition: background-color 300ms ease-in;
.account-modal .toggle-secret-key {
float: left;
}
.secret-key-container .label {
color: #9096a5;
.account-modal .secret-key-container {
text-align: center;
font-size: 12px;
}
.secret-key-container .secret-key {
color: #d2dbf1;
.account-modal .secret-key {
background-color: #FFF;
border: solid 1px rgba(0, 0, 0, .3);
font-weight: bold;
}
/*************************************

138
theme_nin/css/style.css

@ -281,7 +281,7 @@ samp { @@ -281,7 +281,7 @@ samp {
/* FONTS */
/* line 2, ../sass/_utils.sass */
.clear-fix:after, .userMenu ul:after, .profile-modal .profile-data:after, .profile-card .twister-user-info:after, .forEdition.profile-card:after, .postboard:after, .following:after, .expanded-content:after, .following-list li:after, .twistday-reminder li:after, .mini-following-info:after, .network.singleBlock:after, .options .tab-content:after, .promoted-posts-only:after, .dashboard.right:after, ul.userMenu-search-profiles li:after, .mini-profile .post-area:after, .mini-profile-indicators:after, .profile-data:after, #postboard-top:after, #postboard-top .post-area:after, .who-to-follow ol:after, .toptrends ol:after, .twistday-reminder ol:after, .twister-user:after, .modal-content:after, .modal-header:after, .direct-messages-thread .post:after {
.clear-fix:after, .userMenu ul:after, .profile-modal .profile-data:after, .profile-card .twister-user-info:after, .postboard:after, .following:after, .expanded-content:after, .following-list li:after, .twistday-reminder li:after, .mini-following-info:after, .network.singleBlock:after, .options .tab-content:after, .promoted-posts-only:after, .dashboard.right:after, ul.userMenu-search-profiles li:after, .mini-profile .post-area:after, .mini-profile-indicators:after, .profile-data:after, #postboard-top:after, #postboard-top .post-area:after, .who-to-follow ol:after, .toptrends ol:after, .twistday-reminder ol:after, .twister-user:after, .modal-content:after, .modal-header:after, .direct-messages-thread .post:after {
content: "";
display: table;
clear: both;
@ -541,17 +541,6 @@ samp { @@ -541,17 +541,6 @@ samp {
width: auto;
}
/* line 127, ../sass/_profile.sass */
.profile-card-photo.forEdition {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
height: 75px;
margin: 0 auto;
display: block;
width: 75px;
}
/* line 134, ../sass/_profile.sass */
.profile-bio {
padding: 10px;
@ -655,77 +644,90 @@ samp { @@ -655,77 +644,90 @@ samp {
color: #B4C669;
}
/* line 222, ../sass/_profile.sass */
.forEdition.profile-card {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: auto;
background: #f3f2f1;
/* line 266, ../sass/_profile.sass */
.selectable_theme.theme_calm {
display: none;
}
/* line 227, ../sass/_profile.sass */
.forEdition.profile-card .profile-card-main {
margin: 0;
width: 330px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
background: #f3f2f1;
/*************************************
************ ACCOUNT MODAL ***********
**************************************/
.account-modal.modal-wrapper {
width: 580px;
height: 394px;
margin: -197px 0 0 -290px;
}
/* line 233, ../sass/_profile.sass */
.forEdition.profile-card .profile-card-main input, .forEdition .profile-card-main textarea {
display: block;
margin: 5px auto;
background: white;
border: 1px solid #e7e8e9;
padding: 6px 4px;
margin-bottom: 4px;
text-align: center;
transition: all 0.2s linear;
.account-modal .modal-content {
padding: 0;
}
/* line 242, ../sass/_profile.sass */
.forEdition .profile-card-main textarea:hover, .forEdition .profile-card-main textarea:focus,
.forEdition.profile-card .profile-card-main input:hover, .forEdition.profile-card .profile-card-main input:focus {
background: white;
border-color: #aaa;
.account-modal .module {
margin: 4px;
}
.account-modal .module > div {
margin: 4px 0;
padding: 4px 12px;
}
/* line 246, ../sass/_profile.sass */
.input-description {
width: 90%;
max-width: 90%;
.account-modal input, .account-modal textarea {
display: block;
border: 1px solid rgba(0, 0, 0, .1);
width: 320px;
margin: 12px 16px;
padding: 2px 4px;
}
/* line 249, ../sass/_profile.sass */
.input-name {
font-size: 20px;
.account-modal textarea {
width: 320px;
max-width: 320px;
min-width: 320px;
min-height: 28px;
}
/* line 253, ../sass/_profile.sass */
.forEdition .profile-card-main .input-website, .forEdition .profile-card-main .input-city {
display: inline-block;
.account-modal input:focus, .account-modal textarea:focus {
border-bottom: solid 1px #B4C669;
}
/* line 255, ../sass/_profile.sass */
.forEdition .profile-card-main .input-tox, .forEdition .profile-card-main .input-bitmessage {
width: 90%;
margin-top: 10px;
.account-modal .alias {
margin: 0px 16px;
}
/* line 258, ../sass/_profile.sass */
.forEdition .profile-card-main h2 {
text-transform: none;
font-weight: 700;
font-size: 0.9em;
.account-modal .avatar {
position: absolute;
right: 12px;
top: 42px;
cursor: pointer;
width: 64px;
height: 64px;
overflow: hidden;
margin: 12px 16px;
}
/* line 263, ../sass/_profile.sass */
.profile-edition-buttons {
text-align: right;
.account-modal .avatar img {
width: 64px;
height: auto;
border: 1px solid rgba(0, 0, 0, .1);
}
/* line 266, ../sass/_profile.sass */
.selectable_theme.theme_calm {
display: none;
.account-modal .c-buttons {
text-align: right;
}
.account-modal .toggle-secret-key {
float: left;
}
.account-modal .secret-key-container {
text-align: center;
font-size: 12px;
}
.account-modal .secret-key {
background-color: white;
font-weight: bold;
}
/************* POST BOARD ************ */

108
theme_nin/sass/_profile.sass

@ -122,13 +122,6 @@ $modal-postboard-post-height: 100% @@ -122,13 +122,6 @@ $modal-postboard-post-height: 100%
display: block
width: auto
.profile-card-photo.forEdition
+border-radius(50%)
height: 75px
margin: 0 auto
display: block
width: 75px
.profile-bio
padding: 10px
font-style: italic
@ -215,51 +208,60 @@ $modal-postboard-post-height: 100% @@ -215,51 +208,60 @@ $modal-postboard-post-height: 100%
.profile-modal .modal-buttons
display: none
/* EDITION PROFILE*/
.forEdition.profile-card
+box-sizing(border-box)
@extend .clear-fix
width: auto
background: $background-light
.profile-card-main
margin: 0
width: 330px
+box-sizing(border-box)
padding: 10px
background: $background-light
input
display: block
margin: 5px auto
background: white
border: 1px solid lighten($dark-grey, 50%)
padding: 6px 4px
margin-bottom: 4px
text-align: center
transition: all .2s linear
&:hover, &:focus
background: white
border-color: $main-color-light
.input-description
width: 90%
.input-name
font-size: 20px
.forEdition .profile-card-main
.input-website, .input-city
display: inline-block
.input-tox, .input-bitmessage
width: 90%
margin-top: 10px
h2
text-transform: none
font-weight: 700
font-size: .9em
.profile-edition-buttons
text-align: right
.selectable_theme.theme_calm
display: none
/*************************************
************ ACCOUNT MODAL ***********
**************************************/
.account-modal
&.modal-wrapper
width: 580px
height: 394px
margin: -197px 0 0 -290px
.modal-content
padding: 0
.module
margin: 4px
> div
margin: 4px 0
padding: 4px 12px
input, textarea
display: block
border: 1px solid rgba(0, 0, 0, .1)
width: 320px
margin: 12px 16px
padding: 2px 4px
textarea
width: 320px
max-width: 320px
min-width: 320px
min-height: 28px
input:focus, textarea:focus
border-bottom: solid 1px $color-green
.alias
margin: 0px 16px
.avatar
position: absolute
right: 12px
top: 42px
cursor: pointer
width: 64px
height: 64px
overflow: hidden
margin: 12px 16px
img
width: 64px
height: auto
border: 1px solid rgba(0, 0, 0, .1)
.c-buttons
text-align: right
.toggle-secret-key
float: left
.secret-key-container
text-align: center
font-size: 12px
.secret-key
background-color: $bloc-background-color
font-weight: bold

8
tmobile.html

@ -443,16 +443,16 @@ @@ -443,16 +443,16 @@
</div>
<div class="content" data-role="content">
<input type="file" id="avatar-file" name="avatar_files"/>
<input type="file" id="avatar-file"/>
<div class="profile-card forEdition">
<!-- Coloquei a imagem de fundo do card do usuário como background da div abaixo inline na tag para poder ser alterada dinamicamente -->
<div class="profile-card-main" style="background: url(img/img.png) no-repeat center center #b43e34;">
<img class="profile-card-photo forEdition avatar" src="img/genericPerson.png"/>
<input type="text" class="input-name" placeholder="Full name here"/>
<h2></h2>
<input type="text" class="input-description" placeholder="Describe yourself"/>
<input type="text" class="input-city" placeholder="Location"/>
<input type="text" class="input-website" placeholder="website"/>
<input type="text" class="input-bio" placeholder="Describe yourself"/>
<input type="text" class="input-location" placeholder="Location"/>
<input type="text" class="input-url" placeholder="website"/>
</div>
<div class="profile-edition-buttons">
<button class="cancel-changes" href="#">Cancel</button>

Loading…
Cancel
Save