Avatar defaults and colors
This commit is contained in:
Josh Perez
GitHub
parent
a001882d58
commit
12d2b1bf7c
140 changed files with 4212 additions and 1084 deletions
|
|
@ -76,23 +76,12 @@
|
|||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
transition: font-size 100ms ease-out;
|
||||
|
||||
@include light-theme {
|
||||
color: $color-white;
|
||||
}
|
||||
@include dark-theme {
|
||||
color: $color-gray-05;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
@mixin avatar-icon($icon) {
|
||||
@include light-theme {
|
||||
@include color-svg($icon, $color-white);
|
||||
}
|
||||
@include dark-theme {
|
||||
@include color-svg($icon, $color-gray-05);
|
||||
}
|
||||
-webkit-mask: url($icon) no-repeat center;
|
||||
-webkit-mask-size: 100%;
|
||||
}
|
||||
|
||||
&--direct {
|
||||
|
|
@ -118,24 +107,5 @@
|
|||
padding: 4px;
|
||||
}
|
||||
|
||||
&--no-image {
|
||||
background-color: $avatar-color-steel;
|
||||
}
|
||||
|
||||
&--signal-blue {
|
||||
background-color: $avatar-color-ultramarine;
|
||||
@include dark-theme {
|
||||
background-color: $avatar-color-ultramarine;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $avatar-colors {
|
||||
&--#{$color} {
|
||||
background-color: $value;
|
||||
|
||||
@include dark-theme {
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include avatar-colors();
|
||||
}
|
||||
|
|
|
|||
95
stylesheets/components/AvatarEditor.scss
Normal file
95
stylesheets/components/AvatarEditor.scss
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
// Copyright 2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.AvatarEditor {
|
||||
&__top-buttons {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__button {
|
||||
@include button-reset;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 9px;
|
||||
justify-content: center;
|
||||
line-height: 14px;
|
||||
margin: 0 8px;
|
||||
min-height: 44px;
|
||||
min-width: 60px;
|
||||
padding: 0 8px;
|
||||
|
||||
@include light-theme {
|
||||
background-color: $color-gray-05;
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
background-color: $color-gray-65;
|
||||
color: $color-gray-05;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
@mixin button-icon($icon) {
|
||||
@include light-theme {
|
||||
@include color-svg($icon, $color-black);
|
||||
}
|
||||
@include dark-theme {
|
||||
@include color-svg($icon, $color-gray-05);
|
||||
}
|
||||
}
|
||||
|
||||
&--photo::before {
|
||||
@include button-icon('../images/icons/v2/photo-album-outline-24.svg');
|
||||
}
|
||||
|
||||
&--text::before {
|
||||
@include button-icon('../images/icons/v2/text-24.svg');
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 2px $color-ultramarine;
|
||||
}
|
||||
}
|
||||
|
||||
&__avatars {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
&__divider {
|
||||
border: none;
|
||||
border-bottom: 1px solid $color-gray-15;
|
||||
margin-bottom: 24px;
|
||||
margin-top: 20px;
|
||||
|
||||
@include light-theme {
|
||||
border-color: $color-gray-15;
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
border-color: $color-gray-75;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__avatar-selector-title {
|
||||
@include font-body-1-bold;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
// Copyright 2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.module-AvatarInput {
|
||||
@include button-reset;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background: none;
|
||||
|
||||
$dark-selector: '#{&}--dark';
|
||||
|
||||
&__avatar {
|
||||
@include button-reset;
|
||||
|
||||
margin-top: 4px;
|
||||
display: flex;
|
||||
border-radius: 100%;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
transition: background-color 100ms ease-out;
|
||||
|
||||
&--nothing {
|
||||
align-items: stretch;
|
||||
background: $color-white;
|
||||
|
||||
@at-root '#{$dark-selector} #{&}' {
|
||||
background: $color-ultramarine;
|
||||
}
|
||||
|
||||
&::before {
|
||||
flex-grow: 1;
|
||||
content: '';
|
||||
display: block;
|
||||
@include color-svg(
|
||||
'../images/icons/v2/camera-outline-24.svg',
|
||||
$color-ultramarine,
|
||||
false
|
||||
);
|
||||
-webkit-mask-size: 24px 24px;
|
||||
|
||||
@at-root '#{$dark-selector} #{&}' {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/camera-outline-24.svg',
|
||||
$color-white,
|
||||
false
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--loading {
|
||||
align-items: center;
|
||||
background: $color-black;
|
||||
}
|
||||
|
||||
&--has-image {
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
@include button-reset;
|
||||
@include font-body-1;
|
||||
|
||||
padding-bottom: 4px;
|
||||
padding-top: 4px;
|
||||
|
||||
@include light-theme {
|
||||
color: $color-ultramarine;
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
color: $color-ultramarine-light;
|
||||
}
|
||||
}
|
||||
|
||||
@include keyboard-mode {
|
||||
&:focus {
|
||||
.module-AvatarInput__avatar {
|
||||
box-shadow: inset 0 0 0 2px $color-ultramarine;
|
||||
}
|
||||
|
||||
.module-AvatarInput__label {
|
||||
@include font-body-1-bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
12
stylesheets/components/AvatarModalButtons.scss
Normal file
12
stylesheets/components/AvatarModalButtons.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
// Copyright 2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.AvatarModalButtons {
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
||||
.module-Button {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
92
stylesheets/components/AvatarPreview.scss
Normal file
92
stylesheets/components/AvatarPreview.scss
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
// Copyright 2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.AvatarPreview {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
|
||||
&__avatar {
|
||||
@include button-reset;
|
||||
|
||||
align-items: center;
|
||||
border-radius: 100%;
|
||||
cursor: auto;
|
||||
display: flex;
|
||||
font-size: 32px;
|
||||
height: 80px;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 4px;
|
||||
position: relative;
|
||||
transition: background-color 100ms ease-out;
|
||||
user-select: none;
|
||||
width: 80px;
|
||||
|
||||
&--loading {
|
||||
background: $color-black;
|
||||
}
|
||||
|
||||
&--has-image {
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
}
|
||||
|
||||
&__group {
|
||||
-webkit-mask: url('../images/icons/v2/group-outline-40.svg') no-repeat
|
||||
center;
|
||||
-webkit-mask-size: 70%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__upload {
|
||||
align-items: center;
|
||||
background: $color-gray-02;
|
||||
border-radius: 100%;
|
||||
bottom: 4px;
|
||||
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
height: 28px;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
right: -7px;
|
||||
width: 28px;
|
||||
|
||||
&::after {
|
||||
@include color-svg(
|
||||
'../images/icons/v2/camera-outline-24.svg',
|
||||
$color-black
|
||||
);
|
||||
content: '';
|
||||
display: block;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__clear {
|
||||
@include button-reset;
|
||||
align-items: center;
|
||||
background-color: $color-white;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
height: 24px;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 24px;
|
||||
|
||||
&:after {
|
||||
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-75);
|
||||
content: '';
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
25
stylesheets/components/AvatarTextEditor.scss
Normal file
25
stylesheets/components/AvatarTextEditor.scss
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
// Copyright 2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.AvatarTextEditor {
|
||||
&__input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: inherit;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
transition: font-size 30ms linear;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__measure {
|
||||
left: -9999;
|
||||
position: fixed;
|
||||
text-transform: uppercase;
|
||||
top: -9999;
|
||||
touch-action: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
88
stylesheets/components/BetterAvatarBubble.scss
Normal file
88
stylesheets/components/BetterAvatarBubble.scss
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
// Copyright 2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.BetterAvatarBubble {
|
||||
align-items: center;
|
||||
background-clip: content-box;
|
||||
background-position: center;
|
||||
border-color: transparent;
|
||||
border-radius: 100%;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-size: 32px;
|
||||
height: 56px;
|
||||
justify-content: center;
|
||||
padding: 2px;
|
||||
position: relative;
|
||||
width: 56px;
|
||||
|
||||
@include avatar-colors();
|
||||
|
||||
&--selected {
|
||||
@include light-theme {
|
||||
border-color: $color-black;
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
border-color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
@include keyboard-mode {
|
||||
&:focus {
|
||||
border-color: $color-ultramarine;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--editable {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 100%;
|
||||
background: $color-black-alpha-20;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
@include color-svg(
|
||||
'../images/icons/v2/compose-outline-24.svg',
|
||||
$color-white
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&__delete {
|
||||
@include button-reset;
|
||||
align-items: center;
|
||||
background-color: $color-white;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.2);
|
||||
display: none;
|
||||
height: 20px;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 20px;
|
||||
|
||||
&:after {
|
||||
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-75);
|
||||
content: '';
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.BetterAvatarBubble__delete {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -7,7 +7,9 @@
|
|||
margin: 0 auto;
|
||||
max-width: 360px;
|
||||
width: 95%;
|
||||
max-height: 90vh;
|
||||
// We need this to be a number not divisible by 5 so that if we have sticky
|
||||
// buttons the bottom doesn't bleed through by 1px.
|
||||
max-height: 89vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
|
@ -85,7 +87,8 @@
|
|||
padding: 0 16px 16px 16px;
|
||||
border-top: 1px solid transparent;
|
||||
// If there's a header, just the body scrolls
|
||||
overflow: auto;
|
||||
overflow-y: scroll; // scroll so that the padding is always there
|
||||
overflow-x: auto;
|
||||
|
||||
&--scrolled {
|
||||
@include light-theme {
|
||||
|
|
@ -102,7 +105,8 @@
|
|||
&--no-header {
|
||||
padding: 16px;
|
||||
// If there's no header, the whole thing scrolls
|
||||
overflow: auto;
|
||||
overflow-y: scroll; // scroll so that the padding is always there
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
&__button-footer {
|
||||
|
|
@ -120,6 +124,44 @@
|
|||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.module-Modal--sticky-buttons & {
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 16px 0;
|
||||
position: sticky;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
|
||||
@include light-theme() {
|
||||
background: $color-white;
|
||||
}
|
||||
|
||||
@include dark-theme() {
|
||||
background: $color-gray-95;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--sticky-buttons {
|
||||
.module-Modal__body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
position: relative;
|
||||
|
||||
.module-Modal__body--overflow {
|
||||
.module-Modal__button-footer {
|
||||
@include light-theme {
|
||||
border-top: 1px solid $color-gray-05;
|
||||
}
|
||||
|
||||
@include dark-theme {
|
||||
border-top: 1px solid $color-gray-80;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Overrides for a modal with important message
|
||||
|
|
|
|||
|
|
@ -2,19 +2,6 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
.ProfileEditor {
|
||||
padding-bottom: 48px;
|
||||
position: relative;
|
||||
|
||||
&__buttons {
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
||||
button {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
&--container {
|
||||
align-items: center;
|
||||
|
|
@ -79,6 +66,6 @@
|
|||
&__info {
|
||||
@include font-body-2;
|
||||
color: $color-gray-60;
|
||||
margin-top: 16px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue