dan/Nertivia-Client
1
0
Fork 0
mirror of https://github.com/danbulant/Nertivia-Client synced 2026-07-04 02:20:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added some icons to context menus & curve borders.

Browse source
This commit is contained in:
supertiger1234 2020-01-17 20:05:24 +00:00
parent e5e074027f
commit 93d66c2f29
5 changed files with 97 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/assets/hammer4.0.svg Normal file
View file

@ -0,0 +1,20 @@
<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<defs>
<filter id="svg_2_blur" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="0"/>
</filter>
</defs>
<g>
<title>background</title>
<rect x="-1" y="-1" width="502" height="502" id="canvas_background" fill="none"/>
<g id="canvasGrid" display="none">
<rect id="svg_3" width="100%" height="100%" x="0" y="0" stroke-width="0" fill="url(#gridpattern)"/>
</g>
</g>
<g>
<title>Layer 1</title>
<rect stroke="#000" fill="#ff3b3b" stroke-width="0" x="234.536815" y="24.865021" width="91.926378" height="511.269947" id="svg_1" rx="5" filter="url(#svg_2_blur)" transform="rotate(-45 280.4999999999999,280.49999999999994) "/>
<rect stroke="#000" fill="#ff3b3b" stroke-width="0" x="0.811563" y="79.83451" width="271.661204" height="113.615313" id="svg_4" rx="5" filter="url(#svg_2_blur)" transform="rotate(-45 136.6421661376953,136.6421661376953) "/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

3
src/components/app/MessageTemplate.vue
View file

@ -510,8 +510,11 @@ $message-color: #03222b;
color: rgb(231, 231, 231); color: rgb(231, 231, 231);
margin: auto 0; margin: auto 0;
overflow: hidden; overflow: hidden;
border-radius: 4px;
border-bottom-left-radius: 0;
} }
.ownMessageLeft .content { .ownMessageLeft .content {
border-radius: 4px;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.image-content { .image-content {

26
src/components/app/Popouts/Popouts/ServerContextMenu.vue
View file

@ -1,18 +1,24 @@
<template> <template>
<div class="drop-down-menu" v-click-outside="outsideClick"> <div class="drop-down-menu" v-click-outside="outsideClick">
<div class="item" @click="createInvite">Manage Invites</div> <div class="item" @click="createInvite">
<div class="material-icons">settings</div>
<div class="name">Manage Invites</div>
</div>
<div <div
class="item" class="item"
v-if="checkServerCreator || hasAdminRoles" v-if="checkServerCreator || hasAdminRoles"
@click="showSettings" @click="showSettings"
> >
Server Settings <div class="material-icons">settings</div>
<div class="name">Server Settings</div>
</div> </div>
<div class="item warn" v-if="!checkServerCreator" @click="leaveServer"> <div class="item warn" v-if="!checkServerCreator" @click="leaveServer">
Leave Server <div class="material-icons">exit_to_app</div>
<div class="name">Leave Server</div>
</div> </div>
<div class="item" @click="copyServerID"> <div class="item" @click="copyServerID">
Copy Server ID <div class="material-icons">developer_board</div>
<div class="name">Copy ID</div>
</div> </div>
</div> </div>
</template> </template>
@ -132,15 +138,23 @@ export default {
z-index: 99999; z-index: 99999;
user-select: none; user-select: none;
color: white; color: white;
overflow: hidden;
border-radius: 4px;
} }
.item { .item {
display: flex;
align-items: center;
padding: 10px; padding: 10px;
transition: 0.3s; transition: 0.2s;
font-size: 13px; font-size: 13px;
cursor: pointer; cursor: pointer;
.material-icons {
font-size: 20px;
margin-right: 5px;
}
&:hover { &:hover {
background: rgba(46, 46, 46, 0.651); background: rgba(255, 255, 255, 0.2);
} }
&.warn { &.warn {
color: rgb(255, 59, 59); color: rgb(255, 59, 59);

46
src/components/app/Popouts/Popouts/ServerMemberContext.vue
View file

@ -17,9 +17,18 @@
</div> </div>
</div> </div>
<div class="main-menu" ref="main-menu"> <div class="main-menu" ref="main-menu">
<div class="item" @click="viewProfile">View Profile</div> <div class="item" @click="viewProfile">
<div class="item" @click="copyUserTag">Copy User@Tag</div> <div class="material-icons icon-cat">person</div>
<div class="item" @click="copyID">Copy ID</div> <div class="name">View Profile</div>
</div>
<div class="item" @click="copyUserTag">
<div class="material-icons icon-cat">developer_board</div>
<div class="name">Copy User@Tag</div>
</div>
<div class="item" @click="copyID">
<div class="material-icons icon-cat">developer_board</div>
<div class="name">Copy ID</div>
</div>
<div <div
class="item" class="item"
@mouseenter="editRoleHoverEvent" @mouseenter="editRoleHoverEvent"
@ -29,10 +38,12 @@
Edit Roles Edit Roles
</div> </div>
<div class="item warn" v-if="showKickBanOption" @click="kickMember"> <div class="item warn" v-if="showKickBanOption" @click="kickMember">
Kick <div class="material-icons icon-cat">exit_to_app</div>
<div class="name">Kick</div>
</div> </div>
<div class="item warn" v-if="showKickBanOption" @click="banMember"> <div class="item warn" v-if="showKickBanOption" @click="banMember">
Ban <img class="icon-cat" src="../../../../assets/hammer4.0.svg" />
<div class="name">Ban</div>
</div> </div>
</div> </div>
</div> </div>
@ -100,11 +111,11 @@ export default {
rolesMenu.style.top = rolesMenu.style.top =
mainMenuY + mainMenu.clientHeight - rolesMenu.clientHeight + "px"; mainMenuY + mainMenu.clientHeight - rolesMenu.clientHeight + "px";
rolesMenu.style.left = mainMenuX - mainMenu.clientWidth - 38 + "px"; rolesMenu.style.left = mainMenuX - mainMenu.clientWidth - 22 + "px";
}); });
}, },
setPosition() { setPosition() {
const y = this.contextDetails.y; let y = this.contextDetails.y;
let x = this.contextDetails.x; let x = this.contextDetails.x;
const mainMenu = this.$refs["main-menu"]; const mainMenu = this.$refs["main-menu"];
@ -112,6 +123,9 @@ export default {
if (x + mainMenu.clientWidth > window.innerWidth) { if (x + mainMenu.clientWidth > window.innerWidth) {
x = window.innerWidth - mainMenu.clientWidth; x = window.innerWidth - mainMenu.clientWidth;
} }
if (y + mainMenu.clientHeight > window.innerHeight) {
y = window.innerHeight - mainMenu.clientHeight;
}
mainMenu.style.top = y + "px"; mainMenu.style.top = y + "px";
mainMenu.style.left = x + "px"; mainMenu.style.left = x + "px";
@ -265,6 +279,8 @@ export default {
z-index: 99999; z-index: 99999;
top: 0; top: 0;
left: 0; left: 0;
overflow: hidden;
border-radius: 4px;
} }
.roles-menu { .roles-menu {
@ -279,6 +295,7 @@ export default {
max-height: 150px; max-height: 150px;
width: 150px; width: 150px;
overflow: auto; overflow: auto;
border-radius: 4px;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
@ -291,18 +308,27 @@ export default {
height: 30px; height: 30px;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
padding: 5px;
transition: 0.2s; transition: 0.2s;
font-size: 13px; font-size: 13px;
cursor: pointer; cursor: pointer;
.material-icons { .material-icons {
margin-left: -10px; font-size: 20px;
margin-right: 5px;
margin-left: -2px;
}
.icon-cat {
margin-right: 5px;
margin-left: 1px;
height: 20px;
width: 20px;
} }
.has-role { .has-role {
margin-left: -5px; margin-left: -2px;
margin-right: 5px; margin-right: 5px;
} }
&:hover { &:hover {
background: rgba(102, 102, 102, 0.4); background: rgba(255, 255, 255, 0.2);
} }
&.warn { &.warn {
color: rgb(255, 59, 59); color: rgb(255, 59, 59);

23
src/components/app/Popouts/Popouts/messageContextMenu.vue
View file

@ -1,11 +1,16 @@
<template> <template>
<div class="drop-down-menu msg-context-popout" v-click-outside="outsideClick"> <div class="drop-down-menu msg-context-popout" v-click-outside="outsideClick">
<div class="item" @click="copyMessage" v-if="!isPrecense">Copy</div> <div class="item" @click="copyMessage" v-if="!isPrecense">
<div class="material-icons">developer_board</div>
<div class="name">Copy</div>
</div>
<div class="item" @click="editMessage" v-if="showEditOption && !isPrecense"> <div class="item" @click="editMessage" v-if="showEditOption && !isPrecense">
Edit <div class="material-icons">edit</div>
<div class="name">Edit</div>
</div> </div>
<div class="item warn" @click="deleteMessage" v-if="showDeleteOption"> <div class="item warn" @click="deleteMessage" v-if="showDeleteOption">
Delete <div class="material-icons">delete</div>
<div class="name">Delete</div>
</div> </div>
</div> </div>
</template> </template>
@ -138,15 +143,23 @@ export default {
z-index: 99999; z-index: 99999;
user-select: none; user-select: none;
color: white; color: white;
overflow: hidden;
border-radius: 4px;
} }
.item { .item {
display: flex;
align-items: center;
padding: 10px; padding: 10px;
transition: 0.3s; transition: 0.2s;
font-size: 13px; font-size: 13px;
cursor: pointer; cursor: pointer;
.material-icons {
font-size: 20px;
margin-right: 5px;
}
&:hover { &:hover {
background: rgba(46, 46, 46, 0.651); background: rgba(255, 255, 255, 0.2);
} }
&.warn { &.warn {
color: rgb(255, 59, 59); color: rgb(255, 59, 59);