mirror of
https://github.com/danbulant/Nertivia-Client
synced 2026-06-15 20:41:08 +00:00
consistant design
This commit is contained in:
supertiger1234
parent
ac3a8a9e44
commit
5b7dcdc48c
26 changed files with 242 additions and 262 deletions
81
package-lock.json
generated
81
package-lock.json
generated
|
|
@ -973,8 +973,7 @@
|
|||
"@types/node": {
|
||||
"version": "12.6.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-12.6.8.tgz",
|
||||
"integrity": "sha512-aX+gFgA5GHcDi89KG5keey2zf0WfZk/HAQotEamsK2kbey+8yGKcson0hbK8E+v0NArlCJQCqMP161YhV6ZXLg==",
|
||||
"dev": true
|
||||
"integrity": "sha512-aX+gFgA5GHcDi89KG5keey2zf0WfZk/HAQotEamsK2kbey+8yGKcson0hbK8E+v0NArlCJQCqMP161YhV6ZXLg=="
|
||||
},
|
||||
"@types/normalize-package-data": {
|
||||
"version": "2.4.0",
|
||||
|
|
@ -982,12 +981,26 @@
|
|||
"integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/prop-types": {
|
||||
"version": "15.7.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
|
||||
"integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
|
||||
},
|
||||
"@types/q": {
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz",
|
||||
"integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/react": {
|
||||
"version": "16.9.11",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.11.tgz",
|
||||
"integrity": "sha512-UBT4GZ3PokTXSWmdgC/GeCGEJXE5ofWyibCcecRLUVN2ZBpXQGVgQGtG2foS7CrTKFKlQVVswLvf7Js6XA/CVQ==",
|
||||
"requires": {
|
||||
"@types/prop-types": "*",
|
||||
"csstype": "^2.2.0"
|
||||
}
|
||||
},
|
||||
"@types/socket.io-client": {
|
||||
"version": "1.4.32",
|
||||
"resolved": "https://registry.npmjs.org/@types/socket.io-client/-/socket.io-client-1.4.32.tgz",
|
||||
|
|
@ -1677,6 +1690,7 @@
|
|||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
|
||||
"integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"sprintf-js": "~1.0.2"
|
||||
}
|
||||
|
|
@ -3539,6 +3553,11 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"csstype": {
|
||||
"version": "2.6.7",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.7.tgz",
|
||||
"integrity": "sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ=="
|
||||
},
|
||||
"current-script-polyfill": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/current-script-polyfill/-/current-script-polyfill-1.0.0.tgz",
|
||||
|
|
@ -4071,7 +4090,8 @@
|
|||
"entities": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
|
||||
"integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
|
||||
"integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==",
|
||||
"dev": true
|
||||
},
|
||||
"errno": {
|
||||
"version": "0.1.7",
|
||||
|
|
@ -7230,38 +7250,6 @@
|
|||
"object-visit": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"markdown-it": {
|
||||
"version": "9.0.1",
|
||||
"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-9.0.1.tgz",
|
||||
"integrity": "sha512-XC9dMBHg28Xi7y5dPuLjM61upIGPJG8AiHNHYqIaXER2KNnn7eKnM5/sF0ImNnyoV224Ogn9b1Pck8VH4k0bxw==",
|
||||
"requires": {
|
||||
"argparse": "^1.0.7",
|
||||
"entities": "~1.1.1",
|
||||
"linkify-it": "^2.0.0",
|
||||
"mdurl": "^1.0.1",
|
||||
"uc.micro": "^1.0.5"
|
||||
}
|
||||
},
|
||||
"markdown-it-chat-formatter": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/markdown-it-chat-formatter/-/markdown-it-chat-formatter-0.1.1.tgz",
|
||||
"integrity": "sha512-RIGKubGe3wjvizsTqeeU+RIVS7b1bqAwZE0Xv7H15uxZxf3pdLQjpX+ATcInPkf1L2SY4Vl2do8nSliLBCutag==",
|
||||
"requires": {
|
||||
"markdown-it": "^9.0.1",
|
||||
"markdown-it-underline": "^1.0.1",
|
||||
"marked": "^0.7.0"
|
||||
}
|
||||
},
|
||||
"markdown-it-underline": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/markdown-it-underline/-/markdown-it-underline-1.0.1.tgz",
|
||||
"integrity": "sha1-Q6VKVB2V1zm0MVdwHx2jBtfDALI="
|
||||
},
|
||||
"marked": {
|
||||
"version": "0.7.0",
|
||||
"resolved": "https://registry.npmjs.org/marked/-/marked-0.7.0.tgz",
|
||||
"integrity": "sha512-c+yYdCZJQrsRjTPhUx7VKkApw9bwDkNbHUKo1ovgcfDjb2kc8rLuRbIFyXL5WOEUwzSSKo3IXpph2K6DqB/KZg=="
|
||||
},
|
||||
"match-sorter": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-2.3.0.tgz",
|
||||
|
|
@ -7293,11 +7281,6 @@
|
|||
"integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==",
|
||||
"dev": true
|
||||
},
|
||||
"mdurl": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
|
||||
"integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
|
||||
},
|
||||
"media-typer": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
|
||||
|
|
@ -10297,9 +10280,13 @@
|
|||
"dev": true
|
||||
},
|
||||
"simple-markdown": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/simple-markdown/-/simple-markdown-0.6.1.tgz",
|
||||
"integrity": "sha512-02HKXvM9J7pJWf74fuWthcgof5jF81Yndt+XcXtWnEtpp8QaX9dUAJpdAA6KWrB/rSGzrOi0PRAVy9/0bJiIZw=="
|
||||
"version": "0.7.1",
|
||||
"resolved": "https://registry.npmjs.org/simple-markdown/-/simple-markdown-0.7.1.tgz",
|
||||
"integrity": "sha512-9p92kPFjaDER1yuDgVW1UzFVQoL46HBonniqOLKnCmqn0vlxKkHIxRODBJdHLplo44tOtmnGxPTbUZ1HpYkHyg==",
|
||||
"requires": {
|
||||
"@types/node": ">=10.0.0",
|
||||
"@types/react": ">=16.0.0"
|
||||
}
|
||||
},
|
||||
"simple-swizzle": {
|
||||
"version": "0.2.2",
|
||||
|
|
@ -10721,7 +10708,8 @@
|
|||
"sprintf-js": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
|
||||
"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
|
||||
"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
|
||||
"dev": true
|
||||
},
|
||||
"sshpk": {
|
||||
"version": "1.16.1",
|
||||
|
|
@ -11943,6 +11931,11 @@
|
|||
"vue-script2": "^2.0.3"
|
||||
}
|
||||
},
|
||||
"vue-virtual-scroll-list": {
|
||||
"version": "1.4.2",
|
||||
"resolved": "https://registry.npmjs.org/vue-virtual-scroll-list/-/vue-virtual-scroll-list-1.4.2.tgz",
|
||||
"integrity": "sha512-jcXl1cYDxGZX+aF9vsUauXWnUkXm8oQxnvLTJ8UMTmMxwzbmlHX7vs0xGDdEej91vJpBNrdNNseWPxboTvI+UA=="
|
||||
},
|
||||
"vuedraggable": {
|
||||
"version": "2.23.2",
|
||||
"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.23.2.tgz",
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
"filesize": "^4.1.2",
|
||||
"highlight.js": "^9.15.8",
|
||||
"jquery": "^3.4.0",
|
||||
"linkify-it": "^2.2.0",
|
||||
"match-sorter": "^2.3.0",
|
||||
"particles.js": "^2.0.0",
|
||||
"simple-markdown": "^0.7.1",
|
||||
|
|
@ -30,6 +31,7 @@
|
|||
"vue-socket.io": "^3.0.4",
|
||||
"vue-socket.io-extended": "^3.2.0",
|
||||
"vue-twitter": "^0.1.0",
|
||||
"vue-virtual-scroll-list": "^1.4.2",
|
||||
"vuedraggable": "^2.23.2",
|
||||
"vuex": "^3.0.1"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom Emojis Category -->
|
||||
<div v-for="(group, index) in groups" :key="group" class="category">
|
||||
<div class="category-name">{{ group }}</div>
|
||||
<div class="list">
|
||||
|
|
@ -398,7 +399,7 @@ export default {
|
|||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 20px;
|
||||
max-width: 390px;
|
||||
max-width: 410px;
|
||||
width: calc(100% - 50px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -406,15 +407,11 @@ export default {
|
|||
}
|
||||
|
||||
.emoji-panel-inner {
|
||||
background: rgba(255, 255, 255, 0.61);
|
||||
background: rgb(32, 32, 32);
|
||||
transition: 0.3s;
|
||||
border-radius: 5px;
|
||||
padding: 3px;
|
||||
z-index: 99999;
|
||||
}
|
||||
.emoji-panel-inner:hover {
|
||||
background: rgba(255, 255, 255, 0.685);
|
||||
}
|
||||
|
||||
.emojis-list {
|
||||
color: white;
|
||||
padding: 5px;
|
||||
|
|
@ -430,9 +427,10 @@ export default {
|
|||
.category {
|
||||
}
|
||||
.category-name {
|
||||
padding: 10px;
|
||||
padding: 5px;
|
||||
padding-left: 3px;
|
||||
text-transform: capitalize;
|
||||
color: rgb(93, 93, 93);
|
||||
color: rgb(195, 195, 195);
|
||||
}
|
||||
.list {
|
||||
}
|
||||
|
|
@ -444,7 +442,6 @@ export default {
|
|||
overflow: hidden;
|
||||
margin: 4px;
|
||||
padding: 2px;
|
||||
border-radius: 5px;
|
||||
min-width: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -459,14 +456,11 @@ export default {
|
|||
align-self: center;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
margin-top: 10px;
|
||||
background: rgb(161, 161, 161);
|
||||
border-radius: 5px;
|
||||
transition: 0.3s;
|
||||
overflow: auto;
|
||||
}
|
||||
.tabs img {
|
||||
height: 20px;
|
||||
height: 18px;
|
||||
width: auto;
|
||||
margin: auto;
|
||||
filter: grayscale(100%);
|
||||
|
|
@ -480,14 +474,13 @@ export default {
|
|||
}
|
||||
.tab {
|
||||
background: rgba(59, 59, 59, 0.521);
|
||||
border-radius: 5px;
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: 0.1s;
|
||||
height: 35px;
|
||||
width: 32px;
|
||||
width: 35px;
|
||||
overflow: hidden;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -517,29 +510,34 @@ export default {
|
|||
height: 0;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-top: 15px solid rgba(255, 255, 255, 0.61);
|
||||
border-top: 15px solid rgb(32, 32, 32);
|
||||
|
||||
align-self: flex-end;
|
||||
margin-right: 70px;
|
||||
margin-right: 60px;
|
||||
}
|
||||
.tooltip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
background: rgba(29, 29, 29, 0.664);
|
||||
background: rgb(29, 29, 29);
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
bottom: -20px;
|
||||
text-transform: capitalize;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style>
|
||||
img.panel.emoji {
|
||||
margin: auto;
|
||||
padding: 2px;
|
||||
object-fit: contain;
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
height: 1.6em;
|
||||
width: 1.6em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -90,10 +90,6 @@ export default {
|
|||
|
||||
|
||||
<style scoped>
|
||||
.custom-emoji {
|
||||
height: 1.5em;
|
||||
width: auto;
|
||||
}
|
||||
.selected {
|
||||
background: rgba(66, 66, 66, 0.89);
|
||||
}
|
||||
|
|
@ -109,7 +105,6 @@ export default {
|
|||
color: white;
|
||||
padding: 5px;
|
||||
transition: 0.3s;
|
||||
border-radius: 5px;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
|
@ -127,9 +122,10 @@ export default {
|
|||
}
|
||||
.emojiItem {
|
||||
display: flex;
|
||||
padding: 5px;
|
||||
padding: 2px;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
@media (max-height: 441px) {
|
||||
.emoji-suggetions-list {
|
||||
|
|
@ -141,8 +137,8 @@ export default {
|
|||
<style>
|
||||
.emoji-suggetions-list img.emoji {
|
||||
object-fit: contain;
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
height: 1.6em;
|
||||
width: 1.6em;
|
||||
margin: 1px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -92,18 +92,21 @@ export default {
|
|||
.add-friend {
|
||||
height: 300px;
|
||||
width: 400px;
|
||||
background: rgba(24, 24, 24, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
background-image: url("../../../../assets/leftPanelBackground.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
background-color: rgba(41, 41, 41, 0.801);
|
||||
background-color: #085053;
|
||||
color: white;
|
||||
height: 50px;
|
||||
align-content: center;
|
||||
|
|
@ -132,11 +135,6 @@ export default {
|
|||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
color: white;
|
||||
background: transparent;
|
||||
border: solid 1px #afafaf;
|
||||
}
|
||||
.description {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
|
@ -144,10 +142,10 @@ export default {
|
|||
align-self: center;
|
||||
color: white;
|
||||
width: initial;
|
||||
background: #1998ff;
|
||||
background: #05353b;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: #157fd6;
|
||||
background: #0f292c;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -37,19 +37,20 @@
|
|||
<div class="button check-button" @click="checkInviteCode">Check</div>
|
||||
</div>
|
||||
<div v-if="tab == 2" key="join-server" class="content server">
|
||||
<profile-picture class="avatar" size="100px" :url="avatar + server.avatar" />
|
||||
<profile-picture class="avatar found" size="100px" :url="avatar + server.avatar" />
|
||||
<div class="server-name">{{ server.name }}</div>
|
||||
<div class="buttons">
|
||||
<div
|
||||
class="button cancel-button"
|
||||
@click="server = null; inviteCode = ''; tab = 1; slideBack();"
|
||||
>Cancel</div>
|
||||
<div
|
||||
v-if="!servers[server.server_id]"
|
||||
class="button join-button"
|
||||
@click="joinButton"
|
||||
>Join</div>
|
||||
<div v-if="servers[server.server_id]" class="button join-button button-clicked">Joined</div>
|
||||
<div
|
||||
class="button cancel-button"
|
||||
@click="server = null; inviteCode = ''; tab = 1; slideBack();"
|
||||
>Cancel</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
|
|
@ -212,18 +213,20 @@ export default {
|
|||
height: 100%;
|
||||
max-height: 450px;
|
||||
width: 400px;
|
||||
background: rgb(32, 32, 32);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background-image: url("../../../../assets/leftPanelBackground.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 15px;
|
||||
background: rgb(27, 27, 27);
|
||||
background: #144a59;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.tab {
|
||||
|
|
@ -233,17 +236,17 @@ export default {
|
|||
padding-bottom: 5px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
border-bottom: solid 1px rgba(255, 255, 255, 0);
|
||||
border-bottom: solid 5px rgba(255, 255, 255, 0);
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
font-size: 20px;
|
||||
}
|
||||
.selected {
|
||||
border-bottom: solid 1px white !important;
|
||||
border-bottom: solid 5px white !important;
|
||||
}
|
||||
.tab:hover {
|
||||
border-bottom: solid 1px rgb(107, 107, 107);
|
||||
border-bottom: solid 5px rgb(107, 107, 107);
|
||||
}
|
||||
|
||||
.content {
|
||||
|
|
@ -281,13 +284,10 @@ export default {
|
|||
align-self: center;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 10px;
|
||||
background: rgb(44, 44, 44);
|
||||
padding: 5px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.input input {
|
||||
border-radius: 5px;
|
||||
background-color: #06454d;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
margin: 20px;
|
||||
|
|
@ -301,34 +301,24 @@ export default {
|
|||
|
||||
.button {
|
||||
padding: 5px;
|
||||
background: rgba(25, 151, 255, 0.699);
|
||||
border-radius: 5px;
|
||||
background: #05353b;
|
||||
user-select: none;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 17px;
|
||||
outline: none;
|
||||
transition: 0.2s;
|
||||
box-shadow: 3px 3px rgba(23, 112, 255, 0.479);
|
||||
align-self: center;
|
||||
margin: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.button:hover {
|
||||
background: rgb(25, 151, 255);
|
||||
}
|
||||
.button:focus {
|
||||
background: rgb(25, 151, 255);
|
||||
}
|
||||
.button:active {
|
||||
background: rgb(25, 151, 255);
|
||||
transform: translate(3px, 3px);
|
||||
box-shadow: 0px 0px rgba(0, 97, 207, 0.479);
|
||||
background: #0f292c;
|
||||
}
|
||||
|
||||
.button-clicked {
|
||||
background: rgb(126, 126, 126) !important;
|
||||
transform: translate(3px, 3px) !important;
|
||||
box-shadow: 0px 0px rgba(61, 61, 61, 0.479) !important;
|
||||
|
||||
}
|
||||
|
||||
.create-button {
|
||||
|
|
@ -371,26 +361,21 @@ export default {
|
|||
}
|
||||
|
||||
.cancel-button {
|
||||
margin-left: 5px !important;
|
||||
background: rgba(238, 55, 55, 0.521);
|
||||
box-shadow: 3px 3px rgb(85, 28, 28);
|
||||
margin-right: 5px !important;
|
||||
background: rgba(245, 49, 49, 0.856);
|
||||
}
|
||||
|
||||
.cancel-button:hover {
|
||||
background: rgb(238, 55, 55);
|
||||
}
|
||||
.cancel-button:focus {
|
||||
background: rgb(25, 151, 255);
|
||||
}
|
||||
.cancel-button:active {
|
||||
background: rgb(238, 55, 55);
|
||||
transform: translate(3px, 3px);
|
||||
box-shadow: 0px 0px rgb(85, 28, 28);
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 80px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.found {
|
||||
margin-top: 70px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -95,6 +95,10 @@ export default {
|
|||
flex-direction: column;
|
||||
color: white;
|
||||
border-radius: 3px;
|
||||
background-image: url("../../../../assets/leftPanelBackground.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
.text {
|
||||
color: white;
|
||||
|
|
@ -140,8 +144,7 @@ export default {
|
|||
margin: auto;
|
||||
background: rgb(32, 118, 255);
|
||||
padding: 10px;
|
||||
border-radius: 2px;
|
||||
cursor: default;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: 0.3s;
|
||||
margin-left: 10px;
|
||||
|
|
|
|||
|
|
@ -106,12 +106,14 @@ export default {
|
|||
margin: auto;
|
||||
height: 400px;
|
||||
width: 400px;
|
||||
background: rgb(32, 32, 32);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background-image: url("../../../../assets/leftPanelBackground.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
.top {
|
||||
display: flex;
|
||||
|
|
@ -123,19 +125,20 @@ export default {
|
|||
|
||||
.button {
|
||||
padding: 10px;
|
||||
background: rgba(0, 162, 255, 0.719);
|
||||
background: #05353b;
|
||||
margin: auto;
|
||||
border-radius: 10px;
|
||||
transition: 0.3s;
|
||||
user-select: none;
|
||||
cursor:pointer;
|
||||
}
|
||||
.button:hover {
|
||||
background: rgb(0, 162, 255);
|
||||
background: #0f292c;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.title {
|
||||
margin: 10px;
|
||||
|
|
@ -153,7 +156,6 @@ export default {
|
|||
background: rgba(0, 0, 0, 0.274);
|
||||
margin: 5px;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -46,17 +46,16 @@ export default {
|
|||
}
|
||||
.warning {
|
||||
background: red;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.button {
|
||||
padding: 10px;
|
||||
background: rgba(255, 0, 0, 0.719);
|
||||
margin: auto;
|
||||
border-radius: 10px;
|
||||
transition: 0.3s;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.button:hover {
|
||||
background: rgb(255, 0, 0);
|
||||
|
|
|
|||
|
|
@ -84,10 +84,9 @@ export default {
|
|||
overflow: auto;
|
||||
.member {
|
||||
display: flex;
|
||||
background: rgb(54, 54, 54);
|
||||
background: #06454d;
|
||||
height: 30px;
|
||||
margin: 5px;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -182,16 +182,14 @@ export default {
|
|||
position: relative;
|
||||
}
|
||||
.channels-list {
|
||||
background: #161616e5;
|
||||
background: #082326;
|
||||
height: 100%;
|
||||
width: 165px;
|
||||
flex-shrink: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
.channel {
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
|
|
@ -209,10 +207,10 @@ export default {
|
|||
align-self: center;
|
||||
}
|
||||
.channel:hover {
|
||||
background: rgba(58, 58, 58, 0.849);
|
||||
background: #06454d;
|
||||
}
|
||||
.channel.selected {
|
||||
background: rgb(58, 58, 58);
|
||||
background: #064c55;
|
||||
}
|
||||
.add-channel-button {
|
||||
background: rgba(17, 148, 255, 0.692);
|
||||
|
|
@ -228,9 +226,8 @@ export default {
|
|||
overflow: hidden;
|
||||
}
|
||||
.button {
|
||||
background: rgba(17, 148, 255, 0.692);
|
||||
background: #05353b;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
align-self: center;
|
||||
margin: 5px;
|
||||
cursor: pointer;
|
||||
|
|
@ -238,7 +235,7 @@ export default {
|
|||
transition: 0.3s;
|
||||
}
|
||||
.button:hover {
|
||||
background: rgb(17, 148, 255);
|
||||
background: #0f292c;
|
||||
}
|
||||
.button.warn {
|
||||
background: rgba(255, 17, 17, 0.692);
|
||||
|
|
@ -269,14 +266,14 @@ export default {
|
|||
.input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(22, 22, 22, 0.87);
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
background-color: #06454d;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
.input input {
|
||||
border-radius: 5px;
|
||||
width: initial;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.check-box {
|
||||
|
|
|
|||
|
|
@ -189,9 +189,8 @@ export default {
|
|||
}
|
||||
|
||||
.toggle {
|
||||
background: rgb(46, 46, 46);
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
background-color: #06454d;
|
||||
padding: 10px;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -203,7 +202,6 @@ export default {
|
|||
.box {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 5px;
|
||||
background: rgb(95, 95, 95);
|
||||
margin-right: 5px;
|
||||
&.selected {
|
||||
|
|
@ -218,9 +216,8 @@ export default {
|
|||
}
|
||||
|
||||
.input {
|
||||
background: rgb(46, 46, 46);
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
background-color: #06454d;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
align-self: flex-start;
|
||||
height: 155px;
|
||||
|
|
@ -231,12 +228,13 @@ export default {
|
|||
margin-bottom: 5px;
|
||||
}
|
||||
textarea {
|
||||
background: rgb(34, 34, 34);
|
||||
background: #05353b;
|
||||
resize: none;
|
||||
outline: none;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 0;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -247,8 +245,7 @@ export default {
|
|||
|
||||
.button {
|
||||
padding: 10px;
|
||||
background: rgba(17, 148, 255, 0.692);
|
||||
border-radius: 10px;
|
||||
background: #05353b;
|
||||
-webkit-transition: background 0.3s;
|
||||
transition: 0.3s;
|
||||
-webkit-user-select: none;
|
||||
|
|
@ -262,7 +259,7 @@ export default {
|
|||
}
|
||||
|
||||
.button:hover {
|
||||
background: rgb(17, 148, 255);
|
||||
background: #0f292c;
|
||||
}
|
||||
.button.disabled {
|
||||
background: grey;
|
||||
|
|
|
|||
|
|
@ -125,13 +125,14 @@ export default {
|
|||
.settings-box {
|
||||
height: 600px;
|
||||
display: flex;
|
||||
|
||||
margin: auto;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background-image: url("../../../../assets/leftPanelBackground.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
.tabs {
|
||||
background: rgba(24, 24, 24, 0.938);
|
||||
height: 100%;
|
||||
width: 200px;
|
||||
min-width: 150px;
|
||||
|
|
@ -139,21 +140,17 @@ export default {
|
|||
overflow-x: hidden;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
background: #02292c;
|
||||
}
|
||||
.panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(31, 31, 31, 0.924);
|
||||
height: 100%;
|
||||
width: 600px;
|
||||
}
|
||||
.tab {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
background: rgba(26, 26, 26, 0.233);
|
||||
border-radius: 5px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: 0.3s;
|
||||
|
|
@ -162,14 +159,17 @@ export default {
|
|||
.tab-name {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.tab.selected {
|
||||
background: rgb(61, 61, 61) !important;
|
||||
}
|
||||
|
||||
|
||||
.tab:hover {
|
||||
background: rgba(61, 61, 61, 0.616);
|
||||
background: #08616b;
|
||||
}
|
||||
|
||||
.tab.selected {
|
||||
background: #064c55;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.tab.warn{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
|
@ -182,7 +182,7 @@ export default {
|
|||
display: flex;
|
||||
padding: 10px;
|
||||
font-size: 25px;
|
||||
background: rgb(20, 20, 20);
|
||||
background: #02292c;
|
||||
}
|
||||
.title .material-icons {
|
||||
font-size: 40px;
|
||||
|
|
@ -204,7 +204,7 @@ export default {
|
|||
transition: 0.3s;
|
||||
}
|
||||
.close-button:hover {
|
||||
background: rgba(37, 37, 37, 0.692);
|
||||
background: #064f56;
|
||||
}
|
||||
.close-button .material-icons {
|
||||
margin: auto;
|
||||
|
|
|
|||
|
|
@ -221,11 +221,10 @@ export default {
|
|||
.change-avatar-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgb(42, 42, 42);
|
||||
background-color: #06454d;
|
||||
width: 150px;
|
||||
align-self: center;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.avatar {
|
||||
|
|
@ -236,16 +235,18 @@ export default {
|
|||
display: none;
|
||||
}
|
||||
.button {
|
||||
background: #5394fc;
|
||||
background: #05353b;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
display: inline-block;
|
||||
align-self: center;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.disabled {
|
||||
.button:hover {
|
||||
background: #0f292c;
|
||||
}
|
||||
.button.disabled {
|
||||
background: grey;
|
||||
}
|
||||
.left {
|
||||
|
|
@ -258,10 +259,9 @@ export default {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: rgb(42, 42, 42);
|
||||
background-color: #06454d;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
margin: 5px;
|
||||
margin: 10px;
|
||||
margin-left: 30px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
|
@ -278,7 +278,6 @@ export default {
|
|||
}
|
||||
.outer-input input {
|
||||
width: initial;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.save-button {
|
||||
|
|
@ -288,7 +287,6 @@ export default {
|
|||
display: block;
|
||||
padding: 10px 0px 10px 0px;
|
||||
margin: 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.errors {
|
||||
|
|
@ -298,6 +296,7 @@ export default {
|
|||
user-select: none;
|
||||
cursor: pointer;
|
||||
margin-left: 35px;
|
||||
color: white;
|
||||
}
|
||||
.link:hover {
|
||||
text-decoration: underline;
|
||||
|
|
|
|||
|
|
@ -213,6 +213,12 @@ input:focus {
|
|||
position: relative;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
color: rgb(185, 185, 185);
|
||||
transition: 0.2s;
|
||||
}
|
||||
.delete-button:hover {
|
||||
color: white;
|
||||
}
|
||||
.delete-button .material-icons {
|
||||
margin: auto;
|
||||
|
|
@ -220,26 +226,14 @@ input:focus {
|
|||
z-index: 999;
|
||||
}
|
||||
|
||||
.delete-button:hover > .inner {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.delete-button .inner {
|
||||
background: rgba(255, 0, 0, 0.205);
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
right: 0;
|
||||
transition: 0.3s;
|
||||
border-top-left-radius: 60px;
|
||||
border-bottom-left-radius: 60px;
|
||||
}
|
||||
|
||||
.preview {
|
||||
height: 30px;
|
||||
width: auto;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
object-fit: contain;
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
vertical-align: -9px;
|
||||
}
|
||||
.title {
|
||||
margin: 10px;
|
||||
|
|
@ -255,7 +249,7 @@ input:focus {
|
|||
.emojis-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(47, 47, 47, 0.767);
|
||||
background-color: #06454d;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
|
|
@ -265,11 +259,9 @@ input:focus {
|
|||
}
|
||||
|
||||
.emoji {
|
||||
background: rgba(63, 63, 63, 0.411);
|
||||
height: 50px;
|
||||
width: calc(100% - 10px);
|
||||
display: flex;
|
||||
margin: 5px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
transition: 0.3s;
|
||||
user-select: none;
|
||||
|
|
@ -277,7 +269,7 @@ input:focus {
|
|||
flex-shrink: 0;
|
||||
}
|
||||
.emoji:hover {
|
||||
background: rgba(75, 75, 75, 0.712);
|
||||
background: #0a3f46;
|
||||
}
|
||||
.emoji-name {
|
||||
margin: auto;
|
||||
|
|
@ -288,15 +280,14 @@ input:focus {
|
|||
display: inline-block;
|
||||
width: inherit;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
background: rgba(54, 54, 54, 0.603);
|
||||
background: #05353b;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 20px;
|
||||
user-select: none;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.button:hover {
|
||||
background: rgb(54, 54, 54);
|
||||
background: #0f292c;
|
||||
}
|
||||
.button .material-icons {
|
||||
vertical-align: -6px;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
<template>
|
||||
<div class="my-profile-panel">
|
||||
<div class="title">
|
||||
Message Example
|
||||
</div>
|
||||
<div class="message-example">
|
||||
<message-template
|
||||
message="Hi"
|
||||
|
|
@ -31,17 +28,19 @@
|
|||
:date="Date.now()"
|
||||
/>
|
||||
</div>
|
||||
<div class="title">
|
||||
Options
|
||||
</div>
|
||||
<div class="switches">
|
||||
<div
|
||||
class="checkbox"
|
||||
@click="toggleAppearance"
|
||||
>
|
||||
<div :class="`checkbox-box ${apperance && apperance.own_message_right && apperance.own_message_right === true ? 'selected' : '' }`" />
|
||||
<div class="checkbox-name">
|
||||
Show my messages on the right side.
|
||||
<div class="options">
|
||||
<div class="title">
|
||||
Options
|
||||
</div>
|
||||
<div class="switches">
|
||||
<div
|
||||
class="checkbox"
|
||||
@click="toggleAppearance"
|
||||
>
|
||||
<div :class="`checkbox-box ${apperance && apperance.own_message_right && apperance.own_message_right === true ? 'selected' : '' }`" />
|
||||
<div class="checkbox-name">
|
||||
Show my messages on the right side.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -98,6 +97,7 @@ export default {
|
|||
|
||||
.checkbox {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
.checkbox-box {
|
||||
background: rgba(88, 88, 88, 0.74);
|
||||
|
|
@ -106,7 +106,6 @@ export default {
|
|||
margin: auto;
|
||||
margin-right: 10px;
|
||||
transition: 0.3s;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.checkbox-box.selected {
|
||||
|
|
@ -126,9 +125,7 @@ export default {
|
|||
|
||||
.message-example{
|
||||
padding: 10px;
|
||||
background: rgba(88, 88, 88, 0.44);
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
background: #173d42;
|
||||
}
|
||||
.title{
|
||||
font-size: 20px;
|
||||
|
|
@ -143,9 +140,13 @@ export default {
|
|||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 10px;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.options {
|
||||
background-color: #06454d;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -119,7 +119,7 @@ export default {
|
|||
.tabs{
|
||||
z-index: 999999;
|
||||
display: flex;
|
||||
background: rgb(47, 47, 47);
|
||||
background: #04383d;
|
||||
justify-content: center;
|
||||
}
|
||||
.tabs .tab {
|
||||
|
|
@ -138,9 +138,7 @@ export default {
|
|||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
background:rgba(255, 255, 255, 0);
|
||||
height:5px;
|
||||
border-radius:10px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
|
|
@ -220,8 +218,5 @@ export default {
|
|||
}
|
||||
.alert-button:hover {
|
||||
background: rgb(83, 53, 53);
|
||||
}
|
||||
@media (max-width: 815px) {
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -99,6 +99,7 @@ export default {
|
|||
.checkbox {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.checkbox-box {
|
||||
background: rgba(88, 88, 88, 0.74);
|
||||
|
|
@ -106,7 +107,6 @@ export default {
|
|||
width: 20px;
|
||||
margin-right: 10px;
|
||||
transition: 0.3s;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.checkbox-box.selected {
|
||||
|
|
@ -143,7 +143,7 @@ export default {
|
|||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 10px;
|
||||
flex-direction: column;
|
||||
background:#09464f;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -75,7 +75,6 @@ export default {
|
|||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
transition: 0.3s;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.checkbox-box.selected {
|
||||
|
|
@ -111,8 +110,8 @@ export default {
|
|||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 10px;
|
||||
flex-direction: column;
|
||||
background:#09464f;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -157,7 +157,7 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.notice {
|
||||
color: grey;
|
||||
color: rgb(216, 216, 216);
|
||||
font-size: 15px;
|
||||
margin-top: 10px;
|
||||
margin-left: 30px;
|
||||
|
|
@ -226,18 +226,17 @@ export default {
|
|||
}
|
||||
.survey .button {
|
||||
color: white;
|
||||
background: rgb(27, 114, 255);
|
||||
border-radius: 5px;
|
||||
background: #05353b;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transition: 0.3s;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
cursor: pointer;
|
||||
}
|
||||
.survey .button:hover {
|
||||
background: rgb(0, 98, 255);
|
||||
background: #0f292c;
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
@ -250,8 +249,7 @@ export default {
|
|||
user-select: none;
|
||||
}
|
||||
.title .material-icons {
|
||||
color: cyan;
|
||||
margin-right: 10px;
|
||||
margin-right: 5px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -72,13 +72,15 @@ export default {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
background-color: rgba(43, 43, 43, 0.959);
|
||||
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.507);
|
||||
padding: 10px;
|
||||
border-radius: 20px;
|
||||
background-image: url("../../../../assets/leftPanelBackground.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
.survay-icon .material-icons{
|
||||
color: cyan;
|
||||
color: white;
|
||||
font-size: 120px;
|
||||
}
|
||||
.survay-icon {
|
||||
|
|
@ -97,17 +99,16 @@ export default {
|
|||
.button {
|
||||
padding: 10px;
|
||||
margin: 3px;
|
||||
background: rgb(27, 133, 255);
|
||||
border-radius: 5px;
|
||||
background: #05353b;
|
||||
transition: 0.3s;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
cursor: pointer;
|
||||
}
|
||||
.valid {
|
||||
background: rgba(27, 133, 255, 0.767);
|
||||
background: #05353b;
|
||||
}
|
||||
.valid:hover{
|
||||
background: rgb(27, 133, 255);
|
||||
background: #0f292c;
|
||||
}
|
||||
.warning {
|
||||
background: rgba(255, 27, 27, 0.589)
|
||||
|
|
|
|||
|
|
@ -225,7 +225,7 @@ export default {
|
|||
|
||||
.card {
|
||||
background: black;
|
||||
height: 200px;
|
||||
height: 180px;
|
||||
border-radius: 5px;
|
||||
margin: 5px;
|
||||
padding: 10px;
|
||||
|
|
@ -240,10 +240,10 @@ export default {
|
|||
}
|
||||
.button {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
font-size: 15px;
|
||||
font-size: 17px;
|
||||
margin-top: 15px;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
color: rgba(255, 255, 255, 0.924);
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@ export default {
|
|||
.errors{
|
||||
background: rgb(255, 62, 62);
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,6 +20,10 @@
|
|||
<div v-if="notifications && notifications >0" class="notification">
|
||||
<div class="notification-inner">{{ notifications }}</div>
|
||||
</div>
|
||||
<!-- doesnt work properly. if both channels closed, the chat gets wiped. -->
|
||||
<!-- <div v-else-if="recents" class="material-icons close-button" @click="closeChannel">
|
||||
close
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -32,7 +36,7 @@ import { bus } from "@/main";
|
|||
|
||||
export default {
|
||||
// tree will add padding to the left.
|
||||
props: ["username", "tag", "channelID", "uniqueID", "recipient", "tree"],
|
||||
props: ["username", "tag", "channelID", "uniqueID", "recipient", "tree", "recents"],
|
||||
data() {
|
||||
return {
|
||||
hover: false
|
||||
|
|
@ -79,8 +83,12 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
async closeChannel(event) {
|
||||
this.channelID
|
||||
await channelService.delete(this.channelID)
|
||||
},
|
||||
async openChat(event) {
|
||||
if (event.target.closest(".profile-picture")) return;
|
||||
if (event.target.closest(".profile-picture") || event.target.closest(".close-button")) return;
|
||||
bus.$emit("closeLeftMenu");
|
||||
// dismiss notification if exists
|
||||
// TODO move this into openchat or something :/
|
||||
|
|
@ -221,5 +229,21 @@ export default {
|
|||
opacity: 1;
|
||||
height: 13px;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
flex-shrink: 0;
|
||||
height: 100%;
|
||||
display: none;
|
||||
align-self: center;
|
||||
color: rgb(207, 207, 207);
|
||||
transition: 0.2s;
|
||||
font-size: 18px;
|
||||
}
|
||||
.close-button:hover {
|
||||
color: white;
|
||||
}
|
||||
.friend:hover .close-button {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<FriendsTemplate
|
||||
v-for="(channel, key) of channels"
|
||||
:key="key"
|
||||
:recents="true"
|
||||
:channel-i-d="channel.channelID"
|
||||
:recipient="channel.recipients[0]"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -3,5 +3,8 @@ import {instance, wrapper} from './Api';
|
|||
export default {
|
||||
post ( uniqueID ) {
|
||||
return wrapper(instance().post(`channels/${ uniqueID }`));
|
||||
},
|
||||
delete ( channelID ) {
|
||||
return wrapper(instance().delete(`channels/${ channelID }`));
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue