Browse Source

Added font awesome, and stylized the popup

master
Teknikode 3 years ago
parent
commit
b942158634

+ 4
- 0
css/font-awesome.min.css
File diff suppressed because it is too large
View File


+ 49
- 5
css/popup.css View File

@@ -1,13 +1,57 @@
body {
min-width: 200px;
max-width: 400px;
width: 300px;
font-size: 12px;
background: #fefefe;
color: #333;
font-family: helvetica, arial, sans-serif;
padding-left: 7px;
padding-right: 7px;
overflow-y: hidden;
overflow-x: hidden;
width: calc(100% - 30px);
margin: 0;
}

.clear {
clear: both;
}

.tools-panel {
width: 100%;
padding: 3px;
background: #5b5655;
color: #fefefe;
}

.tools-panel .tools-title {
font-size: 18px;
margin-left: 5px;
float: left;
}

.tools-panel .tools-options {
float: right;
margin-right: 5px;
}

.item-panel {
border: 2px solid #e7e7e7;
margin: 5px;
}

.item-panel .item-button {
margin: 2px;
}

.item-panel .item-details {
margin: 2px;
}

.item-panel .item-details .item-title {
width: 100%;
font-size: 14px;
font-weight: bold;
border-bottom: 2px solid #e7e7e7;
}

.item-panel .item-details .item-url {
width: 100%;
font-size: 12px;
}

BIN
fonts/FontAwesome.otf View File


BIN
fonts/fontawesome-webfont.eot View File


+ 2671
- 0
fonts/fontawesome-webfont.svg
File diff suppressed because it is too large
View File


BIN
fonts/fontawesome-webfont.ttf View File


BIN
fonts/fontawesome-webfont.woff View File


BIN
fonts/fontawesome-webfont.woff2 View File


+ 1
- 1
manifest.json View File

@@ -21,7 +21,7 @@
],
"browser_action": {
"browser_style": true,
"browser_style": false,
"default_icon": {
"16": "images/favicon-16.png",
"48": "images/favicon-48.png"

+ 12
- 4
scripts/background.js View File

@@ -69,6 +69,8 @@ function processMessage(msg, sender, sendResponse) {
sendResponse(true);
break;
case 'get-item':
var foundItem = getProcessItem(msg.id);
sendResponse(foundItem);
break;
case 'get-all-items':
sendResponse(itemList);
@@ -77,20 +79,26 @@ function processMessage(msg, sender, sendResponse) {
}

// Updates the process item list
function addProcessItem(type, url) {
console.log('Added ' + type + ': ' + url);
function addProcessItem(type, data) {
// Update the total process count
processedItemTotal++;
// Create a new object for this process and add it to the main list
var item = { id: processedItemTotal, type: type, url: url };
var item = { id: processedItemTotal, type: type, data: data };
itemList.push(item);
// Update Badge
updateBadge();
}

function getProcessItem(id) {
// Get the item from the master list
var foundItem = itemList.find(function(item) {
return item.id === id;
});
return foundItem;
}

function delProcessItem(id) {
// Remove the item from the master list
itemList = itemList.filter(function(item) {

+ 2
- 2
scripts/paste.js View File

@@ -12,10 +12,10 @@ function createPaste(text) {
browser.tabs.create({ url: pasteUrl });
// Update the browser action
addProcessItem('Paste', pasteUrl);
addProcessItem('paste', response.result);
}
else {
notify("Paste Error", response.error.message);
onError("Paste Error: " + response.error.message);
}
}
});

+ 107
- 20
scripts/popup.js View File

@@ -18,40 +18,127 @@ function fillItems(items) {
else {
// Add a div for each item
items.forEach(function(item) {
if ($('#process-item-' + item.id).length) {
// It already exists, so let's update it
var itemDiv = $('#process-item-' + item.id);
itemDiv.find('#type').html(item.type);
itemDiv.find('#url').html(item.url);
}
else {
var itemDiv = $('#process-item-template');
fillItem(item);
});
}
}

function fillItem(item) {
var itemDiv;
if ($('#process-item-' + item.id).length) {
// It already exists, so let's update it
itemDiv = $('#process-item-' + item.id);
}
else {
// Create a new one depending on the type
switch (item.type) {
case 'shorten':
case 'paste':
case 'upload':
// Setup a new itemDiv
itemDiv = $('#process-item-template').clone();
itemDiv.attr('id', 'process-item-' + item.id);
itemDiv.find('#type').html(item.type);
itemDiv.find('#url').html(item.url);
itemDiv.find('#copy').click(function () {
copyTextToClipboard(item.id);
});
itemDiv.find('#open').click(function () {
openItem(item.url);
openItem(item.id);
});
itemDiv.find('#remove').click(function () {
itemDiv.find('#close').click(function () {
clearItem(item.id);
});
break;
case 'progress':
// Setup a new itemDiv
itemDiv = $('#process-item-progress-template').clone();
itemDiv.attr('id', 'process-item-' + item.id);
itemDiv.find('#close').click(function () {
cancelItem(item.id);
});
break;
case 'error':
// Setup a new itemDiv
itemDiv = $('#process-item-error-template').clone();
itemDiv.attr('id', 'process-item-' + item.id);
// Add to the main div
$('#process-list').append(itemDiv);
itemDiv.find('#close').click(function () {
clearItem(item.id);
});
break;
}
// Add to the main div
$('#process-list').append(itemDiv);
}
// Add the data info depending on the type
switch (item.type) {
case 'shorten':
itemDiv.find('#title').html('Shortened Url');
itemDiv.find('#url').html(item.data.shortUrl);
break;
case 'paste':
itemDiv.find('#title').html('Paste');
itemDiv.find('#url').html(item.data.url);
break;
case 'upload':
itemDiv.find('#title').html('Upload');
var fullUrl = item.data.url;
var key = '';
if (item.data.key != null) {
key = item.data.key;
}
});
if (!item.data.saveKey) {
fullUrl = fullUrl + '#' + key;
}
itemDiv.find('#url').html(fullUrl);
break;
case 'progress':
itemDiv.find('#title').html('Processing...');
itemDiv.find('#progress').html(item.data.progress);
break;
case 'error':
itemDiv.find('#title').html('Error');
itemDiv.find('#error').html(item.data.message);
break;
}
}

function clearItem(itemId) {
var msg = browser.runtime.sendMessage({ cmd: 'del-item', id: itemId });
function cancelItem(id) {
var msg = browser.runtime.sendMessage({ cmd: 'cancel-item', id: id });
msg.then(function() {
$('#process-item-' + id).remove();
}, onError);
}

function clearItem(id) {
var msg = browser.runtime.sendMessage({ cmd: 'del-item', id: id });
msg.then(function() {
$('#process-item-' + itemId).remove();
$('#process-item-' + id).remove();
}, onError);
}

function openItem(url) {
browser.tabs.create({ url: url });
function openItem(id) {
var itemDiv = $('#process-item-' + id);
browser.tabs.create({ url: itemDiv.find('#url').html() });
}

function copyItem(id) {
var itemDiv = $('#process-item-' + id);
copyTextToClipboard(itemDiv.find('#url').html());
}

function copyTextToClipboard(text) {
var copyFrom = document.createElement("textarea");
copyFrom.textContent = text;
var body = document.getElementsByTagName('body')[0];
body.appendChild(copyFrom);
copyFrom.select();
document.execCommand('copy');
body.removeChild(copyFrom);
}

+ 3
- 4
scripts/shorten.js View File

@@ -10,12 +10,11 @@ function shortenUrl(url) {
if (response.result) {
var shortUrl = response.result.shortUrl;
// Update the browser action
addProcessItem('Shortened Url', shortUrl);
notify("Url Shortened", "The Url has been shortened to: " + shortUrl);
// add the new item
addProcessItem('shorten', response.result);
}
else {
notify("Shorten Error", response.error.message);
onError("Shorten Error: " + response.error.message);
}
}
});

+ 11
- 8
scripts/upload.js View File

@@ -8,7 +8,7 @@ function uploadFromUrl(contentUrl) {
encryptFile(xhr.response, xhr.response.type, false, false, false, 256, 128, 1000, uploadFile);
};
xhr.onerror = function(err) {
notify("Upload Error", err);
onError("Upload Error: " + err);
};
xhr.onprogress = function (data) {
if (data.lengthComputable) {
@@ -61,7 +61,7 @@ function encryptFile(fileBlob, contentType, saveKey, serverSideEncrypt, genDelKe
worker.onerror = function (err) {
// An error occured
/* NOTIFY SOMEONE */
notify("Upload Error", err.message);
onError("Upload Error: " + err.message);
}

// Execute worker with data
@@ -141,27 +141,30 @@ function uploadComplete(key, saveKey, evt) {
fullUrl = fullUrl + '#' + key;
}
// Add the saveKey to the results
obj.result.saveKey = saveKey;
// Open a new tab to the upload
browser.tabs.create({ url: fullUrl });
// Update the browser action
addProcessItem('Upload', fullUrl);
// Add the completed item
addProcessItem('upload', obj.result);
}
else
{
if (obj.error != null) {
notify("Upload Error", obj.error.message);
onError("Upload Error: " + obj.error.message);
}
else {
notify("Upload Error", 'Unable to Upload File');
onError('Upload Error: Unable to Upload File');
}
}
}

function uploadFailed(evt) {
notify("Upload Error", 'Upload Failed');
onError('Upload Error: Upload Failed');
}

function uploadCanceled(evt) {
notify("Upload Error", 'Upload Canceled');
onError('Upload Error: Upload Canceled');
}

+ 38
- 6
views/popup.html View File

@@ -4,6 +4,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/font-awesome.min.css"/>
<link rel="stylesheet" href="../css/common.css"/>
<link rel="stylesheet" href="../css/popup.css"/>
@@ -12,22 +13,53 @@

<body>
<div class="panel">
<div id="process-list"></div>
<div id="extraTools">
<button id="settings">Settings</button>
<div id="extraTools" class="tools-panel">
<span class="tools-title">Teknik Services</span>
<span class="tools-options">
<button id="settings" class="tools-button"><i class="fa fa-cog"></i></button>
</span>
<div class="clear"></div>
</div>
<div id="process-list"></div>
</div>
<!-- Templates for panels -->
<div id="templates" style="display: none">
<!-- Completed Item Template -->
<div id="process-item-template" class="item-panel">
<div class="item-details">
<h2 class="item-title" id="type"></h2>
<div class="item-title" id="title"></div>
<div class="item-url" id="url"></div>
</div>
<div class="item-actions">
<button id="open" class="item-button">Open</button>
<button id="remove" class="item-button">Remove</button>
<button id="copy" class="item-button"><i class="fa fa-clipboard"></i></button>
<button id="open" class="item-button"><i class="fa fa-external-link"></i></button>
<button id="close" class="item-button"><i class="fa fa-times-circle"></i></button>
</div>
</div>
<!-- In Progress Template -->
<div id="process-item-progress-template" class="item-panel">
<div class="item-details">
<div class="item-title" id="title"></div>
<div class="item-progress" id="progress"></div>
</div>
<div class="item-actions">
<button id="close" class="item-button"><i class="fa fa-ban"></i></button>
</div>
</div>
<!-- Error Template -->
<div id="process-item-error-template" class="item-panel">
<div class="item-details">
<div class="item-title" id="title"></div>
<div class="item-error" id="error"></div>
</div>
<div class="item-actions">
<button id="close" class="item-button"><i class="fa fa-times-circle"></i></button>
</div>
</div>
</div>

Loading…
Cancel
Save