sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Finish the box for displayname/avatar changes

Browse Source
This commit is contained in:
Travis Ralston
2019-01-23 09:27:04 -07:00
parent de81c8d768
commit f643d7a143
6 changed files with 170 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/views/settings/tabs/_GeneralSettingsTab.scss
+68 -2
View File
@@ -14,12 +14,78 @@
width: 88px;
height: 88px;
margin-left: 13px;
position: relative;
cursor: pointer;
}
.mx_GeneralSettingsTab_profileAvatar div {
.mx_GeneralSettingsTab_profileAvatar > * {
display: block;
width: 88px;
height: 88px;
border-radius: 4px;
background-color: #ccc;
}
.mx_GeneralSettingsTab_profileAvatar .mx_GeneralSettingsTab_profileAvatarPlaceholder {
background-color: $settings-profile-placeholder-bg-color;
}
.mx_GeneralSettingsTab_profileAvatarOverlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: none;
text-align: center;
vertical-align: middle;
font-size: 10px;
}
.mx_GeneralSettingsTab_profileAvatar:hover .mx_GeneralSettingsTab_profileAvatarOverlay {
display: inline-block;
opacity: 0.5 !important;
color: $settings-profile-overlay-fg-color !important;
background-color: $settings-profile-overlay-bg-color !important;
}
.mx_GeneralSettingsTab_profileAvatarOverlay_show {
display: inline-block;
opacity: 1;
color: $settings-profile-overlay-placeholder-fg-color;
background-color: $settings-profile-overlay-placeholder-bg-color;
}
.mx_GeneralSettingsTab_profileAvatarOverlayText {
display: block;
margin-top: 17px;
margin-bottom: 8px;
}
.mx_GeneralSettingsTab_profileAvatarOverlayImgContainer {
position: relative;
width: 14px;
height: 14px;
margin: auto;
}
.mx_GeneralSettingsTab_profileAvatarOverlayImg:before {
background-color: $settings-profile-overlay-placeholder-fg-color;
mask: url("$(res)/img/feather-icons/upload.svg");
mask-repeat: no-repeat;
mask-size: 14px;
mask-position: center;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.mx_GeneralSettingsTab_profileAvatar:hover .mx_GeneralSettingsTab_profileAvatarOverlayImg:before {
background-color: $settings-profile-overlay-fg-color !important;
}
.mx_GeneralSettingsTab_profileAvatarUpload {
display: none;
}
res/img/feather-icons/upload.svg
+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
<g fill="none" fill-rule="evenodd" stroke="#454545" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2">
<path d="M13 9v2.667c0 .736-.597 1.333-1.333 1.333H2.333A1.333 1.333 0 0 1 1 11.667V9M10.667 4.333L7.333 1 4 4.333M7.333 1v8"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 359 B

res/themes/dharma/css/_dharma.scss
+5
View File
@@ -120,6 +120,11 @@ $blockquote-bar-color: #ddd;
$blockquote-fg-color: #777;
$settings-grey-fg-color: #a2a2a2;
$settings-profile-placeholder-bg-color: #e7e7e7;
$settings-profile-overlay-bg-color: #000;
$settings-profile-overlay-placeholder-bg-color: transparent;
$settings-profile-overlay-fg-color: #fff;
$settings-profile-overlay-placeholder-fg-color: #454545;
$voip-decline-color: #f48080;
$voip-accept-color: #80f480;
res/themes/light/css/_base.scss
+5
View File
@@ -113,6 +113,11 @@ $blockquote-bar-color: #ddd;
$blockquote-fg-color: #777;
$settings-grey-fg-color: #a2a2a2;
$settings-profile-placeholder-bg-color: #e7e7e7;
$settings-profile-overlay-bg-color: #000;
$settings-profile-overlay-placeholder-bg-color: transparent;
$settings-profile-overlay-fg-color: #fff;
$settings-profile-overlay-placeholder-fg-color: #454545;
$voip-decline-color: #f48080;
$voip-accept-color: #80f480;