misc/tagslice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tag styling

Browse Source
This commit is contained in:
Ian Gulliver
2017-06-12 22:28:42 +00:00
parent c9a6ec4d39
commit 717452d2f2
2 changed files with 32 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
tagslice.css
View File

@@ -1,11 +1,12 @@
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500');
@import url('https://fonts.googleapis.com/css?family=Roboto');
:root {
/* Highly approximate color names from our pallette */
--orange: rgb(255,153,0);
--black: rgb(66,66,66);
--white: rgb(233,233,233);
--grey: rgb(188,188,188);
--white: rgb(255,255,255);
--lightgrey: rgb(233,233,233);
--darkgrey: rgb(188,188,188);
--blue: rgb(50,153,187);
}
@@ -38,14 +39,29 @@ tagsection {
border-bottom: 1px solid var(--orange);
flex-direction: column
flex-direction: column;
}
tagsectiontitle {
tag {
display: block;
padding: 3px;
border: 1px solid var(--darkgrey);
border-radius: 8px;
background-color: var(--lightgrey);
color: var(--blue);
font-weight: 500;
font-family: 'Roboto';
font-size: small;
text-align: center;
cursor: move;
user-select: none;
}
tag.placeholder {
opacity: 0.7;
}
objectlist {

15
tagslice.js
View File

@@ -23,15 +23,16 @@ class TagSlice {
buildTagList_(container) {
let taglist = this.createElement_(container, 'taglist');
this.tagInclude_ = this.buildTagSection_(taglist, 'Include');
this.tagExclude_ = this.buildTagSection_(taglist, 'Exclude');
this.tagSortAsc_ = this.buildTagSection_(taglist, 'Sort (ascending)')
this.tagSortDesc_ = this.buildTagSection_(taglist, 'Sort (descending)')
this.tagInclude_ = this.buildTagSection_(taglist, 'include');
this.tagExclude_ = this.buildTagSection_(taglist, 'exclude');
this.tagSortAsc_ = this.buildTagSection_(taglist, 'sort ⇣')
this.tagSortDesc_ = this.buildTagSection_(taglist, 'sort ⇡')
}
buildTagSection_(container, title) {
let tagsection = this.createElement_(container, 'tagsection');
let tagsectiontitle = this.createElement_(tagsection, 'tagsectiontitle', title);
this.buildTag_(tagsection, title).classList.add('placeholder');
return tagsection;
}
buildObjectList_(container) {
@@ -39,6 +40,10 @@ class TagSlice {
container.appendChild(objectlist);
}
buildTag_(container, name) {
return this.createElement_(container, 'tag', name);
}
loadJson_() {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'tagslice.json');