mirror of
https://github.com/alexta69/metube.git
synced 2026-06-13 16:40:05 +00:00
remove circle and make labels with help text have an underline
This commit is contained in:
Sean McCollum
+17
-20
@@ -279,7 +279,7 @@
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<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"
|
||||
name="format"
|
||||
[(ngModel)]="format"
|
||||
@@ -293,7 +293,7 @@
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<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"
|
||||
type="text"
|
||||
list="subtitleLanguageOptions"
|
||||
@@ -311,7 +311,7 @@
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<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"
|
||||
name="subtitleMode"
|
||||
[(ngModel)]="subtitleMode"
|
||||
@@ -372,7 +372,7 @@
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<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"
|
||||
class="form-control"
|
||||
placeholder="Default"
|
||||
@@ -389,7 +389,7 @@
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<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"
|
||||
class="form-control"
|
||||
placeholder="Default"
|
||||
@@ -406,13 +406,12 @@
|
||||
name="splitByChapters" [(ngModel)]="splitByChapters" (change)="splitByChaptersChanged()"
|
||||
[disabled]="addInProgress || subscribeInProgress || downloads.loading">
|
||||
<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>
|
||||
@if (splitByChapters) {
|
||||
<div class="col">
|
||||
<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"
|
||||
(change)="chapterTemplateChanged()" [disabled]="addInProgress || subscribeInProgress || downloads.loading">
|
||||
</div>
|
||||
@@ -423,7 +422,7 @@
|
||||
@if (downloadType === 'video' || downloadType === 'audio') {
|
||||
<div class="col-md-6">
|
||||
<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"
|
||||
class="form-control"
|
||||
name="clipStart"
|
||||
@@ -435,7 +434,7 @@
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<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"
|
||||
class="form-control"
|
||||
name="clipEnd"
|
||||
@@ -456,13 +455,12 @@
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="checkbox-auto-start"
|
||||
name="autoStart" [(ngModel)]="autoStart" (change)="autoStartChanged()"
|
||||
[disabled]="addInProgress || subscribeInProgress || downloads.loading">
|
||||
<label class="form-check-label" for="checkbox-auto-start">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" />
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<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"
|
||||
min="0"
|
||||
class="form-control"
|
||||
@@ -475,7 +473,7 @@
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<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"
|
||||
min="1"
|
||||
class="form-control"
|
||||
@@ -488,7 +486,7 @@
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<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"
|
||||
class="form-control"
|
||||
name="titleRegex"
|
||||
@@ -502,8 +500,7 @@
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="checkbox-skip-subscriber-only"
|
||||
name="skipSubscriberOnly" [(ngModel)]="skipSubscriberOnly"
|
||||
[disabled]="addInProgress || subscribeInProgress || downloads.loading" />
|
||||
<label class="form-check-label" for="checkbox-skip-subscriber-only">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" />
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -513,7 +510,7 @@
|
||||
<div class="row g-3">
|
||||
<div class="col-12" [class.col-md-6]="allowYtdlOptionsOverrides()">
|
||||
<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
|
||||
class="flex-grow-1"
|
||||
name="ytdlOptionsPresets"
|
||||
@@ -529,7 +526,7 @@
|
||||
@if (allowYtdlOptionsOverrides()) {
|
||||
<div class="col-md-6">
|
||||
<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"
|
||||
class="form-control"
|
||||
placeholder='e.g. {"writesubtitles": true}'
|
||||
@@ -546,7 +543,7 @@
|
||||
<div class="settings-section-label">Tools</div>
|
||||
<div class="row g-3">
|
||||
<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"
|
||||
(change)="onCookieFileSelect($event)"
|
||||
[disabled]="cookieUploadInProgress || addInProgress">
|
||||
@@ -915,7 +912,7 @@
|
||||
</th>
|
||||
<th scope="col">Name</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">Last checked</th>
|
||||
<th scope="col">Status</th>
|
||||
|
||||
+5
-9
@@ -201,16 +201,12 @@ main
|
||||
color: var(--bs-secondary-color)
|
||||
margin-bottom: 0.4rem
|
||||
|
||||
.help-icon
|
||||
cursor: pointer
|
||||
opacity: 0.55
|
||||
padding: 0.25rem
|
||||
margin-left: 0.25rem
|
||||
font-size: 0.85em
|
||||
line-height: 1
|
||||
.help-title
|
||||
text-decoration: underline dotted
|
||||
text-underline-offset: 0.2em
|
||||
cursor: help
|
||||
|
||||
&:hover, &:focus
|
||||
opacity: 1
|
||||
&:focus
|
||||
outline: none
|
||||
|
||||
.cookie-status
|
||||
|
||||
+1
-2
@@ -7,7 +7,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
||||
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
||||
import { NgbModule, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
|
||||
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 { CookieService } from 'ngx-cookie-service';
|
||||
import { AddDownloadPayload, DownloadsService } from './services/downloads.service';
|
||||
@@ -172,7 +172,6 @@ export class App implements AfterViewInit, OnInit, OnDestroy {
|
||||
faMoon = faMoon;
|
||||
faCheck = faCheck;
|
||||
faCircleHalfStroke = faCircleHalfStroke;
|
||||
faCircleQuestion = faCircleQuestion;
|
||||
faDownload = faDownload;
|
||||
faExternalLinkAlt = faExternalLinkAlt;
|
||||
faFileImport = faFileImport;
|
||||
|
||||
Reference in New Issue
Block a user