diff --git a/appinfo/info.xml b/appinfo/info.xml
index 4faa636..79541fd 100644
--- a/appinfo/info.xml
+++ b/appinfo/info.xml
@@ -5,7 +5,7 @@
Aria2 and youtube-dl web gui for nextcloud
built-in torrent search;Start and stop Aria2 process, manage Aria2 from the web;
Download videos from youtube, twitter and other sites;
- 0.2.0
+ 0.2.5
agpl
jiaxinhuang
NCDownloader
diff --git a/css/style.css b/css/style.css
deleted file mode 100644
index 9d2ff7d..0000000
--- a/css/style.css
+++ /dev/null
@@ -1,296 +0,0 @@
-.action-item {
- position: relative;
-}
-
-a {
- color : #337ab7;
- text-decoration: none;
-}
-
-#ncdownloader-form-wrapper .form-input-wrapper {
- display : flex;
- flex-flow: row nowrap;
-}
-
-#ncdownloader-form-wrapper .form-input-wrapper select,
-#ncdownloader-form-wrapper .form-input-wrapper input {
- justify-content: left;
-}
-
-a:hover,
-a:focus {
- color : #23527c;
- text-decoration: underline;
-}
-
-a:focus {
- outline : 5px auto -webkit-focus-ring-color;
- outline-offset: -2px;
-}
-
-div .number {
- background : none repeat scroll 0 0 #5f5853;
- border-radius: 999px;
- color : #FFFFFF;
- display : inline-block;
- font-size : 15px;
- font-style : italic;
- height : 20px;
- line-height : 20px;
- margin-right : 10px;
- padding : 0 8px;
-}
-
-#ncdownloader-settings-form input[type=text] {
- width: 160px;
-}
-
-#ncdownloader-form-wrapper input[type=text] {
- padding: 0px 5px;
- flex : auto;
-}
-
-#ncdownloader-table-data .table-cell {
- padding-left: 4px;
-}
-
-.icon-power {
- background-image: url('../img/power.svg');
-}
-
-.icon-purge {
- background-image: url('../img/trash.svg');
-}
-
-.icon-unpause {
- background-image: url('../img/play.svg');
-}
-.icon-refresh {
- background-image: url('../img/refresh.svg');
-}
-
-#ncdownloader-action-links-container {
- position: relative;
-}
-
-#ncdownloader-action-links-container ul {
- background-color: #ededed;
-}
-
-#ncdownloader-action-links-container .action-link-item a:hover {
- background-color: #c2afaf;
-}
-
-#ncdownloader-message-banner.success,
-.message-banner.success {
- color : #3c763d;
- background-color: #dff0d8;
- border-color : #d6e9c6;
- width : fit-content;
-}
-
-#ncdownloader-message-banner.error,
-.message-banner.error {
- color : #a94442;
- background-color: #f2dede;
- border-color : #ebccd1;
- width : fit-content;
-}
-
-
-
-.action-links {
- /*visibility: hidden;*/
- display : none;
- position : absolute;
- background-color: #f1f1f1;
- min-width : 60px;
- box-shadow : 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
- z-index : 9999;
-}
-
-.action-link-item a {
- color : black;
- padding : 6px 6px;
- text-decoration: none;
- display : block;
-}
-
-.app-ncdownloader,
-#ncdownloader-content {
- width: 100%;
-}
-
-.ncdownloader-content-wrapper {
- width : 100%;
- padding-top: 0.3em;
-}
-
-#ncdownloader-form-wrapper {
- width: 100%;
-}
-
-
-#ncdownloader-table-content {
- width: 100%;
-}
-
-.app-ncdownloader #app-content #app-content-wrapper {
- flex-wrap: wrap;
-}
-
-#app-content-wrapper #ncdownloader-table-content thead>tr {
- height : 30px;
- background-color: #eee;
-}
-
-#app-content-wrapper #ncdownloader-table-content thead>tr>th {
- font-style : italic;
- font-weight : bold;
- padding : 2px 0 2px 5px;
- border-bottom: 1px solid #ddd;
- text-align : left;
-}
-
-#ncdownloader-table-content thead.table-heading th {
- border-left: 1px solid rgb(216, 202, 202);
-}
-
-#app-content-wrapper #ncdownloader-table-content .table-cell {
- border-bottom: 1px solid #9d9595;
- border-left : 1px solid #eee;
-
-}
-
-.app-navigation-entry-bullet {
- background-color: rgb(80, 80, 173);
-}
-
-.notinstalled {
- color: red;
-}
-
-.checkboxes label {
- display: inline-block;
- padding-right: 10px;
- white-space: nowrap;
- }
- .checkboxes input {
- vertical-align: middle;
- }
- .checkboxes label span {
- vertical-align: middle;
- }
-
- #ncdownloader-content > #app-navigation:not(.vue) > ul > li > a {
- padding: 0 12px 0 44px;
-}
-
-@media only screen and (min-width: 800px) {}
-
-@media only screen and (max-width: 1024px) {
- #ncdownloader-form-wrapper {
- position : relative;
- margin-top: 2em;
- }
- #ncdownloader-settings-form input[type=text] {
- width: 135px;
- }
-}
-
-
-/* from bootstrap */
-.visually-hidden,
-.visually-hidden-focusable:not(:focus):not(:focus-within) {
- position : absolute !important;
- width : 1px !important;
- height : 1px !important;
- padding : 0 !important;
- margin : -1px !important;
- overflow : hidden !important;
- clip : rect(0, 0, 0, 0) !important;
- white-space: nowrap !important;
- border : 0 !important;
-}
-
-@-webkit-keyframes spinner-border {
- to {
- transform: rotate(360deg)
- /* rtl :ignore */
- ;
- }
-}
-
-@keyframes spinner-border {
- to {
- transform: rotate(360deg)
- /* rtl :ignore */
- ;
- }
-}
-
-.spinner-border {
- display : inline-block;
- width : 2rem;
- height : 2rem;
- vertical-align : -0.125em;
- border : 0.25em solid currentColor;
- border-right-color: transparent;
- border-radius : 50%;
- -webkit-animation : 0.75s linear infinite spinner-border;
- animation : 0.75s linear infinite spinner-border;
-}
-
-.spinner-border-sm {
- width : 1rem;
- height : 1rem;
- border-width: 0.2em;
-}
-
-@-webkit-keyframes spinner-grow {
- 0% {
- transform: scale(0);
- }
-
- 50% {
- opacity : 1;
- transform: none;
- }
-}
-
-@keyframes spinner-grow {
- 0% {
- transform: scale(0);
- }
-
- 50% {
- opacity : 1;
- transform: none;
- }
-}
-
-.spinner-grow {
- display : inline-block;
- width : 2rem;
- height : 2rem;
- vertical-align : -0.125em;
- background-color : currentColor;
- border-radius : 50%;
- opacity : 0;
- -webkit-animation: 0.75s linear infinite spinner-grow;
- animation : 0.75s linear infinite spinner-grow;
-}
-
-.spinner-grow-sm {
- width : 1rem;
- height: 1rem;
-}
-
-@media (prefers-reduced-motion: reduce) {
-
- .spinner-border,
- .spinner-grow {
- -webkit-animation-duration: 1.5s;
- animation-duration : 1.5s;
- }
-}
\ No newline at end of file
diff --git a/css/table.css b/css/table.css
deleted file mode 100644
index f598935..0000000
--- a/css/table.css
+++ /dev/null
@@ -1,81 +0,0 @@
-#ncdownloader-table-wrapper {
- display: flex;
- flex-flow: column nowrap;
- background-color: white;
- width: 100%;
- margin: 0 auto;
- border-radius: 4px;
- /*border : 1px solid #DADADA;*/
- box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.08);
- justify-content: center;
- align-items: center;
- background-color: #fafafa; }
- #ncdownloader-table-wrapper .table-row,
- #ncdownloader-table-wrapper .table-row-search {
- display: flex;
- flex-flow: row nowrap;
- width: 100%;
- border-bottom: 1px solid #dadada; }
- #ncdownloader-table-wrapper section.table-body,
- #ncdownloader-table-wrapper section.table-heading {
- width: 100%;
- display: flex;
- flex-flow: column nowrap; }
- #ncdownloader-table-wrapper .table-row,
- #ncdownloader-table-wrapper .table-row-search {
- display: flex;
- flex-flow: row nowrap;
- width: 100%;
- border-bottom: 1px solid #dadada; }
- #ncdownloader-table-wrapper .table-heading .table-row,
- #ncdownloader-table-wrapper .table-heading .table-row-search {
- background-color: #ececec;
- color: #3e3e3e;
- font-weight: bold; }
- #ncdownloader-table-wrapper .table-heading .table-cell:hover {
- cursor: pointer;
- background-color: #c4afaf;
- /* box-shadow : 0px 1px 4px rgba(0, 0, 0, .08); */ }
- #ncdownloader-table-wrapper .table-cell {
- display: flex;
- flex-flow: column wrap;
- flex: 1;
- font-size: 14px;
- padding: 8px 3px;
- justify-content: left;
- align-items: left;
- transition: all 0.15s ease-in-out; }
- #ncdownloader-table-wrapper .table-cell:first-child {
- flex: 1 1 30%; }
- #ncdownloader-table-wrapper .table-cell:last-child {
- flex: 0 1 7%; }
- #ncdownloader-table-wrapper #table-cell-status,
- #ncdownloader-table-wrapper .table-heading-status {
- flex: 0 1 15%;
- overflow: hidden;
- text-overflow: ellipsis; }
- #ncdownloader-table-wrapper .table-cell:hover {
- cursor: pointer;
- background-color: #F0F0F0;
- /* box-shadow : 0px 1px 4px rgba(0, 0, 0, .08); */ }
- #ncdownloader-table-wrapper .row-sub-container {
- display: flex;
- flex-flow: column nowrap;
- flex: 1; }
- #ncdownloader-table-wrapper .row-sub-container .table-cell {
- padding: 8px 0;
- border-bottom: 1px solid #dadada; }
- #ncdownloader-table-wrapper .table-row:last-child,
- #ncdownloader-table-wrapper .row-sub-container .table-cell:last-child {
- border-bottom: 0; }
-
-@media only screen and (max-width: 1024px) {
- #ncdownloader-table-wrapper #ncdownloader-form-wrapper {
- position: relative;
- margin-top: 2em; }
- #ncdownloader-table-wrapper .table-cell:first-child {
- flex: 1 0 250px;
- overflow: hidden;
- text-overflow: ellipsis; }
- #ncdownloader-table-wrapper .table-cell:last-child {
- flex: 1 1 7%; } }
diff --git a/lib/Controller/Aria2Controller.php b/lib/Controller/Aria2Controller.php
index cd40bbe..4f968a5 100644
--- a/lib/Controller/Aria2Controller.php
+++ b/lib/Controller/Aria2Controller.php
@@ -234,7 +234,7 @@ class Aria2Controller extends Controller
$actions[] = $this->createActionItem('unpause', 'unpause');
}
if ($this->aria2->methodName === "tellActive") {
- $speed = [Helper::formatBytes($value['downloadSpeed']), $left . " left"];
+ $speed = [Helper::formatBytes($value['downloadSpeed']), $left];
$tmp['speed'] = $speed;
$tmp['progress'] = $value['progress'];
$actions[] = $this->createActionItem('pause', 'pause');
diff --git a/lib/Controller/MainController.php b/lib/Controller/MainController.php
index e7e0600..8f2605b 100644
--- a/lib/Controller/MainController.php
+++ b/lib/Controller/MainController.php
@@ -43,8 +43,8 @@ class MainController extends Controller
// $str = \OC::$server->getDatabaseConnection()->getInner()->getPrefix();
//$config = \OC::$server->getAppConfig();
OC_Util::addScript($this->appName, 'app');
- OC_Util::addStyle($this->appName, 'style');
- OC_Util::addStyle($this->appName, 'table');
+ // OC_Util::addStyle($this->appName, 'style');
+ // OC_Util::addStyle($this->appName, 'table');
$params = array();
$params['aria2_running'] = $this->aria2->isRunning();
$params['aria2_installed'] = $this->aria2->isInstalled();
diff --git a/lib/Controller/YoutubeController.php b/lib/Controller/YoutubeController.php
index a5c1857..1f7a239 100644
--- a/lib/Controller/YoutubeController.php
+++ b/lib/Controller/YoutubeController.php
@@ -53,7 +53,7 @@ class YoutubeController extends Controller
$filename = sprintf('%s', $folderLink, $value['filename']);
$fileInfo = sprintf("%s | %s", $value['filesize'], date("Y-m-d H:i:s", $value['timestamp']));
$tmp['filename'] = array($filename, $fileInfo);
- $tmp['speed'] = $value['speed'];
+ $tmp['speed'] = explode("|", $value['speed']);
$tmp['progress'] = $value['progress'];
if ((int) $value['status'] == Helper::STATUS['COMPLETE']) {
$path = $this->urlGenerator->linkToRoute('ncdownloader.Youtube.Delete');
diff --git a/css/autocomplete.css b/src/css/autoComplete.css
similarity index 100%
rename from css/autocomplete.css
rename to src/css/autoComplete.css
diff --git a/src/css/style.scss b/src/css/style.scss
new file mode 100644
index 0000000..209d755
--- /dev/null
+++ b/src/css/style.scss
@@ -0,0 +1,279 @@
+.action-item {
+ position: relative;
+}
+
+a {
+ color : #337ab7;
+ text-decoration: none;
+}
+
+#ncdownloader-form-wrapper .form-input-wrapper {
+ display : flex;
+ flex-flow: row nowrap;
+}
+
+#ncdownloader-form-wrapper .form-input-wrapper select,
+#ncdownloader-form-wrapper .form-input-wrapper input {
+ justify-content: left;
+}
+
+a:hover,
+a:focus {
+ color : #23527c;
+ text-decoration: underline;
+}
+
+a:focus {
+ outline : 5px auto -webkit-focus-ring-color;
+ outline-offset: -2px;
+}
+
+div .number {
+ background : none repeat scroll 0 0 #5f5853;
+ border-radius: 999px;
+ color : #FFFFFF;
+ display : inline-block;
+ font-size : 15px;
+ font-style : italic;
+ height : 20px;
+ line-height : 20px;
+ margin-right : 10px;
+ padding : 0 8px;
+}
+
+#ncdownloader-settings-form input[type=text] {
+ width: 160px;
+}
+
+#ncdownloader-form-wrapper input[type=text] {
+ padding: 0px 5px;
+ flex : auto;
+}
+
+#ncdownloader-table-data .table-cell {
+ padding-left: 4px;
+}
+
+.icon-power {
+ background-image: url('../../img/power.svg');
+}
+
+.icon-purge {
+ background-image: url('../../img/trash.svg');
+}
+
+.icon-unpause {
+ background-image: url('../../img/play.svg');
+}
+
+.icon-refresh {
+ background-image: url('../../img/refresh.svg');
+}
+
+#ncdownloader-action-links-container {
+ position: relative;
+
+ .action-link-item a:hover {
+ background-color: #c2afaf;
+ }
+
+ ul {
+ background-color: #ededed;
+ }
+}
+
+#ncdownloader-message-banner.success,
+.message-banner.success {
+ color : #3c763d;
+ background-color: #dff0d8;
+ border-color : #d6e9c6;
+ width : fit-content;
+}
+
+#ncdownloader-message-banner.error,
+.message-banner.error {
+ color : #a94442;
+ background-color: #f2dede;
+ border-color : #ebccd1;
+ width : fit-content;
+}
+
+
+
+.action-links {
+ /*visibility: hidden;*/
+ display : none;
+ position : absolute;
+ background-color: #f1f1f1;
+ min-width : 60px;
+ box-shadow : 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+ z-index : 9999;
+}
+
+.action-link-item a {
+ color : black;
+ padding : 6px 6px;
+ text-decoration: none;
+ display : block;
+}
+
+.app-ncdownloader,
+#ncdownloader-content,.ncdownloader-content-wrapper,#ncdownloader-form-wrapper, #ncdownloader-table-content{
+ width: 100%;
+}
+.ncdownloader-content-wrapper {
+ padding-top: 0.3em;
+}
+.app-ncdownloader #app-content #app-content-wrapper {
+ flex-wrap: wrap;
+}
+
+#app-content-wrapper #ncdownloader-table-content .table-cell {
+ border-bottom: 1px solid #9d9595;
+ border-left : 1px solid #eee;
+
+}
+
+.app-navigation-entry-bullet {
+ background-color: rgb(80, 80, 173);
+}
+
+.notinstalled {
+ color: red;
+}
+
+.checkboxes label {
+ display : inline-block;
+ padding-right: 10px;
+ white-space : nowrap;
+}
+
+.checkboxes input {
+ vertical-align: middle;
+}
+
+.checkboxes label span {
+ vertical-align: middle;
+}
+
+#ncdownloader-content>#app-navigation:not(.vue)>ul>li>a {
+ padding: 0 12px 0 44px;
+}
+
+.button-container [class^='icon-'],
+.button-container [class*=' icon-'] {
+ background-repeat : no-repeat;
+ background-position: center;
+ /* min-width : 18px; */
+ min-height : 24px;
+}
+
+@media only screen and (min-width: 800px) {}
+
+@media only screen and (max-width: 1024px) {
+ #ncdownloader-form-wrapper {
+ position : relative;
+ margin-top: 2em;
+ }
+
+ #ncdownloader-settings-form input[type=text] {
+ width: 135px;
+ }
+}
+
+
+/* from bootstrap */
+.visually-hidden,
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+ position : absolute !important;
+ width : 1px !important;
+ height : 1px !important;
+ padding : 0 !important;
+ margin : -1px !important;
+ overflow : hidden !important;
+ clip : rect(0, 0, 0, 0) !important;
+ white-space: nowrap !important;
+ border : 0 !important;
+}
+
+@-webkit-keyframes spinner-border {
+ to {
+ transform : rotate(360deg)
+ /* rtl :ignore */
+ ;
+ }
+}
+
+@keyframes spinner-border {
+ to {
+ transform : rotate(360deg)
+ /* rtl :ignore */
+ ;
+ }
+}
+
+.spinner-border {
+ display : inline-block;
+ width : 2rem;
+ height : 2rem;
+ vertical-align : -0.125em;
+ border : 0.25em solid currentColor;
+ border-right-color: transparent;
+ border-radius : 50%;
+ -webkit-animation : 0.75s linear infinite spinner-border;
+ animation : 0.75s linear infinite spinner-border;
+}
+
+.spinner-border-sm {
+ width : 1rem;
+ height : 1rem;
+ border-width: 0.2em;
+}
+
+@-webkit-keyframes spinner-grow {
+ 0% {
+ transform: scale(0);
+ }
+
+ 50% {
+ opacity : 1;
+ transform: none;
+ }
+}
+
+@keyframes spinner-grow {
+ 0% {
+ transform: scale(0);
+ }
+
+ 50% {
+ opacity : 1;
+ transform: none;
+ }
+}
+
+.spinner-grow {
+ display : inline-block;
+ width : 2rem;
+ height : 2rem;
+ vertical-align : -0.125em;
+ background-color : currentColor;
+ border-radius : 50%;
+ opacity : 0;
+ -webkit-animation: 0.75s linear infinite spinner-grow;
+ animation : 0.75s linear infinite spinner-grow;
+}
+
+.spinner-grow-sm {
+ width : 1rem;
+ height: 1rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+
+ .spinner-border,
+ .spinner-grow {
+ -webkit-animation-duration: 1.5s;
+ animation-duration : 1.5s;
+ }
+}
\ No newline at end of file
diff --git a/css/table.scss b/src/css/table.scss
similarity index 55%
rename from css/table.scss
rename to src/css/table.scss
index 6cfef3e..78c567f 100644
--- a/css/table.scss
+++ b/src/css/table.scss
@@ -1,23 +1,13 @@
#ncdownloader-table-wrapper {
- display : flex;
- flex-flow : column nowrap;
- background-color: white;
- width : 100%;
- margin : 0 auto;
- border-radius : 4px;
+ display : flex;
+ flex-flow : column nowrap;
+ width : 100%;
+ margin : 0 auto;
+ border-radius : 4px;
/*border : 1px solid #DADADA;*/
- box-shadow : 0px 1px 4px rgba(0, 0, 0, .08);
- justify-content : center;
- align-items : center;
- background-color: #fafafa;
-
- .table-row,
- .table-row-search {
- display : flex;
- flex-flow : row nowrap;
- width : 100%;
- border-bottom: 1px solid #dadada;
- }
+ box-shadow : 0px 1px 4px rgba(0, 0, 0, .08);
+ justify-content : center;
+ align-items : center;
section.table-body,
section.table-heading {
@@ -38,9 +28,8 @@
.table-row,
.table-row-search {
- background-color: #ececec;
- color : #3e3e3e;
- font-weight : bold;
+ color : #3e3e3e;
+ font-weight: bold;
}
.table-cell:hover {
@@ -55,46 +44,26 @@
flex-flow : column wrap;
flex : 1;
font-size : 14px;
- padding : 8px 3px;
+ padding : 8px 7px;
justify-content: left;
- align-items : left;
+ align-items : start;
transition : all 0.15s ease-in-out;
}
.table-cell:first-child {
- flex: 1 1 30%;
- }
-
- .table-cell:last-child {
- flex: 0 1 7%;
- }
-
- #table-cell-status,
- .table-heading-status {
- flex : 0 1 15%;
+ flex : 1 1 auto;
+ width : 30%;
overflow : hidden;
text-overflow: ellipsis;
+ white-space : nowrap;
}
-
.table-cell:hover {
cursor : pointer;
background-color: #F0F0F0;
/* box-shadow : 0px 1px 4px rgba(0, 0, 0, .08); */
}
- .row-sub-container {
- display : flex;
- flex-flow: column nowrap;
- flex : 1;
- }
-
- .row-sub-container .table-cell {
- padding : 8px 0;
- border-bottom: 1px solid #dadada;
- }
-
- .table-row:last-child,
- .row-sub-container .table-cell:last-child {
+ .table-row:last-child {
border-bottom: 0;
}
@@ -108,16 +77,27 @@
}
.table-cell:first-child {
- flex : 1 0 250px;
- overflow : hidden;
- text-overflow: ellipsis;
+ flex : 1 0 auto;
+ display: flex;
+ width : 150px;
+ }
+
+ .table-cell:first-child>div {
+ flex-flow: column nowrap;
}
.table-cell:last-child {
- flex: 1 1 7%;
+ flex: 1 1 0;
}
-
}
-}
-
+ #ncdownloader-table-wrapper.youtube-dl-downloads {
+ #table-cell-speed,
+ .table-heading-speed {
+ flex : 0 1 auto;
+ overflow : hidden;
+ text-overflow: ellipsis;
+ width : 58px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 3250375..fc2f4a7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -7,6 +7,9 @@ import inputAction from './inputAction'
import updatePage from './updatePage'
import buttonActions from './buttonActions'
import inputBox from './inputBox'
+import './css/style.scss'
+import './css/table.scss'
+
'use strict'
const basePath = "/apps/ncdownloader";
$(document).on('ajaxSend', function (elm, xhr, settings) {
diff --git a/src/settings.js b/src/settings.js
index 0306294..70bde02 100644
--- a/src/settings.js
+++ b/src/settings.js
@@ -8,6 +8,7 @@ import autoComplete from './autoComplete';
import eventHandler from './eventHandler';
import aria2Options from './aria2Options';
import helper from './helper';
+import './css/autoComplete.css'
'use strict';
window.addEventListener('DOMContentLoaded', function () {