From 482fa503e545e00252e25eee7b3e0f7d421cf9d4 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Sun, 8 Mar 2020 17:33:40 +0100 Subject: Use grid to organise settings in admin, my-account --- client/src/app/+admin/admin.component.html | 2 +- .../edit-custom-config.component.html | 1158 +++++++++++--------- .../edit-custom-config.component.scss | 43 +- .../+admin/plugins/shared/toggle-plugin-type.scss | 14 + 4 files changed, 675 insertions(+), 542 deletions(-) (limited to 'client/src/app/+admin') diff --git a/client/src/app/+admin/admin.component.html b/client/src/app/+admin/admin.component.html index 6c98fe453..76d297c52 100644 --- a/client/src/app/+admin/admin.component.html +++ b/client/src/app/+admin/admin.component.html @@ -1,7 +1,7 @@
- {{ item.label }} + {{ item.label }} diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html index 2cf0e5fd9..77e857d6b 100644 --- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html +++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html @@ -7,185 +7,217 @@ -
INSTANCE
- -
- - -
{{ formErrors.instance.name }}
-
+
+
+
INSTANCE
+
-
- - -
{{ formErrors.instance.shortDescription }}
-
+
-
- - -
{{ formErrors.instance.description }}
-
+
+ + +
{{ formErrors.instance.name }}
+
-
- +
+ + +
{{ formErrors.instance.shortDescription }}
+
-
- -
-
+
+ + +
{{ formErrors.instance.description }}
+
-
- +
+ + +
+ +
+
+ +
+ + +
+ +
+
-
-
-
MODERATION & NSFW
+
+
+
MODERATION & NSFW
+
-
- - - This instance is dedicated to sensitive or NSFW content - +
- - - Enabling it will allow other administrators to know that you are mainly federating sensitive content.

- Moreover, the NSFW checkbox on video upload will be automatically checked by default. - - - -
+
+ + + This instance is dedicated to sensitive or NSFW content + -
- + + + Enabling it will allow other administrators to know that you are mainly federating sensitive content.

+ Moreover, the NSFW checkbox on video upload will be automatically checked by default. + + + +
- - - - With Do not list or Blur thumbnails, a confirmation will be requested to watch the video. - - - - -
- -
-
{{ formErrors.instance.defaultNSFWPolicy }}
-
+
+ -
- - -
{{ formErrors.instance.terms }}
-
+ + + + With Do not list or Blur thumbnails, a confirmation will be requested to watch the video. + + + + +
+ +
+
{{ formErrors.instance.defaultNSFWPolicy }}
+
-
- - -
{{ formErrors.instance.codeOfConduct }}
-
+
+ + +
{{ formErrors.instance.terms }}
+
-
- -
Who moderates the instance? What is the policy regarding NSFW videos? Political videos? etc
+
+ + +
{{ formErrors.instance.codeOfConduct }}
+
- -
{{ formErrors.instance.moderationInformation }}
+
+ +
Who moderates the instance? What is the policy regarding NSFW videos? Political videos? etc
+ + +
{{ formErrors.instance.moderationInformation }}
+
+ +
-
YOU AND YOUR INSTANCE
+
+
+
YOU AND YOUR INSTANCE
+
-
- -
A single person? A non-profit? A company?
+
- +
+ +
A single person? A non-profit? A company?
-
{{ formErrors.instance.administrator }}
-
+ -
- -
To share your personal videos? To open registrations and allow people to upload what they want?
+
{{ formErrors.instance.administrator }}
+
- -
{{ formErrors.instance.creationReason }}
-
+
+ +
To share your personal videos? To open registrations and allow people to upload what they want?
+ + +
{{ formErrors.instance.creationReason }}
+
-
- -
It's important to know for users who want to register on your instance
+
+ +
It's important to know for users who want to register on your instance
+ + +
{{ formErrors.instance.maintenanceLifetime }}
+
+ +
+ +
With your own funds? With user donations? Advertising?
+ + +
{{ formErrors.instance.businessModel }}
+
- -
{{ formErrors.instance.maintenanceLifetime }}
+
-
- -
With your own funds? With users donations? Advertising?
+
+
+
OTHER INFORMATION
+
- -
{{ formErrors.instance.businessModel }}
-
+
-
OTHER INFORMATION
+
+ +
2vCore 2GB RAM/or directly the link to the server you rent etc
-
- -
2vCore 2GB RAM/or directly the link to the server you rent etc
+ - +
{{ formErrors.instance.hardwareInformation }}
+
-
{{ formErrors.instance.hardwareInformation }}
+
@@ -195,226 +227,254 @@ -
THEME AND DEFAULT ROUTE
- - -
- - -
- -
+
+
+
APPEARANCE
- +
-
- -
- -
-
{{ formErrors.instance.defaultClientRoute }}
-
+ +
+ -
SIGNUP
+
+ -
{{ formErrors.signup.limit }}
- Signup won't be limited to a fixed number of users. + +
- - -
- - - -
USERS
+
+ - -
- -
- +
+ +
+ +
+
{{ formErrors.instance.defaultClientRoute }}
-
{{ formErrors.user.videoQuota }}
+
+
-
- -
- -
-
{{ formErrors.user.videoQuotaDaily }}
+
+
+
NEW USERS
- +
-
IMPORT
+ +
+ + + ⚠️ This functionality requires a lot of attention and extra moderation. + + + - - +
+ + +
{{ formErrors.signup.limit }}
+ Signup won't be limited to a fixed number of users. +
+ + +
+ -
- -
+ +
+ +
+ +
+
{{ formErrors.user.videoQuota }}
+
-
- -
+
+ +
+ +
+
{{ formErrors.user.videoQuotaDaily }}
+
+ - - +
+
+
+
+
NEW VIDEOS
+
-
AUTO-BLACKLIST
+
- - - + + + +
+ +
-
- - - Unless a user is marked as trusted, their videos will stay private until a moderator reviews them. - - -
+
+ +
+ - - - -
INSTANCE FOLLOWERS
+ + + + +
+ + + Unless a user is marked as trusted, their videos will stay private until a moderator reviews them. + + +
+ + + + - - +
+
-
- -
+
+
+
FEDERATION
+
-
- -
- - +
-
INSTANCE FOLLOWINGS
+ + - - +
+ +
- -
- - - ⚠️ This functionality requires a lot of attention and extra moderation. - - -
+
+ +
+ - -
- - - ⚠️ This functionality requires a lot of attention and extra moderation. - + + + + +
+ + + ⚠️ This functionality requires a lot of attention and extra moderation. + + +
+ - -
- - -
{{ formErrors.followings.instance.autoFollowIndex.indexUrl }}
-
- - -
+ +
+ + + ⚠️ This functionality requires a lot of attention and extra moderation. + + + +
+ + +
{{ formErrors.followings.instance.autoFollowIndex.indexUrl }}
+
+ + +
+ + - - +
+
+ +
+
+
ADMINISTRATORS
+
-
ADMINISTRATORS
+
-
- - -
{{ formErrors.admin.email }}
-
+
+ + +
{{ formErrors.admin.email }}
+
+ +
+ +
-
- +
@@ -422,47 +482,56 @@ -
TWITTER
- - +
+
+
TWITTER
+
-
- +
- - - Indicates the Twitter account for the website or platform on which the content was published. - - + + - -
{{ formErrors.services.twitter.username }}
-
+
+ -
- - - Instance whitelisted by Twitter - + + + Indicates the Twitter account for the website or platform on which the content was published. + + - - - If your instance is whitelisted by Twitter, a video player will be embedded in the Twitter feed on PeerTube video share.
- If the instance is not whitelisted, we use an image link card that will redirect on your PeerTube instance.

- Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/videos/watch/blabla) on - https://cards-dev.twitter.com/validator - to see if you instance is whitelisted. - - - -
+ +
{{ formErrors.services.twitter.username }}
+
- - +
+ + + Instance whitelisted by Twitter + + + + + If your instance is whitelisted by Twitter, a video player will be embedded in the Twitter feed on PeerTube video share.
+ If the instance is not whitelisted, we use an image link card that will redirect on your PeerTube instance.

+ Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/videos/watch/blabla) on + https://cards-dev.twitter.com/validator + to see if you instance is whitelisted. + + + +
+ + + + +
+
@@ -470,206 +539,235 @@ -
TRANSCODING
- - -
- - - Transcoding enabled - - - - If you disable transcoding, many videos from your users will not work! - - +
+
+
TRANSCODING
- +
-
- - - Allow your users to upload .mkv, .mov, .avi and .flv videos - - -
- -
- - - Allow your users to upload audio files that will be merged with the preview file on upload - - -
+ - -
- +
+ + + Transcoding enabled + + - - Experimental, we suggest you to not disable webtorrent support for now + If you disable transcoding, many videos from your users will not work! + -

If you also enabled HLS support, it will multiply videos storage by 2

+ -
+
+ + + Allow your users to upload .mkv, .mov, .avi and .flv videos + + +
+ +
+ + + Allow your users to upload audio files that will be merged with the preview file on upload + + +
- If disabled, breaks federation with PeerTube instances < 2.1 + +
+ + + + Experimental, we suggest you to not disable webtorrent support for now + +

If you also enabled HLS support, it will multiply videos storage by 2

+ +
+ + If disabled, breaks federation with PeerTube instances < 2.1 + + + +
- + + +
+ + + + Requires ffmpeg >= 4.1 + +

Generate HLS playlists and fragmented MP4 files resulting in a better playback than with the current default player:

+
    +
  • Resolution change is smoother
    • +
  • Faster playback in particular with long videos
    • +
  • More stable playback (less bugs/infinite loading)
    • +
+ +

If you also enabled WebTorrent support, it will multiply videos storage by 2

+ + + +
+ + +
+ +
+ +
+
{{ formErrors.transcoding.threads }}
+
+ + +
+ + +
+ + +
+ + +
+ - -
- - - - Requires ffmpeg >= 4.1 +
+
-

Generate HLS playlists and fragmented MP4 files resulting in a better playback than with the current default player:

-
    -
  • Resolution change is smoother
    • -
  • Faster playback in particular with long videos
    • -
  • More stable playback (less bugs/infinite loading)
    • -
+
+
+
+ CACHE + + + Some files are not federated (previews, captions). We fetch them directly from the origin instance and cache them. + + +
+
-

If you also enabled WebTorrent support, it will multiply videos storage by 2

- - - -
- +
-
- -
- + +
+ + +
{{ formErrors.cache.previews.size }}
-
{{ formErrors.transcoding.threads }}
-
- -
- + + - -
- - +
{{ formErrors.cache.captions.size }}
 - - - -
- CACHE - - - - Some files are not federated (previews, captions). We fetch them directly from the origin instance and cache them. - - -
- - -
- - -
{{ formErrors.cache.previews.size }}
+
-
- - -
{{ formErrors.cache.captions.size }}
+
+
+
CUSTOMIZATIONS
- -
CUSTOMIZATIONS
- - - -
- - - - - Write JavaScript code directly.
Example: 
console.log('my instance is amazing');
- - - - - - -
{{ formErrors.instance.customizations.javascript }}
-
- -
- +
+ + + +
+ + + + + Write JavaScript code directly.
Example: 
console.log('my instance is amazing');
+ + + + + + +
{{ formErrors.instance.customizations.javascript }}
+
- - - - Write CSS code directly. Example:

-
-#custom-css {{ '{' }}
-  color: red;
-{{ '}' }}
-
- - Prepend with #custom-css to override styles. Example:

-
-#custom-css .logged-in-email {{ '{' }}
-  color: red;
-{{ '}' }}
-
- - - +
+ + + + + + Write CSS code directly. Example:

+ 
+    #custom-css {{ '{' }}
+      color: red;
+    {{ '}' }}
+
+ Prepend with #custom-css to override styles. Example:

+ 
+    #custom-css .logged-in-email {{ '{' }}
+      color: red;
+    {{ '}' }}
+
+ + + + + +
{{ formErrors.instance.customizations.css }}
+
+ + - -
{{ formErrors.instance.customizations.css }}
-
- - +
+
- - It seems like the configuration is invalid. Please search for potential errors in the different tabs. +
+
+
+ + It seems like the configuration is invalid. Please search for potential errors in the different tabs. +
+
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss index dd70f1c06..8b1cdcbba 100644 --- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss +++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss @@ -1,12 +1,19 @@ @import '_variables'; @import '_mixins'; -.form-group { - margin-bottom: 25px; +$form-base-input-width: 340px; + +label { + font-weight: $font-regular; + font-size: 100%; +} + +form { + padding-bottom: 1.5rem; } input[type=text] { - @include peertube-input-text(340px); + @include peertube-input-text($form-base-input-width); display: block; } @@ -20,14 +27,15 @@ input[type=checkbox] { } .peertube-select-container { - @include peertube-select-container(340px); + @include peertube-select-container($form-base-input-width); } input[type=submit] { @include peertube-button; @include orange-button; - margin-top: 20px; + display: flex; + margin-left: auto; & + .form-error { display: inline; @@ -36,12 +44,7 @@ input[type=submit] { } .inner-form-title { - text-transform: uppercase; - color: var(--mainColor); - font-weight: $font-bold; - font-size: 13px; - margin-top: 30px; - margin-bottom: 10px; + @include settings-big-title; } textarea { @@ -63,3 +66,21 @@ textarea { opacity: .5; pointer-events: none; } + +my-markdown-textarea ::ng-deep { + .root { + @media screen and (max-width: 1400px) { + flex-direction: column !important; + } + } +} + +.form-group-right { + padding-top: 2px; +} + +ngb-tabset:not(.previews) ::ng-deep { + .nav-link { + font-size: 105%; + } +} \ No newline at end of file diff --git a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss b/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss index 3d3b6dd12..56ea91d0b 100644 --- a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss +++ b/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss @@ -13,9 +13,23 @@ font-weight: 600; } + .ui-button.ui-state-default { + background-color: #f0f0f0; + border: 1px solid #f0f0f0; + } + .ui-button.ui-state-active { background-color: var(--mainColor); border-color: var(--mainColor); + + &:hover { + background-color: var(--mainHoverColor); + border-color: var(--mainHoverColor); + } + } + + .ui-button:not(.ui-state-active).ui-state-focus { + box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2); } } } -- cgit v1.2.3