Переглянути джерело

Fixed up popup UI and initial manual upload mechanism

master
Teknikode 3 роки тому
джерело
коміт
bbe17766b7
6 змінених файлів з 112 додано та 44 видалено
  1. 3
    0
      css/common.css
  2. 53
    16
      css/popup.css
  3. 2
    1
      manifest.json
  4. 3
    0
      scripts/background.js
  5. 18
    1
      scripts/popup.js
  6. 33
    26
      views/popup.html

+ 3
- 0
css/common.css Переглянути файл

@@ -0,0 +1,3 @@
.btn-danger {
color: #d9534f;
}

+ 53
- 16
css/popup.css Переглянути файл

@@ -13,45 +13,82 @@ body {
clear: both;
}

.btn {
cursor: pointer;
}

.btn:hover {
opacity: 0.6;
}

/***********************
Tools Panel
************************/
.tools-panel {
width: 100%;
padding: 3px;
background: #5b5655;
background: #428bca;
color: #fefefe;
}

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

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

.tools-panel .tools-options .btn {
font-size: 18px;
margin-left: 8px;
margin-right: 4px;
}

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

.item-panel .item-button {
margin: 2px;
.item-panel .item-title {
border-bottom: 2px solid #e7e7e7;
}

.item-panel .item-details {
margin: 2px;
.item-panel .item-title .title-text {
float: left;
margin: 5px;
font-size: 14px;
font-weight: bold;
}

.item-panel .item-details .item-title {
width: 100%;
.item-panel .item-title .item-panel-close {
float: right;
margin-top: 5px;
margin-right: 7px;
font-size: 14px;
font-weight: bold;
border-bottom: 2px solid #e7e7e7;
color: #d9534f;
}

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

.item-panel .item-details .item-content {
float:left;
margin: 5px;
font-size: 16px;
}

.item-panel .item-details .item-actions {
float: left;
padding: 6px 8px 6px 6px;
border-right: 1px solid #e7e7e7;
}

.item-panel .item-details .item-actions .btn {
font-size: 16px;
margin-left: 5px;
}

+ 2
- 1
manifest.json Переглянути файл

@@ -17,7 +17,8 @@
"storage",
"notifications",
"clipboardRead",
"clipboardWrite"
"clipboardWrite",
"tabs"
],
"browser_action": {

+ 3
- 0
scripts/background.js Переглянути файл

@@ -75,6 +75,9 @@ function processMessage(msg, sender, sendResponse) {
case 'get-all-items':
sendResponse(itemList);
break;
case 'upload-file':
uploadFromUrl(msg.file);
break;
}
}


+ 18
- 1
scripts/popup.js Переглянути файл

@@ -2,9 +2,26 @@ $(document).ready(function () {
$('#settings').click(function () {
var opening = browser.runtime.openOptionsPage();
opening.then(onOpened, onError);
});
$('#upload').click(function (e) {
// Prompt for uploading a file
$('#files').click();
});
});

document.getElementById('files').addEventListener('change', function (evt) {
var files = evt.target.files;
for (var i = 0; i < files.length; i++) {
var f = files[i];
var fileUrl = window.URL.createObjectURL(f);
browser.runtime.sendMessage({
cmd: 'upload-file',
file: fileUrl
});
}
}, false);

// When loaded, call the background to add processes
var sendingMessage = browser.runtime.sendMessage({
cmd: 'get-all-items'
@@ -99,7 +116,7 @@ function fillItem(item) {
itemDiv.find('#url').html(fullUrl);
break;
case 'progress':
itemDiv.find('#title').html('Processing...');
itemDiv.find('#title').html('Processing ' + item.type + '...');
itemDiv.find('#progress').html(item.data.progress);
break;
case 'error':

+ 33
- 26
views/popup.html Переглянути файл

@@ -13,10 +13,11 @@

<body>
<div class="panel">
<div id="extraTools" class="tools-panel">
<div 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 id="upload" class="btn"><i class="fa fa-upload"></i></span>
<span id="settings" class="btn"><i class="fa fa-cog"></i></span>
</span>
<div class="clear"></div>
</div>
@@ -26,44 +27,50 @@
<!-- Templates for panels -->
<div id="templates" style="display: none">
<!-- Completed Item Template -->
<div id="process-item-template" class="item-panel">
<div class="item-details">
<div class="item-title" id="title"></div>
<div class="item-url" id="url"></div>
</div>
<div class="item-actions">
<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 class="item-panel" id="process-item-template">
<div class="item-title">
<div class="title-text" id="title"></div>
<span class="btn item-panel-close" id="close"><i class="fa fa-times-circle"></i></span>
<div class="clear"></div>
</div>
<div class="item-details">
<div class="item-actions">
<span class="btn" id="copy"><i class="fa fa-clipboard"></i></span>
<span class="btn" id="open"><i class="fa fa-external-link"></i></span>
</div>
<div class="item-content" id="url"></div>
<div class="clear"></div>
</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 class="item-panel" id="process-item-progress-template">
<div class="item-title">
<div class="title-text" id="title"></div>
<span class="btn item-panel-close" id="close"><i class="fa fa-ban"></i></span>
<div class="clear"></div>
</div>
<div class="item-actions">
<button id="close" class="item-button"><i class="fa fa-ban"></i></button>
<div class="item-details">
<div class="item-content" id="progress"></div>
</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 class="item-panel" id="process-item-error-template">
<div class="item-title">
<div class="title-text" id="title"></div>
<span class="btn item-panel-close" id="close"><i class="fa fa-ban"></i></span>
<div class="clear"></div>
</div>
<div class="item-actions">
<button id="close" class="item-button"><i class="fa fa-times-circle"></i></button>
<div class="item-details">
<div class="item-content" id="error"></div>
</div>
</div>
</div>
<!-- hidden form for uploads -->
<input type="file" name="files[]" style="opacity: 0; height: 0px;" id="files" multiple />
<script type="application/javascript" src="../scripts/JQuery/jquery-3.1.1.min.js"></script>
<script type="application/javascript" src="../scripts/Mozilla/browser-polyfill.js"></script>
<script type="application/javascript" src="../scripts/common.js"></script>

Завантаження…
Відмінити
Зберегти