TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 03:44:29 +03:00
Code Issues Projects Releases Wiki Activity

Updated video card settings panel

Browse Source 
Refs https://github.com/TryGhost/Team/issues/1229
This commit is contained in:
Sanne de Vries 2021-12-14 09:37:39 +01:00
parent bebc0242bd
commit a011ee2d97
4 changed files with 132 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
ghost/admin/app/styles/app-dark.css
View File

@ -735,6 +735,35 @@ input:focus,
border-color: var(--green) !important;
}
.kg-settings-panel {
background-color: var(--lightgrey-d1);
box-shadow:
0px -1px 10px rgba(0, 0, 0, 0.2),
0px 2.8px 2.2px rgba(0, 0, 0, 0.1),
0px 6.7px 5.3px rgba(0, 0, 0, 0.1),
0px 12.5px 10px rgba(0, 0, 0, 0.12),
0px 22.3px 17.9px rgba(0, 0, 0, 0.12),
0px 41.8px 33.4px rgba(0, 0, 0, 0.16),
0px 100px 80px rgba(0, 0, 0, 0.2)
;
}
.kg-settings-panel .for-switch .input-toggle-component {
background: var(--lightgrey-l2);
}
.kg-settings-panel .gh-btn-group {
background: var(--lightgrey);
}
.kg-settings-panel .gh-btn-group .gh-btn-group-selected span {
background: var(--lightgrey-l2) !important;
}
.kg-settings-panel .kg-upload-thumbnail-xl:hover {
background: var(--lightgrey) !important;
}
.emoji-picker__emoji:hover {
background: var(--lightgrey) !important;
}
@ -747,6 +776,10 @@ input:focus,
fill: var(--black);
}
.kg-video-thumbnail-xl-container {
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3ERectangle%3C/title%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23303e46' d='M0 0h24v24H0z'/%3E%3Cpath fill='%233e515b' d='M0 0h12v12H0zM12 12h12v12H12z'/%3E%3C/g%3E%3C/svg%3E");
}
.image-overlay button {
background: var(--whitegrey);
}

89
ghost/admin/app/styles/components/koenig.css
View File

@ -2048,18 +2048,12 @@ button.emoji-picker__category-button.active {
cursor: auto;
}
.kg-upload-button .koenig-audio-replace-icon,
.kg-upload-button .koenig-audio-upload-icon {
.kg-upload-button .kg-replace-icon {
width: 18px;
height: 18px;
margin: .6rem .8rem;
}
.koenig-audio-upload-icon path {
stroke: var(--darkgrey);
stroke-width: 2;
}
.kg-upload-button .image-overlay {
position: absolute;
top: 0;
@ -2337,20 +2331,20 @@ button.emoji-picker__category-button.active {
}
.kg-video-card .kg-player-container input[type="range"]::-moz-range-progress {
background: var(--lightgrey);
background: #CED4D9;
}
.kg-video-card .kg-audio-current-time {
color: var(--white);
color: #fff;
}
.kg-video-card .kg-audio-playback-rate {
color: var(--white);
color: #fff;
}
.kg-video-card .kg-audio-play-icon svg,
.kg-video-card .kg-audio-unmute-icon svg {
fill: var(--white);
fill: #fff;
}
.kg-video-card .kg-large-play-icon {
@ -2368,7 +2362,7 @@ button.emoji-picker__category-button.active {
width: 20px;
height: auto;
margin-left: 2px;
fill: var(--white);
fill: #fff;
}
.kg-video-card .image-overlay {
@ -2389,6 +2383,73 @@ button.emoji-picker__category-button.active {
margin-top: -10px;
}
.kg-settings-panel .kg-upload-thumbnail-xl {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 120px;
border: 1px dashed var(--whitegrey-d2);
background: var(--white);
}
.kg-settings-panel .kg-upload-thumbnail-xl:hover {
background: var(--white);
}
.kg-settings-panel .kg-upload-thumbnail-xl svg {
width: 20px;
height: auto;
fill: var(--midgrey);
transition: var(--animation-speed-fast) ease-out;
transform: scale(1.0);
}
.kg-settings-panel .kg-upload-thumbnail-xl:hover svg {
transform: scale(1.08);
}
.kg-settings-panel .kg-thumbnail-xl-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 120px;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3ERectangle%3C/title%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23E6EEF2' d='M0 0h24v24H0z'/%3E%3Cpath fill='%23D8E2E8' d='M0 0h12v12H0zM12 12h12v12H12z'/%3E%3C/g%3E%3C/svg%3E");
border-radius: var(--border-radius);
}
.kg-settings-panel .kg-thumbnail-xl {
width: 100%;
height: auto;
max-height: 120px;
object-fit: cover;
border-radius: var(--border-radius);
}
.kg-settings-panel .kg-replace-icon {
width: 18px;
height: 18px;
margin: .6rem .8rem;
}
.kg-settings-panel .kg-thumbnail-xl-container .image-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 6px;
color: #fff;
background-image: linear-gradient(180deg,rgba(0,0,0,0.2) 0,transparent 70%,transparent 100%);
opacity: 0;
transition: all 0.15s ease-in-out;
}
.kg-settings-panel .kg-thumbnail-xl-container:hover .image-overlay {
opacity: 1;
}
/* Multimedia player UI
/* --------------------------------------------------------------- */
@ -2429,7 +2490,7 @@ button.emoji-picker__category-button.active {
width: 100%;
height: 4px;
cursor: pointer;
background: rgba(124, 139, 154, 0.25);
background: rgba(124, 139, 154, 0.3);
border-radius: 2px;
}
@ -2456,7 +2517,7 @@ button.emoji-picker__category-button.active {
width: 100%;
height: 4px;
cursor: pointer;
background: rgba(124, 139, 154, 0.25);
background: rgba(124, 139, 154, 0.3);
border-radius: 2px;
}

2
ghost/admin/lib/koenig-editor/addon/components/koenig-card-audio.hbs
View File

@ -73,7 +73,7 @@
<div class="image-overlay">
<div class="flex flex-row-reverse">
<button class="bg-white-90 br3 pe-auto" {{on "click" this.deleteThumbnail}}>
{{svg-jar "koenig/kg-trash" class="koenig-audio-replace-icon fill-darkgrey"}}
{{svg-jar "koenig/kg-trash" class="kg-replace-icon fill-darkgrey"}}
</button>
</div>
</div>

42
ghost/admin/lib/koenig-editor/addon/components/koenig-card-video.hbs
View File

@ -1,6 +1,6 @@
<KoenigCard
@env={{@env}}
@class={{concat "kg-card kg-video-card mih10 miw-100 relative " (kg-style "breakout" size=@payload.cardWidth)}}
@class={{concat "kg-card kg-video-card kg-card-hover mih10 miw-100 relative ba b--transparent" (kg-style "breakout" size=@payload.cardWidth)}}
@headerOffset={{@headerOffset}}
@toolbar={{this.toolbar}}
@payload={{@payload}}
@ -136,27 +136,31 @@
@onComplete={{this.customThumbnailUploadCompleted}}
as |uploader|
>
<div class="kg-settings-panel-control kg-settings-panel-control-horizontal">
<div class="kg-settings-panel-control">
<label class="kg-settings-panel-control-label">Custom thumbnail</label>
<div class="kg-settings-panel-control-input">
<div class="relative">
<div class="gh-setting-action gh-uploadbutton-container gh-setting-action-smallimg">
{{#if uploader.isUploading}}
{{!-- {{uploader.progressBar}} --}}
<GhLoadingSpinner />
{{else if @payload.customThumbnailSrc}}
<div class="gh-branding-image-container transparent-bg">
<img class="blog-icon" src={{@payload.customThumbnailSrc}} {{on "click" uploader.triggerFileDialog}}>
<button type="button" class="gh-setting-action-smallimg-delete absolute top-0" {{on "click" this.deleteCustomThumbnail}}>
{{svg-jar "trash" class="w4 h4 fill-white"}}
</button>
<div class="relative w-100">
{{#if uploader.isUploading}}
{{!-- {{uploader.progressBar}} --}}
<div class="kg-upload-thumbnail-xl">
{{uploader.progressBar}}
</div>
{{else if @payload.customThumbnailSrc}}
<div class="kg-thumbnail-xl-container">
<img class="kg-thumbnail-xl" src={{@payload.customThumbnailSrc}} {{on "click" uploader.triggerFileDialog}}>
<div class="image-overlay">
<div class="flex flex-row-reverse">
<button class="bg-white-90 br3 pe-auto" {{on "click" this.deleteCustomThumbnail}}>
{{svg-jar "koenig/kg-trash" class="kg-replace-icon fill-darkgrey"}}
</button>
</div>
</div>
{{else}}
<button type="button" class="gh-btn gh-btn-icon gh-btn-white self-center" {{on "click" uploader.triggerFileDialog}}>
<span>{{svg-jar "upload-fill"}}</span>
</button>
{{/if}}
</div>
</div>
{{else}}
<button type="button" class="gh-btn kg-upload-thumbnail-xl" {{on "click" uploader.triggerFileDialog}}>
{{svg-jar "upload-fill"}}
</button>
{{/if}}
</div>
<div style="display:none">
<GhFileInput