diff --git a/client/routes/router.js b/client/routes/router.js index f70a5ff6eba..a310a0b7ad4 100644 --- a/client/routes/router.js +++ b/client/routes/router.js @@ -85,7 +85,11 @@ FlowRouter.route('/account/:group?', { } params.group = _.capitalize(params.group, true); BlazeLayout.render('main', { center: `account${ params.group }` }); - } + $('.main-content').removeClass('rc-old'); + }, + triggersExit: [function() { + $('.main-content').addClass('rc-old'); + }] }); FlowRouter.route('/history/private', { diff --git a/packages/rocketchat-theme/client/imports/components/flex-nav.css b/packages/rocketchat-theme/client/imports/components/flex-nav.css index a4b3241e0e1..e63dfd42664 100644 --- a/packages/rocketchat-theme/client/imports/components/flex-nav.css +++ b/packages/rocketchat-theme/client/imports/components/flex-nav.css @@ -1,12 +1,14 @@ .flex-nav { - position: fixed; + position: absolute; top: 0; left: 0; height: 100%; z-index: 3; overflow-y: auto; overflow-x: hidden; - width: var(--rooms-box-width); + + /* width: var(--rooms-box-width); */ + width: 100%; transition: transform 0.15s cubic-bezier(0.5, 0, 0.1, 1); will-change: transform; diff --git a/packages/rocketchat-theme/client/imports/general/forms.css b/packages/rocketchat-theme/client/imports/general/forms.css index 1cbe3538e7a..81e8c22ac46 100644 --- a/packages/rocketchat-theme/client/imports/general/forms.css +++ b/packages/rocketchat-theme/client/imports/general/forms.css @@ -108,6 +108,9 @@ --button-padding: 0.782rem; --button-padding-small: 0.5rem; --input-font-size: 0.875rem; + --border: 2px; + --gap-between-elements: 2.5rem; + --label-margin-bottom: 1rem; } .rc-button { @@ -117,6 +120,7 @@ border-width: 1px; border-style: solid; background-color: transparent; + transition: background-color 0.3s; cursor: pointer; &:disabled { @@ -143,6 +147,28 @@ padding: 0; flex: 0 0 var(--button-square-size); } + + &.loading { + position: relative; + padding-right: calc(3 * 0.782rem); + transition: padding-right 0.3s; + } +} + +.loading { + &::before { + content: ""; + border-radius: 50%; + width: 20px; + height: 20px; + display: block; + border: 0.15rem solid rgba(255, 255, 255, 0.5); + border-top-color: white; + animation: spin 1s infinite cubic-bezier(0.14, 0.48, 0.45, 0.63); + position: absolute; + right: 0.782rem; + top: 25%; + } } .rc-input { @@ -221,7 +247,7 @@ &__element { width: 100%; background-color: transparent; - border-width: 1px; + border-width: 2px; border-radius: 2px; border-color: #e1e5e8; padding: 0.75rem 1rem; @@ -409,9 +435,11 @@ padding: 0.5rem; border-radius: 2px; cursor: pointer; + &.selected { background-color: #f2f3f5; } + &:hover { background-color: #f2f3f5; } @@ -428,3 +456,100 @@ } } } + +.rc-select-avatar { + display: flex; + align-items: center; + cursor: pointer; + + &__preview { + width: 150px; + height: 150px; + flex: 0 0 150px; + margin-right: 1rem; + } + + &__type { + max-width: 150px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + margin-right: -var(--border); + } + + &__type, + &__value { + height: 45px; + background-color: transparent; + border-width: var(--border); + border-radius: var(--border); + border-color: #e1e5e8; + padding: 0.75rem 1rem; + font-size: var(--input-font-size); + flex: 1; + -webkit-appearance: none; + } +} + +.rc-form-group { + margin-bottom: var(--gap-between-elements); + /*display: flex;*/ +} + +.rc-form-label { + display: block; + cursor: pointer; + font-size: var(--input-font-size); + color: #2d343d; + margin-bottom: var(--label-margin-bottom); +} + +.rc-form-legend { + color: #2d343d; + font-size: 1rem; +} + +.rc-w-50 { + display: inline-block; + width: 50%; + vertical-align: top; + + /* TODO: find a better place */ + + &.rc-input { + &:nth-child(odd) { + padding-right: 15px; + } + + &:nth-child(even) { + padding-left: 15px; + } + } +} + +.preferences-page { + &__header { + height: 77px; + display: flex; + align-items: center; + padding: 25px; + box-shadow: 0 0 1px 1px #e6e4e4; + color: #2f343d; + font-size: 16px; + font-weight: 600; + } + + &__content { + padding: 10px; + max-width: 649px; + margin: 25px auto; + } +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} diff --git a/packages/rocketchat-ui-account/client/accountProfile.html b/packages/rocketchat-ui-account/client/accountProfile.html index 32198b18db4..fd2aa02a0ea 100644 --- a/packages/rocketchat-ui-account/client/accountProfile.html +++ b/packages/rocketchat-ui-account/client/accountProfile.html @@ -1,13 +1,95 @@ diff --git a/packages/rocketchat-ui-account/client/accountProfile.js b/packages/rocketchat-ui-account/client/accountProfile.js index 2038b340d2d..444ddfe9670 100644 --- a/packages/rocketchat-ui-account/client/accountProfile.js +++ b/packages/rocketchat-ui-account/client/accountProfile.js @@ -1,5 +1,11 @@ import toastr from 'toastr'; Template.accountProfile.helpers({ + ifThenElse(condition, val, not = '') { + return condition ? val : not; + }, + canSave(ret) { + return ret; + }, allowDeleteOwnAccount() { return RocketChat.settings.get('Accounts_AllowDeleteOwnAccount'); }, @@ -23,15 +29,9 @@ Template.accountProfile.helpers({ allowEmailChange() { return RocketChat.settings.get('Accounts_AllowEmailChange'); }, - usernameChangeDisabled() { - return t('Username_Change_Disabled'); - }, allowPasswordChange() { return RocketChat.settings.get('Accounts_AllowPasswordChange'); }, - passwordChangeDisabled() { - return t('Password_Change_Disabled'); - }, customFields() { return Meteor.user().customFields; }