Updated audio card placeholder
This commit is contained in:
Sanne de Vries
parent
15512a18a4
commit
309561c96f
|
|
@ -1875,7 +1875,59 @@ button.emoji-picker__category-button.active {
|
|||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* .kg-nft-card */
|
||||
/* Audio card
|
||||
/* --------------------------------------------------------------- */
|
||||
|
||||
.kg-audio-card .kg-audio-container {
|
||||
display: flex;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25);
|
||||
}
|
||||
|
||||
.kg-media-container {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 8px;
|
||||
background: var(--whitegrey-l1);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.kg-audio-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.kg-audio-button svg {
|
||||
fill: var(--midlightgrey);
|
||||
opacity: 0.85;
|
||||
transition: var(--animation-speed-normal) ease-out;
|
||||
transform: scale(1.0);
|
||||
}
|
||||
|
||||
.kg-audio-button:hover svg {
|
||||
opacity: 1.0;
|
||||
fill: var(--green);
|
||||
}
|
||||
|
||||
.kg-placeholder-audio {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.kg-placeholder-text {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
margin-left: 12px;
|
||||
color: var(--midgrey);
|
||||
font-family: var(--font-family);
|
||||
font-size: 1.45rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Codemirror overrides
|
||||
/* --------------------------------------------------------------- */
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<KoenigCard
|
||||
@env={{@env}}
|
||||
@class={{concat (kg-style "container-card") " kg-video-card mih10 miw-100 relative" (kg-style "breakout" size=@payload.cardWidth)}}
|
||||
@class={{concat (kg-style "media-card") " kg-card kg-audio-card mih10 miw-100 relative" (kg-style "breakout" size=@payload.cardWidth)}}
|
||||
@headerOffset={{@headerOffset}}
|
||||
@toolbar={{this.toolbar}}
|
||||
@payload={{@payload}}
|
||||
|
|
@ -22,8 +22,8 @@
|
|||
{{on "drop" this.drop}}
|
||||
as |card|
|
||||
>
|
||||
<div style="display:flex">
|
||||
<div style="width: 150px;">
|
||||
<div class="kg-audio-container">
|
||||
<div class="kg-media-container">
|
||||
{{#if (not @payload.src)}}
|
||||
<GhUploader
|
||||
@uploadUrl="/media/upload/"
|
||||
|
|
@ -36,39 +36,37 @@
|
|||
@onFailed={{this.audioUploadFailed}}
|
||||
as |uploader|
|
||||
>
|
||||
<div class="relative{{unless @payload.src " bg-whitegrey-l2"}}">
|
||||
{{#if (or uploader.errors uploader.isUploading)}}
|
||||
<div class="relative miw-100 flex items-center {{if (not this.previewThumbnailSrc @payload.src) "kg-media-placeholder ba b--whitegrey" "absolute absolute--fill bg-white-50"}}">
|
||||
{{#if uploader.errors}}
|
||||
<span class="db absolute top-0 right-0 left-0 flex items-center h8 pl2 pr2 bg-red white sans-serif f7">
|
||||
{{uploader.errors.firstObject.message}}
|
||||
</span>
|
||||
{{/if}}
|
||||
{{#if (or uploader.errors uploader.isUploading)}}
|
||||
<div class="relative miw-100 flex items-center {{if (not this.previewThumbnailSrc @payload.src) "kg-media-placeholder" "absolute absolute--fill bg-white-50"}}">
|
||||
{{#if uploader.errors}}
|
||||
<span class="db absolute top-0 right-0 left-0 flex items-center h8 pl2 pr2 bg-red white sans-serif f7">
|
||||
{{uploader.errors.firstObject.message}}
|
||||
</span>
|
||||
{{/if}}
|
||||
|
||||
{{#if this.isDraggedOver}}
|
||||
<span class="db center sans-serif fw7 f7 middarkgrey">
|
||||
Drop it like it's hot 🔥
|
||||
</span>
|
||||
{{else if uploader.isUploading}}
|
||||
{{uploader.progressBar}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="relative miw-100 flex items-center kg-media-placeholder ba b--whitegrey">
|
||||
{{#if this.isDraggedOver}}
|
||||
<span class="db center sans-serif fw7 f7 middarkgrey">
|
||||
Drop it like it's hot 🔥
|
||||
</span>
|
||||
{{else if uploader.isUploading}}
|
||||
{{uploader.progressBar}}
|
||||
{{else}}
|
||||
<button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey kg-image-button" {{on "click" this.triggerAudioFileDialog}}>
|
||||
{{svg-jar this.placeholder class="kg-placeholder-image" style="transform:scale(0.5)"}}
|
||||
</button>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{#if this.isDraggedOver}}
|
||||
<span class="db center sans-serif fw7 f7 middarkgrey">
|
||||
Drop it like it's hot 🔥
|
||||
</span>
|
||||
{{else if uploader.isUploading}}
|
||||
{{uploader.progressBar}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="kg-media-placeholder">
|
||||
{{#if this.isDraggedOver}}
|
||||
<span class="db center sans-serif fw7 f7 middarkgrey">
|
||||
Drop it like it's hot 🔥
|
||||
</span>
|
||||
{{else if uploader.isUploading}}
|
||||
{{uploader.progressBar}}
|
||||
{{else}}
|
||||
<button class="kg-audio-button" {{on "click" this.triggerAudioFileDialog}}>
|
||||
{{svg-jar "audio-upload" class="kg-placeholder-audio"}}
|
||||
</button>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div style="display:none">
|
||||
<GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.audioMimeTypes}} @onInsert={{this.registerAudioFileInput}} />
|
||||
|
|
@ -88,10 +86,10 @@
|
|||
@paramsHash={{hash url=@payload.src}}
|
||||
as |uploader|
|
||||
>
|
||||
<div class="relative{{unless @payload.thumbnailSrc " bg-whitegrey-l2"}}">
|
||||
<div class="relative">
|
||||
|
||||
{{#if (or uploader.errors uploader.isUploading)}}
|
||||
<div class="relative miw-100 flex items-center {{if (not @payload.thumbnailSrc) "kg-media-placeholder ba b--whitegrey" "absolute absolute--fill bg-white-50"}}">
|
||||
<div class="relative miw-100 flex items-center {{if (not @payload.thumbnailSrc) "kg-media-placeholder" "absolute absolute--fill bg-white-50"}}">
|
||||
{{#if uploader.errors}}
|
||||
<span class="db absolute top-0 right-0 left-0 flex items-center h8 pl2 pr2 bg-red white sans-serif f7">
|
||||
{{uploader.errors.firstObject.message}}
|
||||
|
|
@ -105,12 +103,12 @@
|
|||
{{else if uploader.isUploading}}
|
||||
{{uploader.progressBar}}
|
||||
{{else if (not @payload.thumbnailSrc)}}
|
||||
<button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey kg-image-button" {{on "click" this.triggerThumbnailFileDialog}}>
|
||||
{{svg-jar this.placeholder class="kg-placeholder-image" style="transform:scale(0.5)"}}
|
||||
<button class="kg-audio-button" {{on "click" this.triggerThumbnailFileDialog}}>
|
||||
{{svg-jar "audio-upload" class="kg-placeholder-audio"}}
|
||||
{{!-- <span class="mt2 midgrey">Click to select an audio</span> --}}
|
||||
</button>
|
||||
{{else}}
|
||||
<button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey kg-image-button" {{on "click" this.triggerThumbnailFileDialog}}>
|
||||
<button class="kg-audio-button" {{on "click" this.triggerThumbnailFileDialog}}>
|
||||
<img src={{@payload.thumbnailSrc}} class="{{kg-style this.kgImgStyle}}">
|
||||
{{!-- <span class="mt2 midgrey">Click to select an audio</span> --}}
|
||||
</button>
|
||||
|
|
@ -124,7 +122,7 @@
|
|||
{{/if}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="relative miw-100 flex items-center kg-media-placeholder ba b--whitegrey">
|
||||
<div class="kg-media-placeholder">
|
||||
{{#if this.isDraggedOver}}
|
||||
<span class="db center sans-serif fw7 f7 middarkgrey">
|
||||
Drop it like it's hot 🔥
|
||||
|
|
@ -132,12 +130,12 @@
|
|||
{{else if uploader.isUploading}}
|
||||
{{uploader.progressBar}}
|
||||
{{else if @payload.thumbnailSrc}}
|
||||
<button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey kg-image-button" {{on "click" this.triggerThumbnailFileDialog}}>
|
||||
<button class="kg-audio-button" {{on "click" this.triggerThumbnailFileDialog}}>
|
||||
<img src={{@payload.thumbnailSrc}} style="width: 150px" />
|
||||
</button>
|
||||
{{else}}
|
||||
<button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey kg-image-button" {{on "click" this.triggerThumbnailFileDialog}}>
|
||||
{{svg-jar this.placeholder class="kg-placeholder-image" style="transform:scale(0.5)"}}
|
||||
<button class="kg-audio-button" {{on "click" this.triggerThumbnailFileDialog}}>
|
||||
{{svg-jar "audio-upload" class="kg-placeholder-audio"}}
|
||||
</button>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
|
@ -160,7 +158,7 @@
|
|||
/>
|
||||
</div>
|
||||
{{else}}
|
||||
<div style="flex-grow: 1;display: flex;align-items: center;margin-left: 12px;line-height:3rem">
|
||||
<div class="kg-placeholder-text">
|
||||
Click to upload an audio file
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<KoenigCard
|
||||
@env={{@env}}
|
||||
@class={{concat (kg-style "container-card") " kg-video-card mih10 miw-100 relative " (kg-style "breakout" size=@payload.cardWidth)}}
|
||||
@class={{concat (kg-style "container-card") " kg-card kg-video-card mih10 miw-100 relative " (kg-style "breakout" size=@payload.cardWidth)}}
|
||||
@headerOffset={{@headerOffset}}
|
||||
@toolbar={{this.toolbar}}
|
||||
@payload={{@payload}}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.25 12a5.25 5.25 0 1 0 0 10.5 5.25 5.25 0 0 0 0-10.5Zm-6.75 5.25a6.75 6.75 0 1 1 13.5 0 6.75 6.75 0 0 1-13.5 0Z"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.25 13.5a.75.75 0 0 1 .75.75v6a.75.75 0 0 1-1.5 0v-6a.75.75 0 0 1 .75-.75Z"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.78 13.72a.75.75 0 0 1 0 1.06l-2.25 2.25a.75.75 0 1 1-1.06-1.06l2.25-2.25a.75.75 0 0 1 1.06 0Z"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.72 13.72a.75.75 0 0 1 1.06 0l2.25 2.25a.75.75 0 1 1-1.06 1.06l-2.25-2.25a.75.75 0 0 1 0-1.06ZM2.25 1.5a.75.75 0 0 0-.75.75v16.5a.75.75 0 0 0 .75.75h6a.75.75 0 0 1 0 1.5h-6A2.25 2.25 0 0 1 0 18.75V2.25A2.25 2.25 0 0 1 2.25 0h10.629a2.25 2.25 0 0 1 1.59.658l2.872 2.873c.422.421.659.994.659 1.59V8.25a.75.75 0 0 1-1.5 0V5.121a.75.75 0 0 0-.22-.53L13.41 1.72a.75.75 0 0 0-.53-.219H2.25Z"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.825 12.313c-.273.182-.325.352-.325.437 0 .085.052.255.325.437.268.178.681.313 1.175.313s.907-.135 1.175-.313c.273-.182.325-.352.325-.437 0-.085-.052-.255-.325-.437C6.907 12.135 6.494 12 6 12s-.907.135-1.175.313Zm-.832-1.248C4.539 10.701 5.251 10.5 6 10.5c.749 0 1.46.201 2.007.565.541.361.993.942.993 1.685 0 .743-.452 1.324-.993 1.685C7.461 14.799 6.749 15 6 15c-.749 0-1.46-.201-2.007-.565C3.452 14.074 3 13.493 3 12.75c0-.743.452-1.324.993-1.685Z"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.16 7.645c-.33-.164-.7-.23-1.065-.19l-.358.037.26 5.221a.75.75 0 1 1-1.498.075l-.295-5.93a.75.75 0 0 1 .67-.782l1.062-.113a3.435 3.435 0 0 1 3.304 1.64.75.75 0 0 1-1.284.775 1.935 1.935 0 0 0-.796-.733Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
Loading…
Reference in New Issue