From f44d2586b174991002d210efa9568e0b96d92304 Mon Sep 17 00:00:00 2001 From: Christopher Ng Date: Sat, 30 Jul 2022 00:32:16 +0000 Subject: Remake profile picture saving with Vue Signed-off-by: Christopher Ng --- apps/settings/css/settings.css | 63 ---- apps/settings/css/settings.css.map | 2 +- apps/settings/css/settings.scss | 70 ----- apps/settings/js/settings/personalInfo.js | 225 -------------- .../lib/Settings/Personal/PersonalInfo.php | 4 +- .../src/components/PersonalInfo/AvatarSection.vue | 333 +++++++++++++++++++++ .../components/PersonalInfo/DisplayNameSection.vue | 4 + .../src/constants/AccountPropertyConstants.js | 2 +- apps/settings/src/main-personal-info.js | 3 + .../templates/settings/personal/personal.info.php | 37 +-- 10 files changed, 345 insertions(+), 398 deletions(-) create mode 100644 apps/settings/src/components/PersonalInfo/AvatarSection.vue (limited to 'apps') diff --git a/apps/settings/css/settings.css b/apps/settings/css/settings.css index 735d8c0b1fb..ec677434700 100644 --- a/apps/settings/css/settings.css +++ b/apps/settings/css/settings.css @@ -93,69 +93,6 @@ input#openid, input#webdav { background-image: var(--icon-password-dark); } -#avatarform .avatardiv { - margin: 10px auto; -} -#avatarform .warning { - width: 100%; -} -#avatarform .jcrop-keymgr { - display: none !important; -} - -#displayavatar { - text-align: center; -} - -#uploadavatarbutton, #selectavatar, #removeavatar { - padding: 21px; -} - -#selectavatar, #removeavatar { - vertical-align: top; -} - -.jcrop-holder { - z-index: 500; -} - -#cropper { - float: left; - z-index: 500; - /* float cropper above settings page to prevent unexpected flowing from dynamically sized element */ - position: fixed; - background-color: rgba(0, 0, 0, 0.2); - box-sizing: border-box; - top: 45px; - left: 0; - width: 100%; - height: calc(100% - 45px); -} -#cropper .inner-container { - z-index: 2001; - /* above the top bar if needed */ - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background: #fff; - color: #333; - border-radius: var(--border-radius-large); - box-shadow: 0 0 10px var(--color-box-shadow); - padding: 15px; -} -#cropper .inner-container .jcrop-holder, -#cropper .inner-container .jcrop-holder img, -#cropper .inner-container img.jcrop-preview { - border-radius: var(--border-radius); -} -#cropper .inner-container .button { - margin-top: 15px; -} -#cropper .inner-container .primary { - float: right; -} - #personal-settings-avatar-container { display: inline-grid; grid-template-columns: 1fr; diff --git a/apps/settings/css/settings.css.map b/apps/settings/css/settings.css.map index bdeacb4f959..20327a4557f 100644 --- a/apps/settings/css/settings.css.map +++ b/apps/settings/css/settings.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","settings.scss","../../../core/css/functions.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AD3CC;EACC;;;AAIF;AACA;EACC;;;AAGD;AACA;AC6CC;EAEA;;;AD3CD;ACyCC;EAEA;;;ADvCD;ACqCC;EAEA;;;ADnCD;ACiCC;EAEA;;;AD/BD;AC6BC;EAEA;;;AD1BA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAED;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;AACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGC;;AAGD;EACC;;AAGD;EACC;;;AAKH;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;AAGC;EACC;EACA;EACA;;;AAKH;EACC;;;AAIA;EACC;;AAEA;EACC;;AAIA;EACC;;;AAOH;EAGC;;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAIF;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;;AAMF;EACC;;AACA;EACC;;AACA;EACC;;;AAKH;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAGC;EACA;EACA;;AAGD;EACC;EACA;;;AAMF;EACC;IACC;IACA;;EAEA;IACC;IACA;;EAGD;IACC;IACA;;EAGD;IACC;IACA;IACA;;;AAKH;EACC;IACC;IACA;;EAEA;IACC;;EAGD;IACC;IACA;;EAGD;IACC;IACA;;;AAKH;EACC;IACC;IACA;;EAEA;IACC;;EAGD;IACC;IACA;;EAGD;IACC;IACA;;;AAKH;EACC;EACA;EACA;;AAEA;EACC;;AAIA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAKD;EACC;EACA;EACA;EACA;EACA;;AAKH;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;;AAGD;EACC;EACA;EACA;EACA;;;AAKF;EACC;EACA;;AAEA;EACC;;AAEA;EACC;;AAGD;EACC;;AAIF;EACC;EACA;;;AAKF;AACA;AACA;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEC;EACA;;AAEA;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAIF;EACC;;AAGC;EAEC;EACA;;AAEA;EACC;;AAGD;EACC;;AAEA;EACC;;AAIF;EACC;EAEA;;AAEA;EACC;;;AAQN;EACC;;;AAGD;EACC;;;AAIA;EACC;;AAGD;EACC;;;AAIF;AAAA;EAEC;;;AAGD;EACC;;;AAGD;EACC;;;AAIA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;;AAMD;EACC;;AAGD;EACC;;;AAKD;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;;AAIF;EACC;EACA;EACA;;AAKA;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;;AAIF;EACC;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKH;AAGC;EACC;;AAGD;EACC;;AAGD;EACC;EACA;EACA;;;AAIF;AAGC;EACC;EACA;EACA;EACA;;AAGD;EACC;;;AAKD;AAAA;EAEC;;;AAKD;AAAA;EAEC;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;AACA;EACC;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAKD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAEA;EACC;;AAIF;EACC;;AAGD;EAEC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAIF;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;;;AAGD;AACA;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AACC;;AACA;EACC;EACA;EACA;;AAGD;EACC;;AAIA;EACC;;AAIF;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;EACA;EACA;;;AAGD;EACC;;;AAIA;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;;;AAIA;EACC;;;AAMD;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACC;;AAGD;EACC;;;AAMA;AAAA;EAEC;EACA;EACA;EACA;EACA;;AAIF;EACC;EACA;;AAEA;AAAA;EAEC;;AAGD;EACC;;AAIF;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;AAAA;AAAA;AAAA;AAAA;EAKC;;;AAIF;EACC;IACC;;;EAED;IACC;;;AAIF;EACC;IACC;;;EAED;IACC;;;AAIF;EACC;IACC;;;EAED;IACC;;;AAIF;EACC;IACC;;;EAED;IACC;;;AAIF;EACC;IACC;;;AAIF;EACC;IACC;;;AAIF;AACA;EAEE;IACC;;;AAKH;EACC;IACC;;;AAIF;EACC;;;AAGD;EACC;AACA;AAKA;;AAJA;EACC;;AAID;EACC;;AAEA;EACC;EACA;EACA;;;AAKH;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAEA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EAyGC;EACA;EACA;AAkDA;;AAzJA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC,QAfgB;EAgBhB,SAjBiB;EAmBjB,cAlBgB;EAmBhB;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EAQC;;AAPA;EACC;EACA;EACA;EACA,YAjCe;;AAsChB;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAKF;EACC;;AAEA;EACC;;AAIF;EACC;EACA;EACA;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAEA;EACC;EACA;EACA;;AAKH;EACC;EACA;AACA;EACA;EACA;EACA;;AAOD;EACC;;AAGD;EACC;EACA;;AAEA;EACC;EACA;;AAGD;EACC;;AAKD;EACC;;AAGD;EACC;;AAGD;EACC;;AAEA;EACC;;AAKD;EACC;;AAKD;EACC;;AAMH;EACC;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAGD;EACC;;;AAQF;EACC;;;AAKH;AACA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAOA;AAAA;AAAA;AAAA;EACC;;AAEA;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;EACC;EACA;EACA;EACA;EACA;;AAGD;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;EACC;;;AAMF;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;AACA;EACA;EACA;EACA;EACA;;;AAGD;AAEA;EACC;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC;;;AAIA;EACC;EACA;EACA;;AAGD;AAAA;EAEC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAIA;EACC;EACA;;AAGD;EACC;;AAGD;EACC;EACA;;;AAKF;AACA;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAIA;EACC;EACA;;AAEA;EACC;;AAGD;EACC;;AAIF;EACC;EACA;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;;AAKD;EACC;;AAGD;EACC;;;AAIF;EACC;;AAEA;EACC;EACA;;;AAIF;EACC;;;AAGD;EACC;EACA;EACA;;;AAID;AAKC;EACC;EACA;EACA;;AAEA;EAGC;EACA;EACA,YAbgB;EAchB;EACA;EACA;AACA;AAAA;EAEA,uBACE;EAOF;AAMA;AA0DA;;AA9DA;EACC;;AAID;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOC,WAxCkB;;AA0ClB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;;AAID;EAMC;;AAIF;AAAA;AAAA;EAGC,WA9DkB;;AAgElB;AAAA;AAAA;EACC;EACA;EACA;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;;AAID;EACC;EACA;EACA;EACA;AAAc;EACd;;AAEA;EACC;;AAIF;EACC;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUC;EACA;EACA;EACA;EACA;;AAKD;EACC;;AAGD;EACC;;AAIF;EACC;;AAGD;AAAA;AAAA;EAGC;EACA;EACA;EACA;AAaA;AA2GA;;AAtHA;AAAA;AAAA;EACC;EACA;;AAIA;AAAA;AAAA;AAAA;AAAA;EACC;;AAKF;AAAA;AAAA;EACC;EACA;;AAGD;AAAA;AAAA;EACC;;AAKA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;;AAIF;AAAA;AAAA;AAAA;AAAA;AAEC;EACA;EACA;EACA;AACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;;AAGD;AAAA;AAAA;EACC;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACC;EACA;EACA;;AAIF;AAAA;AAAA;EACC;EACA;;AAEA;AAAA;AAAA;EACC;;AAIF;AAAA;AAAA;EACC;EACA;EACA;;AAEA;AAAA;AAAA;EACC;;AAIF;AAAA;AAAA;EACC;EACA;;AAEA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;EACC;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACC;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGC;EACA;;AAKH;AAAA;AAAA;EACC;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACC;EACA;;AAMH;AAAA;AAAA;EACC;;AAKH;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;;;AAKH;EACI;;;AAGJ;EACE;IACE;;;AAGJ;EACE;IACE","file":"settings.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","settings.scss","../../../core/css/functions.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AD3CC;EACC;;;AAIF;AACA;EACC;;;AAGD;AACA;AC6CC;EAEA;;;AD3CD;ACyCC;EAEA;;;ADvCD;ACqCC;EAEA;;;ADnCD;ACiCC;EAEA;;;AD/BD;AC6BC;EAEA;;;AD3BD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;AAGC;EACC;EACA;EACA;;;AAKH;EACC;;;AAIA;EACC;;AAEA;EACC;;AAIA;EACC;;;AAOH;EAGC;;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;AAIF;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;;AAMF;EACC;;AACA;EACC;;AACA;EACC;;;AAKH;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAGC;EACA;EACA;;AAGD;EACC;EACA;;;AAMF;EACC;IACC;IACA;;EAEA;IACC;IACA;;EAGD;IACC;IACA;;EAGD;IACC;IACA;IACA;;;AAKH;EACC;IACC;IACA;;EAEA;IACC;;EAGD;IACC;IACA;;EAGD;IACC;IACA;;;AAKH;EACC;IACC;IACA;;EAEA;IACC;;EAGD;IACC;IACA;;EAGD;IACC;IACA;;;AAKH;EACC;EACA;EACA;;AAEA;EACC;;AAIA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAKD;EACC;EACA;EACA;EACA;EACA;;AAKH;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAIF;EACC;;AAGD;EACC;EACA;EACA;EACA;;;AAKF;EACC;EACA;;AAEA;EACC;;AAEA;EACC;;AAGD;EACC;;AAIF;EACC;EACA;;;AAKF;AACA;AACA;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEC;EACA;;AAEA;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAIF;EACC;;AAGC;EAEC;EACA;;AAEA;EACC;;AAGD;EACC;;AAEA;EACC;;AAIF;EACC;EAEA;;AAEA;EACC;;;AAQN;EACC;;;AAGD;EACC;;;AAIA;EACC;;AAGD;EACC;;;AAIF;AAAA;EAEC;;;AAGD;EACC;;;AAGD;EACC;;;AAIA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;;AAMD;EACC;;AAGD;EACC;;;AAKD;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;;AAIF;EACC;EACA;EACA;;AAKA;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;;AAIF;EACC;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKH;AAGC;EACC;;AAGD;EACC;;AAGD;EACC;EACA;EACA;;;AAIF;AAGC;EACC;EACA;EACA;EACA;;AAGD;EACC;;;AAKD;AAAA;EAEC;;;AAKD;AAAA;EAEC;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;AACA;EACC;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAKD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAEA;EACC;;AAIF;EACC;;AAGD;EAEC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAIF;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;;;AAGD;AACA;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AACC;;AACA;EACC;EACA;EACA;;AAGD;EACC;;AAIA;EACC;;AAIF;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;EACA;EACA;;;AAGD;EACC;;;AAIA;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;;;AAIA;EACC;;;AAMD;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACC;;AAGD;EACC;;;AAMA;AAAA;EAEC;EACA;EACA;EACA;EACA;;AAIF;EACC;EACA;;AAEA;AAAA;EAEC;;AAGD;EACC;;AAIF;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAGD;AAAA;AAAA;AAAA;AAAA;EAKC;;;AAIF;EACC;IACC;;;EAED;IACC;;;AAIF;EACC;IACC;;;EAED;IACC;;;AAIF;EACC;IACC;;;EAED;IACC;;;AAIF;EACC;IACC;;;EAED;IACC;;;AAIF;EACC;IACC;;;AAIF;EACC;IACC;;;AAIF;AACA;EAEE;IACC;;;AAKH;EACC;IACC;;;AAIF;EACC;;;AAGD;EACC;AACA;AAKA;;AAJA;EACC;;AAID;EACC;;AAEA;EACC;EACA;EACA;;;AAKH;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAEA;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;;AAGD;EAyGC;EACA;EACA;AAkDA;;AAzJA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC,QAfgB;EAgBhB,SAjBiB;EAmBjB,cAlBgB;EAmBhB;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EAQC;;AAPA;EACC;EACA;EACA;EACA,YAjCe;;AAsChB;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAKF;EACC;;AAEA;EACC;;AAIF;EACC;EACA;EACA;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAEA;EACC;EACA;EACA;;AAKH;EACC;EACA;AACA;EACA;EACA;EACA;;AAOD;EACC;;AAGD;EACC;EACA;;AAEA;EACC;EACA;;AAGD;EACC;;AAKD;EACC;;AAGD;EACC;;AAGD;EACC;;AAEA;EACC;;AAKD;EACC;;AAKD;EACC;;AAMH;EACC;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAGD;EACC;;;AAQF;EACC;;;AAKH;AACA;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAOA;AAAA;AAAA;AAAA;EACC;;AAEA;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;EACC;EACA;EACA;EACA;EACA;;AAGD;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;EACC;;;AAMF;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;AACA;EACA;EACA;EACA;EACA;;;AAGD;AAEA;EACC;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC;;;AAIA;EACC;EACA;EACA;;AAGD;AAAA;EAEC;;;AAIF;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAIA;EACC;EACA;;AAGD;EACC;;AAGD;EACC;EACA;;;AAKF;AACA;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAIA;EACC;EACA;;AAEA;EACC;;AAGD;EACC;;AAIF;EACC;EACA;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;;AAKD;EACC;;AAGD;EACC;;;AAIF;EACC;;AAEA;EACC;EACA;;;AAIF;EACC;;;AAGD;EACC;EACA;EACA;;;AAID;AAKC;EACC;EACA;EACA;;AAEA;EAGC;EACA;EACA,YAbgB;EAchB;EACA;EACA;AACA;AAAA;EAEA,uBACE;EAOF;AAMA;AA0DA;;AA9DA;EACC;;AAID;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOC,WAxCkB;;AA0ClB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;;AAID;EAMC;;AAIF;AAAA;AAAA;EAGC,WA9DkB;;AAgElB;AAAA;AAAA;EACC;EACA;EACA;;AAIF;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;;AAID;EACC;EACA;EACA;EACA;AAAc;EACd;;AAEA;EACC;;AAIF;EACC;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUC;EACA;EACA;EACA;EACA;;AAKD;EACC;;AAGD;EACC;;AAIF;EACC;;AAGD;AAAA;AAAA;EAGC;EACA;EACA;EACA;AAaA;AA2GA;;AAtHA;AAAA;AAAA;EACC;EACA;;AAIA;AAAA;AAAA;AAAA;AAAA;EACC;;AAKF;AAAA;AAAA;EACC;EACA;;AAGD;AAAA;AAAA;EACC;;AAKA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;;AAIF;AAAA;AAAA;AAAA;AAAA;AAEC;EACA;EACA;EACA;AACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;;AAGD;AAAA;AAAA;EACC;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACC;EACA;EACA;;AAIF;AAAA;AAAA;EACC;EACA;;AAEA;AAAA;AAAA;EACC;;AAIF;AAAA;AAAA;EACC;EACA;EACA;;AAEA;AAAA;AAAA;EACC;;AAIF;AAAA;AAAA;EACC;EACA;;AAEA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;EACC;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACC;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGC;EACA;;AAKH;AAAA;AAAA;EACC;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACC;EACA;;AAMH;AAAA;AAAA;EACC;;AAKH;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;;;AAKH;EACI;;;AAGJ;EACE;IACE;;;AAGJ;EACE;IACE","file":"settings.css"} \ No newline at end of file diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss index 2343ac7de34..53f6644adfc 100644 --- a/apps/settings/css/settings.scss +++ b/apps/settings/css/settings.scss @@ -36,76 +36,6 @@ input { @include icon-color('password', 'settings', variables.$color-black); } -#avatarform { - .avatardiv { - margin: 10px auto; - } - - .warning { - width: 100%; - } - - .jcrop-keymgr { - display: none !important; - } -} - -#displayavatar { - text-align: center; -} - -#uploadavatarbutton, #selectavatar, #removeavatar { - padding: 21px; -} -#selectavatar, #removeavatar { - vertical-align: top; -} - -.jcrop-holder { - z-index: 500; -} - -#cropper { - float: left; - z-index: 500; - /* float cropper above settings page to prevent unexpected flowing from dynamically sized element */ - position: fixed; - background-color: rgba(0, 0, 0, 0.2); - box-sizing: border-box; - top: 45px; - left: 0; - width: 100%; - height: calc(100% - 45px); - - .inner-container { - z-index: 2001; - /* above the top bar if needed */ - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background: #fff; - color: #333; - border-radius: var(--border-radius-large); - box-shadow: 0 0 10px var(--color-box-shadow); - padding: 15px; - - .jcrop-holder, - .jcrop-holder img, - img.jcrop-preview { - border-radius: var(--border-radius); - } - - .button { - margin-top: 15px; - } - - .primary { - float: right; - } - } -} - #personal-settings-avatar-container { display: inline-grid; grid-template-columns: 1fr; diff --git a/apps/settings/js/settings/personalInfo.js b/apps/settings/js/settings/personalInfo.js index 98a2dfe8d48..4309b462e47 100644 --- a/apps/settings/js/settings/personalInfo.js +++ b/apps/settings/js/settings/personalInfo.js @@ -41,107 +41,6 @@ jQuery.fn.keyUpDelayedOrEnter = function (callback, allowEmptyValue) { }); }; -function updateAvatar (hidedefault) { - var $headerdiv = $('#header .avatardiv'), - $displaydiv = $('#displayavatar .avatardiv'), - user = OC.getCurrentUser(); - - //Bump avatar avatarversion - oc_userconfig.avatar.version = -(Math.floor(Math.random() * 1000)); - - if (hidedefault) { - $headerdiv.hide(); - $('#header .avatardiv').removeClass('avatardiv-shown'); - } else { - $headerdiv.css({'background-color': ''}); - $headerdiv.avatar(user.uid, 32, true, false, undefined, user.displayName); - $('#header .avatardiv').addClass('avatardiv-shown'); - } - $displaydiv.css({'background-color': ''}); - $displaydiv.avatar(user.uid, 145, true, null, function() { - $displaydiv.removeClass('loading'); - $('#displayavatar img').show(); - if($('#displayavatar img').length === 0 || oc_userconfig.avatar.generated) { - $('#removeavatar').removeClass('inlineblock').addClass('hidden'); - } else { - $('#removeavatar').removeClass('hidden').addClass('inlineblock'); - } - }, user.displayName); - $('#uploadavatar').prop('disabled', false); -} - -function showAvatarCropper () { - var $cropper = $('#cropper'); - var $cropperImage = $(''); - $cropperImage.css('opacity', 0); // prevent showing the unresized image - $cropper.children('.inner-container').prepend($cropperImage); - - $cropperImage.attr('src', - OC.generateUrl('/avatar/tmp') + '?requesttoken=' + encodeURIComponent(OC.requestToken) + '#' + Math.floor(Math.random() * 1000)); - - $cropperImage.load(function () { - var img = $cropperImage.get()[0]; - var selectSize = Math.min(img.width, img.height); - var offsetX = (img.width - selectSize) / 2; - var offsetY = (img.height - selectSize) / 2; - $cropperImage.Jcrop({ - onChange: saveCoords, - onSelect: saveCoords, - aspectRatio: 1, - boxHeight: Math.min(500, $('#app-content').height() -100), - boxWidth: Math.min(500, $('#app-content').width()), - setSelect: [offsetX, offsetY, selectSize, selectSize] - }, function() { - $cropper.show(); - }); - }); -} - -function sendCropData () { - cleanCropper(); - - var cropperData = $('#cropper').data(); - var data = { - x: cropperData.x, - y: cropperData.y, - w: cropperData.w, - h: cropperData.h - }; - $.post(OC.generateUrl('/avatar/cropped'), {crop: data}, avatarResponseHandler); -} - -function saveCoords (c) { - $('#cropper').data(c); -} - -function cleanCropper () { - var $cropper = $('#cropper'); - $('#displayavatar').show(); - $cropper.hide(); - $('.jcrop-holder').remove(); - $('#cropper img').removeData('Jcrop').removeAttr('style').removeAttr('src'); - $('#cropper img').remove(); -} - -function avatarResponseHandler (data) { - if (typeof data === 'string') { - data = JSON.parse(data); - } - var $warning = $('#avatarform .warning'); - $warning.hide(); - if (data.status === "success") { - $('#displayavatar .avatardiv').removeClass('icon-loading'); - oc_userconfig.avatar.generated = false; - updateAvatar(); - } else if (data.data === "notsquare") { - cleanCropper(); - showAvatarCropper(); - } else { - $warning.show(); - $warning.text(data.data.message); - } -} - window.addEventListener('DOMContentLoaded', function () { if($('#pass2').length) { $('#pass2').showPassword().keyup(); @@ -208,9 +107,6 @@ window.addEventListener('DOMContentLoaded', function () { showPublishedScope: !!settingsEl.data('lookup-server-upload-enabled'), }); - userSettings.on("sync", function() { - updateAvatar(false); - }); federationSettingsView.render(); var updateLanguage = function () { @@ -264,125 +160,6 @@ window.addEventListener('DOMContentLoaded', function () { }); }; $("#localeinput").change(updateLocale); - - var uploadparms = { - pasteZone: null, - done: function (e, data) { - var response = data; - if (typeof data.result === 'string') { - response = JSON.parse(data.result); - } else if (data.result && data.result.length) { - // fetch response from iframe - response = JSON.parse(data.result[0].body.innerText); - } else { - response = data.result; - } - avatarResponseHandler(response); - }, - submit: function(e, data) { - $('#displayavatar img').hide(); - $('#displayavatar .avatardiv').addClass('icon-loading'); - $('#uploadavatar').prop('disabled', true) - data.formData = _.extend(data.formData || {}, { - requesttoken: OC.requestToken - }); - }, - fail: function (e, data) { - $('#displayavatar .avatardiv').removeClass('icon-loading'); - $('#uploadavatar').prop('disabled', false) - var msg = data.jqXHR.statusText + ' (' + data.jqXHR.status + ')'; - if (!_.isUndefined(data.jqXHR.responseJSON) && - !_.isUndefined(data.jqXHR.responseJSON.data) && - !_.isUndefined(data.jqXHR.responseJSON.data.message) - ) { - msg = data.jqXHR.responseJSON.data.message; - } - avatarResponseHandler({ - data: { - message: msg - } - }); - } - }; - - $('#uploadavatar').fileupload(uploadparms); - - // Trigger upload action also with keyboard navigation on enter - $('#uploadavatarbutton').on('keyup', function(event) { - if (event.key === ' ' || event.key === 'Enter') { - $('#uploadavatar').trigger('click'); - } - }); - - $('#selectavatar').click(function (event) { - event.stopPropagation(); - event.preventDefault(); - - OC.dialogs.filepicker( - t('settings', "Select a profile picture"), - function (path) { - $('#displayavatar img').hide(); - $('#displayavatar .avatardiv').addClass('icon-loading'); - $('#uploadavatar').prop('disabled', true); - $.ajax({ - type: "POST", - url: OC.generateUrl('/avatar/'), - data: { path: path } - }).done(avatarResponseHandler) - .fail(function(jqXHR) { - var msg = jqXHR.statusText + ' (' + jqXHR.status + ')'; - if (!_.isUndefined(jqXHR.responseJSON) && - !_.isUndefined(jqXHR.responseJSON.data) && - !_.isUndefined(jqXHR.responseJSON.data.message) - ) { - msg = jqXHR.responseJSON.data.message; - } - avatarResponseHandler({ - data: { - message: msg - } - }); - }); - }, - false, - ["image/png", "image/jpeg"] - ); - }); - - $('#removeavatar').click(function (event) { - event.stopPropagation(); - event.preventDefault(); - - $.ajax({ - type: 'DELETE', - url: OC.generateUrl('/avatar/'), - success: function () { - oc_userconfig.avatar.generated = true; - updateAvatar(true); - } - }); - }); - - $('#abortcropperbutton').click(function () { - $('#displayavatar .avatardiv').removeClass('icon-loading'); - $('#displayavatar img').show(); - $('#uploadavatar').prop('disabled', false); - cleanCropper(); - }); - - $('#sendcropperbutton').click(function () { - sendCropData(); - }); - - // Load the big avatar - var user = OC.getCurrentUser(); - $('#avatarform .avatardiv').avatar(user.uid, 145, true, null, function() { - if($('#displayavatar img').length === 0 || oc_userconfig.avatar.generated) { - $('#removeavatar').removeClass('inlineblock').addClass('hidden'); - } else { - $('#removeavatar').removeClass('hidden').addClass('inlineblock'); - } - }, user.displayName); }); window.setInterval(function() { @@ -390,5 +167,3 @@ window.setInterval(function() { $('#localeexample-date').text(moment().format('L')) $('#localeexample-fdow').text(t('settings', 'Week starts on {fdow}', { fdow: dayNames[firstDay] })) }, 1000) - -OC.Settings.updateAvatar = updateAvatar; diff --git a/apps/settings/lib/Settings/Personal/PersonalInfo.php b/apps/settings/lib/Settings/Personal/PersonalInfo.php index 11d3f8b1e09..104989d2c61 100644 --- a/apps/settings/lib/Settings/Personal/PersonalInfo.php +++ b/apps/settings/lib/Settings/Personal/PersonalInfo.php @@ -143,10 +143,8 @@ class PersonalInfo implements ISettings { 'usage' => \OC_Helper::humanFileSize($storageInfo['used']), 'usage_relative' => round($storageInfo['relative']), 'quota' => $storageInfo['quota'], - 'avatarChangeSupported' => $user->canChangeAvatar(), 'federationEnabled' => $federationEnabled, 'lookupServerUploadEnabled' => $lookupServerUploadEnabled, - 'avatarScope' => $account->getProperty(IAccountManager::PROPERTY_AVATAR)->getScope(), 'groups' => $this->getGroups($user), 'isFairUseOfFreePushService' => $this->isFairUseOfFreePushService(), 'profileEnabledGlobally' => $this->profileManager->isProfileEnabled(), @@ -154,6 +152,7 @@ class PersonalInfo implements ISettings { $personalInfoParameters = [ 'userId' => $uid, + 'avatar' => $this->getProperty($account, IAccountManager::PROPERTY_AVATAR), 'displayName' => $this->getProperty($account, IAccountManager::PROPERTY_DISPLAYNAME), 'emailMap' => $this->getEmailMap($account), 'phone' => $this->getProperty($account, IAccountManager::PROPERTY_PHONE), @@ -170,6 +169,7 @@ class PersonalInfo implements ISettings { ]; $accountParameters = [ + 'avatarChangeSupported' => $user->canChangeAvatar(), 'displayNameChangeSupported' => $user->canChangeDisplayName(), 'lookupServerUploadEnabled' => $lookupServerUploadEnabled, ]; diff --git a/apps/settings/src/components/PersonalInfo/AvatarSection.vue b/apps/settings/src/components/PersonalInfo/AvatarSection.vue new file mode 100644 index 00000000000..f0ad1b68d3b --- /dev/null +++ b/apps/settings/src/components/PersonalInfo/AvatarSection.vue @@ -0,0 +1,333 @@ + + + + + + + diff --git a/apps/settings/src/components/PersonalInfo/DisplayNameSection.vue b/apps/settings/src/components/PersonalInfo/DisplayNameSection.vue index dd5f97966ac..c5517140cd2 100644 --- a/apps/settings/src/components/PersonalInfo/DisplayNameSection.vue +++ b/apps/settings/src/components/PersonalInfo/DisplayNameSection.vue @@ -59,6 +59,10 @@ export default { }, onSave(value) { + if (oc_userconfig.avatar.generated) { + // Update the avatar version so that avatar update handlers refresh correctly + oc_userconfig.avatar.version = Date.now() + } emit('settings:display-name:updated', value) }, } diff --git a/apps/settings/src/constants/AccountPropertyConstants.js b/apps/settings/src/constants/AccountPropertyConstants.js index 2f3a84b4908..41dd7e023bd 100644 --- a/apps/settings/src/constants/AccountPropertyConstants.js +++ b/apps/settings/src/constants/AccountPropertyConstants.js @@ -47,7 +47,7 @@ export const ACCOUNT_PROPERTY_ENUM = Object.freeze({ /** Enum of account properties to human readable account property names */ export const ACCOUNT_PROPERTY_READABLE_ENUM = Object.freeze({ ADDRESS: t('settings', 'Location'), - AVATAR: t('settings', 'Avatar'), + AVATAR: t('settings', 'Profile picture'), BIOGRAPHY: t('settings', 'About'), DISPLAYNAME: t('settings', 'Full name'), EMAIL_COLLECTION: t('settings', 'Additional email'), diff --git a/apps/settings/src/main-personal-info.js b/apps/settings/src/main-personal-info.js index 32d8bfc8b45..47af5af8487 100644 --- a/apps/settings/src/main-personal-info.js +++ b/apps/settings/src/main-personal-info.js @@ -26,6 +26,7 @@ import { loadState } from '@nextcloud/initial-state' import { translate as t } from '@nextcloud/l10n' import '@nextcloud/dialogs/styles/toast.scss' +import AvatarSection from './components/PersonalInfo/AvatarSection.vue' import DisplayNameSection from './components/PersonalInfo/DisplayNameSection.vue' import EmailSection from './components/PersonalInfo/EmailSection/EmailSection.vue' import PhoneSection from './components/PersonalInfo/PhoneSection.vue' @@ -50,6 +51,7 @@ Vue.mixin({ }, }) +const AvatarView = Vue.extend(AvatarSection) const DisplayNameView = Vue.extend(DisplayNameSection) const EmailView = Vue.extend(EmailSection) const PhoneView = Vue.extend(PhoneSection) @@ -58,6 +60,7 @@ const WebsiteView = Vue.extend(WebsiteSection) const TwitterView = Vue.extend(TwitterSection) const LanguageView = Vue.extend(LanguageSection) +new AvatarView().$mount('#vue-avatar-section') new DisplayNameView().$mount('#vue-displayname-section') new EmailView().$mount('#vue-email-section') new PhoneView().$mount('#vue-phone-section') diff --git a/apps/settings/templates/settings/personal/personal.info.php b/apps/settings/templates/settings/personal/personal.info.php index 9c18ec71d4a..551a781736b 100644 --- a/apps/settings/templates/settings/personal/personal.info.php +++ b/apps/settings/templates/settings/personal/personal.info.php @@ -47,42 +47,7 @@ script('settings', [ data-lookup-server-upload-enabled="">

t('Personal info')); ?>

-
-
-

- t('Profile picture')); ?> - - - - - -

-
-
- - - - - - -

t('png or jpg, max. 20 MB')); ?>

- - t('Picture provided by original account')); ?> - -
- - - - - -
-
+

t('Details')); ?>

-- cgit v1.2.3