thedevs-network/kutt-extension
1
0
Fork 0
mirror of https://github.com/thedevs-network/kutt-extension.git synced 2026-02-03 13:53:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

UI improvements

Browse Source
This commit is contained in:
abhijithvijayan
2019-01-06 14:37:01 +05:30
parent 817e2c150c
commit 9a77f88210
5 changed files with 22 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/popup.html
View File

@@ -16,10 +16,10 @@
<img class="main__logo" src="assets/logo.png">
</li>
<li class="github__content-holder">
<a href="https://github.com/abhijithvijayan/kuttUrl-Chrome/" target="_blank" rel="noopener">
<a href="https://github.com/abhijithvijayan/kuttUrl-Chrome/" target="_blank" rel="noopener" title="GitHub">
<img class="github__logo" src="assets/github.svg"></a>
</li>
<li class="options__content-holder" id="options__content-holder">
<li class="options__content-holder" id="options__content-holder" title="Options">
<a href="options.html" target="_blank" rel="noopener">
<img class="settings__logo" src="assets/settings.svg"></a>
</li>
@@ -29,19 +29,19 @@
<div class="url__content--holder">
<h4 id="url__content-inner">Shortening...</h4>
</div>
<ul class="buttons__content--holder">
<ul class="buttons__content--holder d-none">
<li class="copy__content--holder">
<img id="button__copy" src="assets/copy.svg" alt="copy" title="Copy" style="display: none;" />
<img id="button__copy" src="assets/copy.svg" alt="copy" title="Copy"/>
</li>
<li class="details__content--holder">
<img id="button__details" src="assets/arrow.svg" alt="copy" title="Details" style="display: none;" />
<img id="button__details" src="assets/arrow.svg" alt="copy" title="Details" />
</li>
<li class="qrbtn__content--holder">
<img id="button__qrcode" src="assets/qrcode.svg" alt="copy" title="QR code" style="display: none;" />
<img id="button__qrcode" src="assets/qrcode.svg" alt="copy" title="QR code" />
</li>
</ul>
<div class="qrcode__content--holder">
<img id="qr_code" src="#" alt="QRCode" style="display: none;" />
<div class="qrcode__content--holder d-none">
<img id="qr_code" src="#" alt="QRCode" />
</div>
</div>
</div>

16
src/scripts/popup.js
View File

@@ -29,10 +29,8 @@ document.addEventListener('DOMContentLoaded', () => {
document.getElementById('url__content-inner').textContent = shortUrl;
// fetch qrcode from http://goqr.me
document.getElementById('qr_code').src = `${qrcode__src}${shortUrl}`;
// show buttons
show('button__copy');
show('button__details');
show('button__qrcode');
// show buttons
toggleDisplay('.buttons__content--holder');
}
});
}
@@ -80,12 +78,14 @@ document.addEventListener('DOMContentLoaded', () => {
// 4. QR Code
document.getElementById('button__qrcode').addEventListener('click', () => {
// document.getElementById('button__qrcode').style = "display: none;";
show('qr_code');
toggleDisplay('.qrcode__content--holder');
});
// 5. elements visiblity function
function show(id) {
document.getElementById(id).style = '';
function toggleDisplay(className) {
let element = document.querySelector(className);
element.classList.toggle('d-none');
}
});

4
src/styles/_variables.scss
View File

@@ -7,4 +7,8 @@ $color-light-blue: #4d5bfa;
*, *:before, *:after {
box-sizing: border-box;
}
.d-none {
display: none !important;
}

1
src/styles/options.scss
View File

@@ -58,6 +58,7 @@ body {
padding: 12px;
margin-top: 1.4em;
&:hover {
cursor: pointer;
background-color: $color-light-blue;
}
}

2
src/styles/popup.scss
View File

@@ -18,7 +18,7 @@ body {
margin: 10px 6%;
.navbar {
.navbar__main {
margin-bottom: 0px;
margin: 0;
padding-left: 0;
list-style-type: none;
li {