Skip to content

Commit

Permalink
WebUI: add log viewer
Browse files Browse the repository at this point in the history 
The javascript implementation of multi-select menu is from the source
https://github.com/PhilippeMarcMeyer/vanillaSelectBox. It is licensed
under the MIT License. Some minor fixes is made to pass the lint.

Co-authored-by: brvphoenix <30111323+brvphoenix@users.noreply.github.com>
  • Loading branch information
@ttys3 @brvphoenix
ttys3 and brvphoenix committed Jan 4, 2023
1 parent b12fdcf commit f041107
Show file tree
Hide file tree
Showing 9 changed files with 2,419 additions and 2 deletions.
4 changes: 4 additions & 0 deletions AUTHORS
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@ Code from other projects:
copyright: Dan Haim <negativeiq@users.sourceforge.net>
license: BSD

* files src/webui/www/private/css/vanillaSelectBox.css src/webui/www/private/scripts/vanillaSelectBox.js
copyright: Philippe Meyer <pmg.meyer@gmail.com>
license: MIT

Images Authors:
* files: src/icons/qbittorrent-tray.svg
copyright: Provided by HVS <hvs linuxmail org> (raster first proposal) and Atif Afzal(@atfzl github) <atif5801@gmail.com> (vectorized and modified)
Expand Down
256 changes: 256 additions & 0 deletions src/webui/www/private/css/vanillaSelectBox.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,256 @@
.hidden-search {
display: none !important;
}

li[data-parent].closed {
display: none !important;
}

li[data-parent].open:not(.hidden-search) {
display: block !important;
}

.vsb-menu {
background-clip: padding-box;
background-color: #fff;
border: 1px solid rgb(0 0 0 / 15%);
border-radius: 4px;
box-shadow: 0 6px 12px rgb(0 0 0 / 17.5%);
cursor: pointer;
display: block;
font-size: 11px;
position: absolute; /*Don't change*/
visibility: hidden;
z-index: 1000;
}

.vsb-js-search-zone {
background-color: #fff;
min-height: 1.8em;
padding: 2px;
position: absolute; /*Don't change*/
width: 80%;
z-index: 1001;
}

.vsb-js-search-zone input {
border: 1px solid grey;
border-radius: 4px;
height: 25px !important;
margin-left: 2px;
width: 96%;
}

.vsb-main {
display: inline-block;
position: relative; /*Don't change*/
text-align: left;
vertical-align: middle;
}

.vsb-menu li:hover {
background: linear-gradient(#f5f5f5, #e8e8e8);
}

.vsb-menu ul {
color: #333;
cursor: pointer;
list-style: none;
margin: 4px 0px 0px;
overflow-y: auto;
padding: 0px 10px 3px;
user-select: none;
white-space: nowrap;
}

li.disabled {
background-color: #999;
cursor: not-allowed;
opacity: 0.3;
}

li.overflow {
background-color: #999;
cursor: not-allowed;
opacity: 0.3;
}

li.short {
overflow: hidden;
text-overflow: ellipsis;
}

.vsb-main button {
background: white !important;
border: 1px solid #999 !important;
border-radius: 0;
color: #333;
font-size: 14px;
line-height: 20px;
min-width: 120px;
padding: 6px 12px;
text-align: left;
width: 100%;
z-index: 1;
}

.vsb-main button.disabled {
cursor: not-allowed;
opacity: 0.65;
}

.vsb-main .title {
margin-right: 6px;
user-select: none;
}

.vsb-main li:hover {
background: linear-gradient(#f5f5f5, #e8e8e8);
}

.vsb-main ul {
white-space: nowrap;
}

.vsb-menu li {
background-color: #fff;
font-size: 14px;
min-height: 1.4em;
padding: 0.2em 2em 0.2em 1em;
}

.vsb-menu li.grouped-option b {
display: inline-block;
font-size: 15px;
margin-left: 10px;
transform: translate(-18px);
}

.vsb-menu li.grouped-option.open span {
border-bottom: 3px solid black;
border-radius: 2px;
border-right: 3px solid black;
display: inline-block;
font-size: inherit;
height: 8px;
margin-top: -2px;
transform: translate(-38px) rotate(45deg);
width: 8px;
}

.vsb-menu li.grouped-option.closed span {
border-bottom: 3px solid black;
border-radius: 2px;
border-right: 3px solid black;
display: inline-block;
font-size: inherit;
height: 8px;
transform: translate(-38px) rotate(-45deg);
width: 8px;
}

.vsb-menu li.grouped-option i {
border: 1px solid;
border-radius: 3px;
color: black;
display: inline-block;
float: left;
font-size: inherit;
font-weight: bold;
height: 11px;
margin: 0px 2px 0px 22px;
padding: 1px 3px 2px;
width: 8px;
}

.vsb-menu li.grouped-option.checked i::after {
border-bottom: 3px solid black;
border-right: 3px solid black;
color: #333;
content: "";
display: inline-block;
float: left;
font-size: inherit;
height: 8px;
margin-left: 0px;
transform: rotate(45deg);
width: 5px;
}

.vsb-menu :not(.multi) li.active {
margin-left: 7px;
}

.vsb-menu :not(.multi) li.active::before {
border-bottom: 3px solid black;
border-radius: 2px;
border-right: 3px solid black;
content: "";
display: inline-block;
font-size: inherit;
height: 10px;
margin-left: -18px;
transform: rotate(45deg);
width: 5px;
}

.vsb-menu .multi li {
background-color: #fff;
font-size: 14px;
min-height: 1.4em;
padding: 0.2em 1em 0.2em 26px;
}

.vsb-menu .multi li.grouped-option {
font-size: 15px;
padding-left: 5px;
}

.vsb-menu .multi li.grouped-option:hover {
color: rgb(52 31 112);
font-weight: bold;
text-decoration: underline;
}

.vsb-menu .multi li:not(.grouped-option)::before {
border: 1px solid;
border-radius: 3px;
color: black;
content: "";
display: inline-block;
float: left;
font-size: inherit;
font-weight: bold;
margin: 0px 2px 0px -22px;
padding: 7px;
}

.vsb-menu .multi li:not(.grouped-option).active::after {
border-bottom: 3px solid black;
border-right: 3px solid black;
color: #333;
content: "";
display: inline-block;
float: left;
font-size: inherit;
height: 8px;
margin-left: -18px;
margin-top: 1px;
transform: rotate(45deg);
width: 5px;
}

.caret {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid;
display: inline-block;
height: 0;
margin-left: 2px;
vertical-align: middle;
width: 0;
}

li[data-parent] {
padding-left: 50px !important;
}
2 changes: 2 additions & 0 deletions src/webui/www/private/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ <h1 class="applicationTitle">qBittorrent Web User Interface <span class="version
<li><a id="speedInBrowserTitleBarLink"><img class="MyMenuIcon" src="images/checked-completed.svg" alt="QBT_TR(Speed in Title Bar)QBT_TR[CONTEXT=MainWindow]" width="16" height="16" />QBT_TR(Speed in Title Bar)QBT_TR[CONTEXT=MainWindow]</a></li>
<li class="divider"><a id="showSearchEngineLink"><img class="MyMenuIcon" src="images/checked-completed.svg" alt="QBT_TR(Search Engine)QBT_TR[CONTEXT=MainWindow]" width="16" height="16" />QBT_TR(Search Engine)QBT_TR[CONTEXT=MainWindow]</a></li>
<li><a id="showRssReaderLink"><img class="MyMenuIcon" src="images/checked-completed.svg" alt="QBT_TR(RSS)QBT_TR[CONTEXT=MainWindow]" width="16" height="16" />QBT_TR(RSS Reader)QBT_TR[CONTEXT=MainWindow]</a></li>
<li><a id="showLogViewerLink"><img class="MyMenuIcon" src="images/checked-completed.svg" alt="QBT_TR(Log)QBT_TR[CONTEXT=MainWindow]" width="16" height="16" />QBT_TR(Log)QBT_TR[CONTEXT=MainWindow]</a></li>
<li class="divider"><a id="StatisticsLink"><img class="MyMenuIcon" src="images/view-statistics.svg" alt="QBT_TR(Statistics)QBT_TR[CONTEXT=MainWindow]" width="16" height="16" />QBT_TR(Statistics)QBT_TR[CONTEXT=MainWindow]</a></li>
</ul>
</li>
Expand Down Expand Up @@ -116,6 +117,7 @@ <h1 class="applicationTitle">qBittorrent Web User Interface <span class="version
<li id="transfersTabLink" class="selected"><a class="tab">QBT_TR(Transfers)QBT_TR[CONTEXT=MainWindow]</a></li>
<li id="searchTabLink"><a class="tab">QBT_TR(Search)QBT_TR[CONTEXT=MainWindow]</a></li>
<li id="rssTabLink"><a class="tab">QBT_TR(RSS)QBT_TR[CONTEXT=MainWindow]</a></li>
<li id="logTabLink"><a class="tab">QBT_TR(Execution Log)QBT_TR[CONTEXT=MainWindow]</a></li>
</ul>
<div class="clear"></div>
</div>
Expand Down
Loading

0 comments on commit f041107

Please sign in to comment.