From cecd428e5d458ec58cc7eb8af68fac4421b9d1ed Mon Sep 17 00:00:00 2001 From: Simon Grim Date: Sat, 2 Feb 2019 14:14:03 +0500 Subject: [PATCH] convert profile-edit.html to #/account modal --- css/profile.css | 126 ++++++++-------- home.html | 28 +++- js/interface_common.js | 281 ++++++++++++++++++++++++++++++++++- js/interface_profile-edit.js | 119 --------------- js/mobile_abstract.js | 10 +- js/tmobile.js | 55 ++++++- js/twister_actions.js | 146 ++++++++++++++++++ js/twister_formatpost.js | 18 ++- js/twister_io.js | 63 ++++++-- js/twister_user.js | 99 +----------- network.html | 2 +- options.html | 2 +- profile-edit.html | 108 -------------- theme_calm/css/profile.css | 170 ++++++++------------- theme_nin/css/style.css | 138 ++++++++--------- theme_nin/sass/_profile.sass | 108 +++++++------- tmobile.html | 8 +- 17 files changed, 830 insertions(+), 651 deletions(-) delete mode 100644 js/interface_profile-edit.js delete mode 100644 profile-edit.html diff --git a/css/profile.css b/css/profile.css index e28cfea..ed7d746 100644 --- a/css/profile.css +++ b/css/profile.css @@ -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 *********** **************************************/ diff --git a/home.html b/home.html index f02a330..1606520 100644 --- a/home.html +++ b/home.html @@ -51,7 +51,7 @@ URI_shortener Options Network config - Setup account + Setup account Change user Check for client's updates Following users @@ -474,6 +474,32 @@ +
+
+
+
+ +
+ +

+ + + + + +
+
+ + +
+
+
+
Secret key:
+
+
+ +
+
diff --git a/js/interface_common.js b/js/interface_common.js index 798044a..7c1dcdb 100644 --- a/js/interface_common.js +++ b/js/interface_common.js @@ -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) { 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) { .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() { 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() { 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() { }) ; 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 () { } else if (page.indexOf('options.html') === 0) { initInterfaceCommon(); $.Options.initControls(); - } else if (page.indexOf("profile-edit.html") === 0) { - initProfileEdit(); } changeStyle(); diff --git a/js/interface_profile-edit.js b/js/interface_profile-edit.js deleted file mode 100644 index 61b786d..0000000 --- a/js/interface_profile-edit.js +++ /dev/null @@ -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); diff --git a/js/mobile_abstract.js b/js/mobile_abstract.js index bc9377f..52892f9 100644 --- a/js/mobile_abstract.js +++ b/js/mobile_abstract.js @@ -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() 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 diff --git a/js/tmobile.js b/js/tmobile.js index 7a7dcc1..e8aeb22 100644 --- a/js/tmobile.js +++ b/js/tmobile.js @@ -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() { 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); } diff --git a/js/twister_actions.js b/js/twister_actions.js index e5a857e..aa6a01a 100644 --- a/js/twister_actions.js +++ b/js/twister_actions.js @@ -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] = { diff --git a/js/twister_formatpost.js b/js/twister_formatpost.js index 253d799..887ce6b 100644 --- a/js/twister_formatpost.js +++ b/js/twister_formatpost.js @@ -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) { .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) { } } - return elem; + return elem; //.clone(true); } function setPostCommon(elem, username, time) { diff --git a/js/twister_io.js b/js/twister_io.js index cdcc03f..dc4c3f2 100644 --- a/js/twister_io.js +++ b/js/twister_io.js @@ -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) diff --git a/js/twister_user.js b/js/twister_user.js index 4d28c1c..22d2803 100644 --- a/js/twister_user.js +++ b/js/twister_user.js @@ -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) { } ); } - -// 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; -} diff --git a/network.html b/network.html index a1c8214..65d2aa4 100644 --- a/network.html +++ b/network.html @@ -43,7 +43,7 @@ View
Options - Setup account + Setup account Check for client's updates
diff --git a/options.html b/options.html index 83aff23..5f62782 100644 --- a/options.html +++ b/options.html @@ -34,7 +34,7 @@
Network config - Setup account + Setup account
diff --git a/profile-edit.html b/profile-edit.html deleted file mode 100644 index cf57a07..0000000 --- a/profile-edit.html +++ /dev/null @@ -1,108 +0,0 @@ - - - - Edit profile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- -
- - -

- - - - - -
-
- - - -
- -
- Secret key: -
-
-
- - - - - - diff --git a/theme_calm/css/profile.css b/theme_calm/css/profile.css index 2f9c60c..fefeaf9 100644 --- a/theme_calm/css/profile.css +++ b/theme_calm/css/profile.css @@ -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 @@ 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; } /************************************* diff --git a/theme_nin/css/style.css b/theme_nin/css/style.css index a6a7dab..07d4203 100644 --- a/theme_nin/css/style.css +++ b/theme_nin/css/style.css @@ -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 { 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 { 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 ************ */ diff --git a/theme_nin/sass/_profile.sass b/theme_nin/sass/_profile.sass index ebcb1e1..d44300a 100755 --- a/theme_nin/sass/_profile.sass +++ b/theme_nin/sass/_profile.sass @@ -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% .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 diff --git a/tmobile.html b/tmobile.html index 69d8d9b..95a8a60 100644 --- a/tmobile.html +++ b/tmobile.html @@ -443,16 +443,16 @@
- +

- - - + + +