supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move styles to component.

Browse Source
This commit is contained in:
Richard Lewis 2020-01-11 17:40:18 +02:00
parent 0b5cbceffd
commit 606c62dc70
2 changed files with 62 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
client/components/NetworkList.vue
View File

@ -117,6 +117,66 @@
</div> </div>
</template> </template>
<style>
.jump-to-input {
margin: 8px;
position: relative;
}
.jump-to-input .input {
margin: 0;
width: 100%;
border: 0;
color: inherit;
background-color: rgba(255, 255, 255, 0.1);
padding-right: 35px;
}
.jump-to-input .input::placeholder {
color: rgba(255, 255, 255, 0.35);
}
.jump-to-input::before {
content: "\f002"; /* http://fontawesome.io/icon/search/ */
color: rgba(255, 255, 255, 0.35);
position: absolute;
right: 8px;
top: 0;
bottom: 0;
pointer-events: none;
line-height: 35px !important;
}
.jump-to-results {
margin: 0;
padding: 0;
list-style: none;
overflow: auto;
}
.jump-to-results .no-results {
margin: 14px 8px;
text-align: center;
}
.jump-to-results .channel-list-item.active {
cursor: pointer;
}
.jump-to-results .channel-list-item .add-channel,
.jump-to-results .channel-list-item .close-tooltip {
display: none;
}
.jump-to-results .channel-list-item[data-type="lobby"] {
padding: 8px 14px;
}
.jump-to-results .channel-list-item[data-type="lobby"]::before {
content: "\f233";
}
</style>
<script> <script>
import Mousetrap from "mousetrap"; import Mousetrap from "mousetrap";
import Draggable from "vuedraggable"; import Draggable from "vuedraggable";
@ -180,19 +240,15 @@ export default {
this.setActiveSearchItem(); this.setActiveSearchItem();
}, },
}, },
mounted() {
Mousetrap.bind("alt+j", this.toggleSearch);
},
destroyed() {
Mousetrap.unbind("alt+j", this.toggleSearch);
},
mounted() { mounted() {
Mousetrap.bind("alt+shift+right", this.expandNetwork); Mousetrap.bind("alt+shift+right", this.expandNetwork);
Mousetrap.bind("alt+shift+left", this.collapseNetwork); Mousetrap.bind("alt+shift+left", this.collapseNetwork);
Mousetrap.bind("alt+j", this.toggleSearch);
}, },
beforeDestroy() { beforeDestroy() {
Mousetrap.unbind("alt+shift+right", this.expandNetwork); Mousetrap.unbind("alt+shift+right", this.expandNetwork);
Mousetrap.unbind("alt+shift+left", this.collapseNetwork); Mousetrap.unbind("alt+shift+left", this.collapseNetwork);
Mousetrap.unbind("alt+j", this.toggleSearch);
}, },
methods: { methods: {
expandNetwork() { expandNetwork() {

59
client/css/style.css
View File

@ -511,7 +511,6 @@ p {
content: "\f0da"; /* http://fontawesome.io/icon/caret-right/ */ content: "\f0da"; /* http://fontawesome.io/icon/caret-right/ */
} }
.jump-to-input::before,
#chat .count::before { #chat .count::before {
color: #cfcfcf; color: #cfcfcf;
content: "\f002"; /* http://fontawesome.io/icon/search/ */ content: "\f002"; /* http://fontawesome.io/icon/search/ */
@ -2805,61 +2804,3 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
#chat table.channel-list .topic { #chat table.channel-list .topic {
white-space: pre-wrap; white-space: pre-wrap;
} }
/* Jump to feature WIP styles */
.jump-to-input {
margin: 8px;
position: relative;
}
.jump-to-input .input {
margin: 0;
width: 100%;
border: 0;
color: inherit;
background-color: rgba(255, 255, 255, 0.1);
padding-right: 35px;
}
.jump-to-input .input::placeholder {
color: rgba(255, 255, 255, 0.35);
}
.jump-to-input::before {
color: rgba(255, 255, 255, 0.35);
position: absolute;
right: 8px;
top: 0;
bottom: 0;
pointer-events: none;
line-height: 35px;
}
.jump-to-results {
margin: 0;
padding: 0;
list-style: none;
overflow: auto;
}
.jump-to-results .no-results {
margin: 14px 8px;
text-align: center;
}
.jump-to-results .channel-list-item.active {
cursor: pointer;
}
.jump-to-results .channel-list-item .add-channel,
.jump-to-results .channel-list-item .close-tooltip {
display: none;
}
.jump-to-results .channel-list-item[data-type="lobby"] {
padding: 8px 14px;
}
.jump-to-results .channel-list-item[data-type="lobby"]::before {
content: "\f233";
}