MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-19 06:43:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

Change status icons

Browse Source
This commit is contained in:
Natsumi
2024-05-23 21:15:31 +12:00
parent 1e6c8cdef6
commit 45dfc82afc
8 changed files with 74 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
html/src/app.scss
View File

@@ -258,7 +258,9 @@ hr.x-vertical-divider {
translate: 0 -50%;
border-radius: 4px;
background: #303133;
transition: background-color 0.4s, left 0.2s;
transition:
background-color 0.4s,
left 0.2s;
}
.el-menu-item.is-active::before {
@@ -405,6 +407,15 @@ img.friends-list-avatar {
filter: none;
}
.x-friend-item > .avatar.active > img,
.x-friend-item > .avatar.online > img,
.x-friend-item > .avatar.joinme > img,
.x-friend-item > .avatar.askme > img,
.x-friend-item > .avatar.busy > img,
.x-friend-item > .avatar.offline > img {
mask-image: url(masks/usercutout.svg);
}
.x-friend-item > .avatar.active::after,
.x-friend-item > .avatar.online::after,
.x-friend-item > .avatar.joinme::after,
@@ -412,13 +423,12 @@ img.friends-list-avatar {
.x-friend-item > .avatar.busy::after,
.x-friend-item > .avatar.offline::after {
position: absolute;
right: 0;
bottom: 0;
width: 8px;
height: 8px;
right: 1px;
bottom: 1px;
width: 9px;
height: 9px;
content: '';
background: #909399;
border: 2px solid #fff;
border-radius: 50%;
}
@@ -432,14 +442,17 @@ img.friends-list-avatar {
.x-friend-item > .avatar.joinme::after {
background: #409eff;
mask-image: url(masks/joinme.svg);
}
.x-friend-item > .avatar.askme::after {
background: #ff9500;
mask-image: url(masks/askme.svg);
}
.x-friend-item > .avatar.busy::after {
background: #ff2c2c;
mask-image: url(masks/busy.svg);
}
.x-friend-item > .avatar.offline::after {
@@ -559,14 +572,17 @@ i.x-user-status.online {
i.x-user-status.joinme {
background: #409eff;
mask-image: url(masks/joinme.svg);
}
i.x-user-status.askme {
background: #ff9500;
mask-image: url(masks/askme.svg);
}
i.x-user-status.busy {
background: #ff2c2c;
mask-image: url(masks/busy.svg);
}
.x-tag-friend {
@@ -748,7 +764,7 @@ i.x-user-status.busy {
.el-dialog,
.el-message-box {
border-radius: 10px;
border-radius: 28px;
}
.el-tabs__nav-wrap::after {

12
html/src/index.pug
View File

@@ -208,10 +208,10 @@ html
div(v-loading="userDialog.loading")
div(style="display:flex")
el-popover(v-if="userDialog.ref.profilePicOverride" placement="right" width="500px" trigger="click")
img.x-link(slot="reference" v-lazy="userDialog.ref.profilePicOverride" style="flex:none;height:120px;width:213.33px;border-radius:4px;object-fit:cover")
img.x-link(slot="reference" v-lazy="userDialog.ref.profilePicOverride" style="flex:none;height:120px;width:213.33px;border-radius:12px;object-fit:cover")
img.x-link(v-lazy="userDialog.ref.profilePicOverride" style="height:400px" @click="showFullscreenImageDialog(userDialog.ref.profilePicOverride)")
el-popover(v-else placement="right" width="500px" trigger="click")
img.x-link(slot="reference" v-lazy="userDialog.ref.currentAvatarThumbnailImageUrl" style="flex:none;height:120px;width:160px;border-radius:4px;object-fit:cover")
img.x-link(slot="reference" v-lazy="userDialog.ref.currentAvatarThumbnailImageUrl" style="flex:none;height:120px;width:160px;border-radius:12px;object-fit:cover")
img.x-link(v-lazy="userDialog.ref.currentAvatarImageUrl" style="height:500px" @click="showFullscreenImageDialog(userDialog.ref.currentAvatarImageUrl)")
div(style="flex:1;display:flex;align-items:center;margin-left:15px")
div(style="flex:1")
@@ -260,7 +260,7 @@ html
span(v-text="userDialog.ref.statusDescription" style="font-size:12px")
div(v-if="userDialog.ref.userIcon" style="flex:none;margin-right:10px")
el-popover(placement="right" width="500px" trigger="click")
img.x-link(slot="reference" v-lazy="userDialog.ref.userIcon" style="flex:none;width:120px;height:120px;border-radius:4px;object-fit:cover")
img.x-link(slot="reference" v-lazy="userDialog.ref.userIcon" style="flex:none;width:120px;height:120px;border-radius:12px;object-fit:cover")
img.x-link(v-lazy="userDialog.ref.userIcon" style="height:500px" @click="showFullscreenImageDialog(userDialog.ref.userIcon)")
div(style="flex:none")
template(v-if="(API.currentUser.id !== userDialog.ref.id && userDialog.isFriend) || userDialog.isFavorite")
@@ -620,7 +620,7 @@ html
div(v-loading="worldDialog.loading")
div(style="display:flex")
el-popover(placement="right" width="500px" trigger="click")
img.x-link(slot="reference" v-lazy="worldDialog.ref.thumbnailImageUrl" style="flex:none;width:160px;height:120px;border-radius:4px")
img.x-link(slot="reference" v-lazy="worldDialog.ref.thumbnailImageUrl" style="flex:none;width:160px;height:120px;border-radius:12px")
img.x-link(v-lazy="worldDialog.ref.imageUrl" style="width:500px;height:375px" @click="showFullscreenImageDialog(worldDialog.ref.imageUrl)")
div(style="flex:1;display:flex;align-items:center;margin-left:15px")
div(style="flex:1")
@@ -828,7 +828,7 @@ html
div(v-loading="avatarDialog.loading")
div(style="display:flex")
el-popover(placement="right" width="500px" trigger="click")
img.x-link(slot="reference" v-lazy="avatarDialog.ref.thumbnailImageUrl" style="flex:none;width:160px;height:120px;border-radius:4px")
img.x-link(slot="reference" v-lazy="avatarDialog.ref.thumbnailImageUrl" style="flex:none;width:160px;height:120px;border-radius:12px")
img.x-link(v-lazy="avatarDialog.ref.imageUrl" style="width:500px;height:375px" @click="showFullscreenImageDialog(avatarDialog.ref.imageUrl)")
div(style="flex:1;display:flex;align-items:center;margin-left:15px")
div(style="flex:1")
@@ -947,7 +947,7 @@ html
.group-body(v-loading="groupDialog.loading")
div(style="display:flex")
el-popover(placement="right" width="500px" trigger="click")
img.x-link(slot="reference" v-lazy="groupDialog.ref.iconUrl" style="flex:none;width:120px;height:120px;border-radius:4px")
img.x-link(slot="reference" v-lazy="groupDialog.ref.iconUrl" style="flex:none;width:120px;height:120px;border-radius:12px")
img.x-link(v-lazy="groupDialog.ref.iconUrl" style="width:500px;height:500px" @click="showFullscreenImageDialog(groupDialog.ref.iconUrl)")
div(style="flex:1;display:flex;align-items:center;margin-left:15px")
.group-header(style="flex:1")

10
html/src/masks/askme.svg Normal file
View File

@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1"
id="svg1" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g id="Layer_4">
<path d="M273.2,0c41.5,103.3,38.3,200.8-18.5,257.6C198.4,313.9,102.3,317.6,0,277.3V512h512V0H273.2z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 651 B

7
html/src/masks/busy.svg Normal file
View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path d="M0,0v512h512V0H0z M456,271.76c0,22.71-18,41.13-40.2,41.13H96.2c-22.2,0-40.2-18.41-40.2-41.13v-31.53
c0-22.71,18-41.13,40.2-41.13h319.6c22.2,0,40.2,18.41,40.2,41.13V271.76z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 541 B

10
html/src/masks/joinme.svg Normal file
View File

@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1"
id="svg1" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path d="M0,512h512V0H0V512z M83.7,290.7l140.2-179c5.3-6.6,11.9-12.1,19.8-14.3c5-1.9,10.9-1.8,16.1-1.8c11,0,21.5,4.4,28.2,12.8
l138.1,183.9c12,15,7.6,36.9-9.9,49.1c-5.9,4.1-12.4,6.5-19,7.5c-3.4,0.8-7,1.2-10.7,1.2h-77.4l-109.4,0h-80.7
c-2.9,0-5.6-0.3-8.3-0.7c-6.8-0.7-13.4-3-19.3-7.1C74.1,330,70.6,307,83.7,290.7z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 843 B

13
html/src/masks/usercutout.svg Normal file
View File

@@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_2_00000039816400109898662970000002014992858927017630_"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{stroke:#000000;stroke-miterlimit:10;}
</style>
<g>
<path class="st0" d="M437,512h75v-75C512,478.4,478.4,512,437,512z"/>
<path class="st0" d="M0,0v512h437c-41.4,0-75-33.6-75-75s33.6-75,75-75s75,33.6,75,75V0H0z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 659 B

9
html/src/theme.dark.scss
View File

@@ -368,15 +368,6 @@ button {
background: #3e3e3e;
}
.x-friend-item > .avatar.active::after,
.x-friend-item > .avatar.online::after,
.x-friend-item > .avatar.joinme::after,
.x-friend-item > .avatar.askme::after,
.x-friend-item > .avatar.busy::after,
.x-friend-item > .avatar.offline::after {
border: 2px solid #000;
}
.x-friend-item > .detail > .name {
color: #fff;
}