pludi
/
usrspace-browser-addon
forked from XimeX/usrspace-browser-addon
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add icons and improve styling

This commit is contained in:
Thomas Rupprecht 2018-12-27 14:43:34 +01:00
parent 9381c4851a
commit 92c2e8ffd6
9 changed files with 45 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -18,5 +18,9 @@ $ git clone https://gitlab.usrspace.at/XimeX/usrspace-browser-addon.git
- Open `manifest.json`
- Use it
## Credits
Used icons from FontAwesome
https://fontawesome.com/license
## License
MIT

1
icons/font-awesome/clock-regular.svg Normal file
View File

@ -0,0 +1 @@
<svg aria-hidden="true" data-prefix="far" data-icon="clock" class="svg-inline--fa fa-clock fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 536 B

1
icons/font-awesome/cloud-solid.svg Normal file
View File

@ -0,0 +1 @@
<svg aria-hidden="true" data-prefix="fas" data-icon="cloud" class="svg-inline--fa fa-cloud fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 466 B

1
icons/font-awesome/gitlab-brands.svg Normal file
View File

@ -0,0 +1 @@
<svg aria-hidden="true" data-prefix="fab" data-icon="gitlab" class="svg-inline--fa fa-gitlab fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M29.782 199.732L256 493.714 8.074 309.699c-6.856-5.142-9.712-13.996-7.141-21.993l28.849-87.974zm75.405-174.806c-3.142-8.854-15.709-8.854-18.851 0L29.782 199.732h131.961L105.187 24.926zm56.556 174.806L256 493.714l94.257-293.982H161.743zm349.324 87.974l-28.849-87.974L256 493.714l247.926-184.015c6.855-5.142 9.711-13.996 7.141-21.993zm-85.404-262.78c-3.142-8.854-15.709-8.854-18.851 0l-56.555 174.806h131.961L425.663 24.926z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 636 B

1
icons/font-awesome/home-solid.svg Normal file
View File

@ -0,0 +1 @@
<svg aria-hidden="true" data-prefix="fas" data-icon="home" class="svg-inline--fa fa-home fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M488 312.7V456c0 13.3-10.7 24-24 24H348c-6.6 0-12-5.4-12-12V356c0-6.6-5.4-12-12-12h-72c-6.6 0-12 5.4-12 12v112c0 6.6-5.4 12-12 12H112c-13.3 0-24-10.7-24-24V312.7c0-3.6 1.6-7 4.4-9.3l188-154.8c4.4-3.6 10.8-3.6 15.3 0l188 154.8c2.7 2.3 4.3 5.7 4.3 9.3zm83.6-60.9L488 182.9V44.4c0-6.6-5.4-12-12-12h-56c-6.6 0-12 5.4-12 12V117l-89.5-73.7c-17.7-14.6-43.3-14.6-61 0L4.4 251.8c-5.1 4.2-5.8 11.8-1.6 16.9l25.5 31c4.2 5.1 11.8 5.8 16.9 1.6l235.2-193.7c4.4-3.6 10.8-3.6 15.3 0l235.2 193.7c5.1 4.2 12.7 3.5 16.9-1.6l25.5-31c4.2-5.2 3.4-12.7-1.7-16.9z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 749 B

1
icons/font-awesome/wikipedia-w-brands.svg Normal file
View File

@ -0,0 +1 @@
<svg aria-hidden="true" data-prefix="fab" data-icon="wikipedia-w" class="svg-inline--fa fa-wikipedia-w fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M640 51.2l-.3 12.2c-28.1.8-45 15.8-55.8 40.3-25 57.8-103.3 240-155.3 358.6H415l-81.9-193.1c-32.5 63.6-68.3 130-99.2 193.1-.3.3-15 0-15-.3C172 352.3 122.8 243.4 75.8 133.4 64.4 106.7 26.4 63.4.2 63.7c0-3.1-.3-10-.3-14.2h161.9v13.9c-19.2 1.1-52.8 13.3-43.3 34.2 21.9 49.7 103.6 240.3 125.6 288.6 15-29.7 57.8-109.2 75.3-142.8-13.9-28.3-58.6-133.9-72.8-160-9.7-17.8-36.1-19.4-55.8-19.7V49.8l142.5.3v13.1c-19.4.6-38.1 7.8-29.4 26.1 18.9 40 30.6 68.1 48.1 104.7 5.6-10.8 34.7-69.4 48.1-100.8 8.9-20.6-3.9-28.6-38.6-29.4.3-3.6 0-10.3.3-13.6 44.4-.3 111.1-.3 123.1-.6v13.6c-22.5.8-45.8 12.8-58.1 31.7l-59.2 122.8c6.4 16.1 63.3 142.8 69.2 156.7L559.2 91.8c-8.6-23.1-36.4-28.1-47.2-28.3V49.6l127.8 1.1.2.5z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 921 B

28
popup/index.css
View File

@ -1,4 +1,32 @@
h2 {
margin-left: 8px;
margin-right: 8px;
}
.panel-list-item > .icon {
text-align: center;
width: 23px;
margin-right: 4px;
}
.panel-list-item > .icon > img {
vertical-align: text-bottom;
}
#calendar {
margin: 0 8px;
}
#calendar > img {
vertical-align: text-bottom;
margin-right: 4px;
}
#space-api {
margin: 0;
padding: 0 8px;
height: 128px;
overflow-y: scroll;
}
#space-api code {
font-family: monospace;
font-size: 10px;
}

10
popup/index.html
View File

@ -13,22 +13,22 @@
<h2>Links</h2>
<div class="panel-section panel-section-list">
<div class="panel-list-item link" data-url="https://usrspace.at/">
<div class="icon"><img src="../icons/logo.svg" width="19" height="19" alt="/usr/space" /></div>
<div class="icon"><img src="../icons/font-awesome/home-solid.svg" width="19" height="19" alt="Home" /></div>
<div class="text">Homepage</div>
<div class="text-shortcut"></div>
</div>
<div class="panel-list-item link" data-url="https://www.usrspace.at/w/">
<div class="icon"></div>
<div class="icon"><img src="../icons/font-awesome/wikipedia-w-brands.svg" width="19" height="19" alt="Wiki" /></div>
<div class="text">Wiki</div>
<div class="text-shortcut"></div>
</div>
<div class="panel-list-item link" data-url="https://gitlab.usrspace.at/">
<div class="icon"></div>
<div class="icon"><img src="../icons/font-awesome/gitlab-brands.svg" width="19" height="19" alt="Gitlab" /></div>
<div class="text">Gitlab</div>
<div class="text-shortcut"></div>
</div>
<div class="panel-list-item link" data-url="https://cloud.usrspace.at/">
<div class="icon"></div>
<div class="icon"><img src="../icons/font-awesome/cloud-solid.svg" width="19" height="19" alt="Cloud" /></div>
<div class="text">NextCloud</div>
<div class="text-shortcut"></div>
</div>
@ -36,7 +36,7 @@
<h2>Nächster Termine</h2>
<div id="calendar">loading...</div>
<h2>Infos</h2>
<pre><code id="space-api">loading...</code></pre>
<pre id="space-api"><code>loading...</code></pre>
<script src="index.js"></script>
</body>

5
popup/index.js
View File

@ -23,7 +23,8 @@ const updateNextEvent = (nextEvent) => {
const strongElement = document.createElement('strong');
strongElement.textContent = nextEvent.name;
const dateNode = document.createTextNode(' ' + new Date(nextEvent.begin).toLocaleString());
calendarElement.innerText = '';
// calendarElement.innerText = '';
calendarElement.innerHTML = '<img src="../icons/font-awesome/clock-regular.svg" width="19" height="19" alt="Clock" />';
calendarElement.append(strongElement);
calendarElement.append(dateNode);
if (nextEvent.location) {
@ -33,7 +34,7 @@ const updateNextEvent = (nextEvent) => {
};
const updateSpaceApiJson = (spaceApi) => {
const spaceApiElement = document.getElementById('space-api');
const spaceApiElement = document.querySelector('#space-api code');
const json = JSON.stringify(spaceApi, null, 2).replace(/ /g, '&nbsp;').replace(/\n/g, '<br/>');
spaceApiElement.innerHTML = json;
// const jsonNode = document.createTextNode(json);