starred/metube
1
0
Fork 0
mirror of https://github.com/alexta69/metube.git synced 2026-06-13 16:40:05 +00:00
Code Issues Packages Projects Releases 20 Wiki Activity

remove circle and make labels with help text have an underline

Browse Source
This commit is contained in:
Sean McCollum
2026-05-25 00:13:12 -07:00
parent e2773db65a
commit f0348581c2
3 changed files with 23 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/app/app.html
+17 -20
View File
@@ -279,7 +279,7 @@
</div> </div>
<div class="col-12 col-md-6 col-lg-3"> <div class="col-12 col-md-6 col-lg-3">
<div class="input-group"> <div class="input-group">
<span class="input-group-text">Format <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="Subtitle output format for captions mode." triggers="click" autoClose="outside" container="body" /></span> <span class="input-group-text help-title" ngbPopover="Subtitle output format for captions mode." triggers="click" autoClose="outside" container="body">Format</span>
<select class="form-select" <select class="form-select"
name="format" name="format"
[(ngModel)]="format" [(ngModel)]="format"
@@ -293,7 +293,7 @@
</div> </div>
<div class="col-12 col-md-6 col-lg-3"> <div class="col-12 col-md-6 col-lg-3">
<div class="input-group"> <div class="input-group">
<span class="input-group-text">Language <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="Subtitle language (you can type any language code)." triggers="click" autoClose="outside" container="body" /></span> <span class="input-group-text help-title" ngbPopover="Subtitle language (you can type any language code)." triggers="click" autoClose="outside" container="body">Language</span>
<input class="form-control" <input class="form-control"
type="text" type="text"
list="subtitleLanguageOptions" list="subtitleLanguageOptions"
@@ -311,7 +311,7 @@
</div> </div>
<div class="col-12 col-md-6 col-lg-3"> <div class="col-12 col-md-6 col-lg-3">
<div class="input-group"> <div class="input-group">
<span class="input-group-text">Subtitle Source <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="Choose manual, auto, or fallback preference for captions mode." triggers="click" autoClose="outside" container="body" /></span> <span class="input-group-text help-title" ngbPopover="Choose manual, auto, or fallback preference for captions mode." triggers="click" autoClose="outside" container="body">Subtitle Source</span>
<select class="form-select" <select class="form-select"
name="subtitleMode" name="subtitleMode"
[(ngModel)]="subtitleMode" [(ngModel)]="subtitleMode"
@@ -372,7 +372,7 @@
<div class="row g-3"> <div class="row g-3">
<div class="col-md-6"> <div class="col-md-6">
<div class="input-group"> <div class="input-group">
<span class="input-group-text">Download Folder <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="Type to filter existing folders, or enter a new folder name." triggers="click" autoClose="outside" container="body" /></span> <span class="input-group-text help-title" ngbPopover="Type to filter existing folders, or enter a new folder name." triggers="click" autoClose="outside" container="body">Download Folder</span>
<input type="text" <input type="text"
class="form-control" class="form-control"
placeholder="Default" placeholder="Default"
@@ -389,7 +389,7 @@
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="input-group"> <div class="input-group">
<span class="input-group-text">Custom Name Prefix <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="Add a prefix to downloaded filenames." triggers="click" autoClose="outside" container="body" /></span> <span class="input-group-text help-title" ngbPopover="Add a prefix to downloaded filenames." triggers="click" autoClose="outside" container="body">Custom Name Prefix</span>
<input type="text" <input type="text"
class="form-control" class="form-control"
placeholder="Default" placeholder="Default"
@@ -406,13 +406,12 @@
name="splitByChapters" [(ngModel)]="splitByChapters" (change)="splitByChaptersChanged()" name="splitByChapters" [(ngModel)]="splitByChapters" (change)="splitByChaptersChanged()"
[disabled]="addInProgress || subscribeInProgress || downloads.loading"> [disabled]="addInProgress || subscribeInProgress || downloads.loading">
<label class="form-check-label" for="checkbox-split-chapters">Split by chapters</label> <label class="form-check-label" for="checkbox-split-chapters">Split by chapters</label>
<fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="Split video into separate files by chapters." triggers="click" autoClose="outside" container="body" />
</div> </div>
</div> </div>
@if (splitByChapters) { @if (splitByChapters) {
<div class="col"> <div class="col">
<div class="input-group"> <div class="input-group">
<span class="input-group-text">Template <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="Output template for chapter files." triggers="click" autoClose="outside" container="body" /></span> <span class="input-group-text help-title" ngbPopover="Output template for chapter files." triggers="click" autoClose="outside" container="body">Template</span>
<input type="text" class="form-control" name="chapterTemplate" [(ngModel)]="chapterTemplate" <input type="text" class="form-control" name="chapterTemplate" [(ngModel)]="chapterTemplate"
(change)="chapterTemplateChanged()" [disabled]="addInProgress || subscribeInProgress || downloads.loading"> (change)="chapterTemplateChanged()" [disabled]="addInProgress || subscribeInProgress || downloads.loading">
</div> </div>
@@ -423,7 +422,7 @@
@if (downloadType === 'video' || downloadType === 'audio') { @if (downloadType === 'video' || downloadType === 'audio') {
<div class="col-md-6"> <div class="col-md-6">
<div class="input-group"> <div class="input-group">
<span class="input-group-text">Clip start <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="Optional start time (seconds, M:SS, or H:MM:SS). Blank = from start or YouTube &t= in URL." triggers="click" autoClose="outside" container="body" /></span> <span class="input-group-text help-title" ngbPopover="Optional start time (seconds, M:SS, or H:MM:SS). Blank = from start or YouTube &t= in URL." triggers="click" autoClose="outside" container="body">Clip start</span>
<input type="text" <input type="text"
class="form-control" class="form-control"
name="clipStart" name="clipStart"
@@ -435,7 +434,7 @@
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="input-group"> <div class="input-group">
<span class="input-group-text">Clip end <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="Optional end time. Blank = until end of media." triggers="click" autoClose="outside" container="body" /></span> <span class="input-group-text help-title" ngbPopover="Optional end time. Blank = until end of media." triggers="click" autoClose="outside" container="body">Clip end</span>
<input type="text" <input type="text"
class="form-control" class="form-control"
name="clipEnd" name="clipEnd"
@@ -456,13 +455,12 @@
<input class="form-check-input" type="checkbox" role="switch" id="checkbox-auto-start" <input class="form-check-input" type="checkbox" role="switch" id="checkbox-auto-start"
name="autoStart" [(ngModel)]="autoStart" (change)="autoStartChanged()" name="autoStart" [(ngModel)]="autoStart" (change)="autoStartChanged()"
[disabled]="addInProgress || subscribeInProgress || downloads.loading"> [disabled]="addInProgress || subscribeInProgress || downloads.loading">
<label class="form-check-label" for="checkbox-auto-start">Auto Start</label> <label class="form-check-label help-title" for="checkbox-auto-start" ngbPopover="Automatically start downloads when added." triggers="click" autoClose="outside" container="body" (click)="$event.preventDefault()">Auto Start</label>
<fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="Automatically start downloads when added." triggers="click" autoClose="outside" container="body" />
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="input-group"> <div class="input-group">
<span class="input-group-text">Items Limit <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="Maximum number of items to download from a playlist or channel (0 = no limit)." triggers="click" autoClose="outside" container="body" /></span> <span class="input-group-text help-title" ngbPopover="Maximum number of items to download from a playlist or channel (0 = no limit)." triggers="click" autoClose="outside" container="body">Items Limit</span>
<input type="number" <input type="number"
min="0" min="0"
class="form-control" class="form-control"
@@ -475,7 +473,7 @@
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="input-group"> <div class="input-group">
<span class="input-group-text">Subscription Check (min) <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="How often to poll subscriptions for new videos." triggers="click" autoClose="outside" container="body" /></span> <span class="input-group-text help-title" ngbPopover="How often to poll subscriptions for new videos." triggers="click" autoClose="outside" container="body">Subscription Check (min)</span>
<input type="number" <input type="number"
min="1" min="1"
class="form-control" class="form-control"
@@ -488,7 +486,7 @@
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="input-group"> <div class="input-group">
<span class="input-group-text">Subscription Title Filter <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="In subscriptions, only titles matching this Python-style regex are queued. Empty = all. Case-sensitive; use (?i) in the pattern for case-insensitive." triggers="click" autoClose="outside" container="body" /></span> <span class="input-group-text help-title" ngbPopover="In subscriptions, only titles matching this Python-style regex are queued. Empty = all. Case-sensitive; use (?i) in the pattern for case-insensitive." triggers="click" autoClose="outside" container="body">Subscription Title Filter</span>
<input type="text" <input type="text"
class="form-control" class="form-control"
name="titleRegex" name="titleRegex"
@@ -502,8 +500,7 @@
<input class="form-check-input" type="checkbox" role="switch" id="checkbox-skip-subscriber-only" <input class="form-check-input" type="checkbox" role="switch" id="checkbox-skip-subscriber-only"
name="skipSubscriberOnly" [(ngModel)]="skipSubscriberOnly" name="skipSubscriberOnly" [(ngModel)]="skipSubscriberOnly"
[disabled]="addInProgress || subscribeInProgress || downloads.loading" /> [disabled]="addInProgress || subscribeInProgress || downloads.loading" />
<label class="form-check-label" for="checkbox-skip-subscriber-only">Skip members-only subscription videos</label> <label class="form-check-label help-title" for="checkbox-skip-subscriber-only" ngbPopover="When enabled, subscription checks skip videos marked members-only by yt-dlp (channel Join). Ignored for one-off downloads." triggers="click" autoClose="outside" container="body" (click)="$event.preventDefault()">Skip members-only subscription videos</label>
<fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="When enabled, subscription checks skip videos marked members-only by yt-dlp (channel Join). Ignored for one-off downloads." triggers="click" autoClose="outside" container="body" />
</div> </div>
</div> </div>
</div> </div>
@@ -513,7 +510,7 @@
<div class="row g-3"> <div class="row g-3">
<div class="col-12" [class.col-md-6]="allowYtdlOptionsOverrides()"> <div class="col-12" [class.col-md-6]="allowYtdlOptionsOverrides()">
<div class="input-group"> <div class="input-group">
<span class="input-group-text">Option Presets <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="Choose one or more yt-dlp option presets configured on the server (applied in order)." triggers="click" autoClose="outside" container="body" /></span> <span class="input-group-text help-title" ngbPopover="Choose one or more yt-dlp option presets configured on the server (applied in order)." triggers="click" autoClose="outside" container="body">Option Presets</span>
<ng-select <ng-select
class="flex-grow-1" class="flex-grow-1"
name="ytdlOptionsPresets" name="ytdlOptionsPresets"
@@ -529,7 +526,7 @@
@if (allowYtdlOptionsOverrides()) { @if (allowYtdlOptionsOverrides()) {
<div class="col-md-6"> <div class="col-md-6">
<div class="input-group"> <div class="input-group">
<span class="input-group-text">Custom yt-dlp Options <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="Optional per-download yt-dlp overrides as a JSON object." triggers="click" autoClose="outside" container="body" /></span> <span class="input-group-text help-title" ngbPopover="Optional per-download yt-dlp overrides as a JSON object." triggers="click" autoClose="outside" container="body">Custom yt-dlp Options</span>
<input type="text" <input type="text"
class="form-control" class="form-control"
placeholder='e.g. {"writesubtitles": true}' placeholder='e.g. {"writesubtitles": true}'
@@ -546,7 +543,7 @@
<div class="settings-section-label">Tools</div> <div class="settings-section-label">Tools</div>
<div class="row g-3"> <div class="row g-3">
<div class="col-md-4"> <div class="col-md-4">
<div class="action-group-label">Cookies <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="Upload a cookies.txt file from your browser to authenticate restricted or private downloads." triggers="click" autoClose="outside" container="body" /></div> <div class="action-group-label help-title" ngbPopover="Upload a cookies.txt file from your browser to authenticate restricted or private downloads." triggers="click" autoClose="outside" container="body">Cookies</div>
<input type="file" id="cookie-upload" class="d-none" accept=".txt" <input type="file" id="cookie-upload" class="d-none" accept=".txt"
(change)="onCookieFileSelect($event)" (change)="onCookieFileSelect($event)"
[disabled]="cookieUploadInProgress || addInProgress"> [disabled]="cookieUploadInProgress || addInProgress">
@@ -915,7 +912,7 @@
</th> </th>
<th scope="col">Name</th> <th scope="col">Name</th>
<th scope="col">URL</th> <th scope="col">URL</th>
<th scope="col" class="text-nowrap">Sub. title filter <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="Subscriptions only — which new video titles to queue when this feed is checked. Does not affect manual downloads." triggers="click" autoClose="outside" container="body" /></th> <th scope="col" class="text-nowrap"><span class="help-title" ngbPopover="Subscriptions only — which new video titles to queue when this feed is checked. Does not affect manual downloads." triggers="click" autoClose="outside" container="body">Sub. title filter</span></th>
<th scope="col" class="text-nowrap">Interval (min)</th> <th scope="col" class="text-nowrap">Interval (min)</th>
<th scope="col" class="text-nowrap">Last checked</th> <th scope="col" class="text-nowrap">Last checked</th>
<th scope="col">Status</th> <th scope="col">Status</th>
ui/src/app/app.sass
+5 -9
View File
@@ -201,16 +201,12 @@ main
color: var(--bs-secondary-color) color: var(--bs-secondary-color)
margin-bottom: 0.4rem margin-bottom: 0.4rem
.help-icon .help-title
cursor: pointer text-decoration: underline dotted
opacity: 0.55 text-underline-offset: 0.2em
padding: 0.25rem cursor: help
margin-left: 0.25rem
font-size: 0.85em
line-height: 1
&:hover, &:focus &:focus
opacity: 1
outline: none outline: none
.cookie-status .cookie-status
ui/src/app/app.ts
+1 -2
View File
@@ -7,7 +7,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { NgbModule, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap'; import { NgbModule, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
import { NgSelectModule } from '@ng-select/ng-select'; import { NgSelectModule } from '@ng-select/ng-select';
import { faTrashAlt, faCheckCircle, faTimesCircle, faRedoAlt, faSun, faMoon, faCheck, faCircleHalfStroke, faCircleQuestion, faDownload, faExternalLinkAlt, faFileImport, faFileExport, faCopy, faClock, faTachometerAlt, faSortAmountDown, faSortAmountUp, faChevronRight, faChevronDown, faUpload, faPause, faPlay } from '@fortawesome/free-solid-svg-icons'; import { faTrashAlt, faCheckCircle, faTimesCircle, faRedoAlt, faSun, faMoon, faCheck, faCircleHalfStroke, faDownload, faExternalLinkAlt, faFileImport, faFileExport, faCopy, faClock, faTachometerAlt, faSortAmountDown, faSortAmountUp, faChevronRight, faChevronDown, faUpload, faPause, faPlay } from '@fortawesome/free-solid-svg-icons';
import { faGithub } from '@fortawesome/free-brands-svg-icons'; import { faGithub } from '@fortawesome/free-brands-svg-icons';
import { CookieService } from 'ngx-cookie-service'; import { CookieService } from 'ngx-cookie-service';
import { AddDownloadPayload, DownloadsService } from './services/downloads.service'; import { AddDownloadPayload, DownloadsService } from './services/downloads.service';
@@ -172,7 +172,6 @@ export class App implements AfterViewInit, OnInit, OnDestroy {
faMoon = faMoon; faMoon = faMoon;
faCheck = faCheck; faCheck = faCheck;
faCircleHalfStroke = faCircleHalfStroke; faCircleHalfStroke = faCircleHalfStroke;
faCircleQuestion = faCircleQuestion;
faDownload = faDownload; faDownload = faDownload;
faExternalLinkAlt = faExternalLinkAlt; faExternalLinkAlt = faExternalLinkAlt;
faFileImport = faFileImport; faFileImport = faFileImport;