diff options
Diffstat (limited to 'src/app/components/post-attachment')
3 files changed, 20 insertions, 69 deletions
diff --git a/src/app/components/post-attachment/post-attachment.component.css b/src/app/components/post-attachment/post-attachment.component.css index 572cc99..6cdab0b 100644 --- a/src/app/components/post-attachment/post-attachment.component.css +++ b/src/app/components/post-attachment/post-attachment.component.css @@ -1,32 +1,3 @@ -/* Attachment */ - -.attachment { - border: 2px solid black; - border-top: 0; - border-radius: 0 0 .6em .6em; - padding: .4em; - padding-top: 1em; - margin-top: calc(-0.8em - 2px); -} - -.clickable { - width: 100%; - height: 100%; - display: flex; -} - -.clickable:hover { - cursor: pointer; -} - -.attachment-name { - flex: 1; -} - -.attachment-type { - margin-left: .2em; -} - /* Full attachment */ .show-full-attachment { @@ -36,9 +7,6 @@ width: 100vw; height: 100vh; background-color: #000000AF; - display: flex; - justify-content: center; - align-items: center; z-index: 2; } @@ -49,27 +17,7 @@ .attachment-download { max-width: 420px !important; - margin: 0 .4em; + background-color: var(--card-bg); text-decoration: none; - color: white; - border-color: white; - background-color: black; -} - -.attachment-download:hover { - background-color: white; - color: var(--focus-color); -} - -.close { - position: fixed; - top: .2em; - right: .2em; - font-size: 2em; - color: whitesmoke; -} - -.close:hover { - color: var(--failure); - cursor: pointer; + color: inherit; } diff --git a/src/app/components/post-attachment/post-attachment.component.html b/src/app/components/post-attachment/post-attachment.component.html index 4d381d1..e5e4b5a 100644 --- a/src/app/components/post-attachment/post-attachment.component.html +++ b/src/app/components/post-attachment/post-attachment.component.html @@ -1,18 +1,16 @@ -<div class="attachment"> - <div class="clickable" (click)="toggleShowFull()"> - <div class="attachment-name"> - {{ fileName }} - </div> - <div class="attachment-type"> - {{ fileType }} - </div> +<figure class="form-attachment border-faded-slim flexible flex-row flex-no-wrap padding-dot2 hover-half-opacity margin-top-bot-dot2" (click)="toggleShowFull()"> + <div class="flex-col flex-justify-center margin-right-dot2" [ngSwitch]="fileType"> + <img *ngSwitchCase="'img'" src="/assets/icons/tabler-icon-photo.svg"> + <img *ngSwitchDefault src="/assets/icons/tabler-icon-file.svg"> </div> -</div> + <summary class="flex-col flex-justify-center"> + {{ fileName }} + </summary> +</figure> -<div class="show-full-attachment" *ngIf="showFull" (click)="toggleShowFull()"> +<div class="show-full-attachment flex-row flex-justify-center flex-center-align-items" *ngIf="showFull" (click)="toggleShowFull()"> <img class="attachment-img" *ngIf="isImage" src="{{paramURL}}"> - <a class="attachment-download submit-btn" *ngIf="!isImage" href="{{paramURL}}">Download attachment</a> - <div class="close"> - ☒ - </div> + <a class="attachment-download border-faded-slim padding-dot4 hover-half-opacity click-effect border-radius-dot3" *ngIf="!isImage" href="{{paramURL}}"> + Download attachment + </a> </div> diff --git a/src/app/components/post-attachment/post-attachment.component.ts b/src/app/components/post-attachment/post-attachment.component.ts index 1d00def..1aeca37 100644 --- a/src/app/components/post-attachment/post-attachment.component.ts +++ b/src/app/components/post-attachment/post-attachment.component.ts @@ -18,7 +18,12 @@ export class PostAttachmentComponent implements OnInit { ngOnInit(): void { this.isImage = this.paramURL.includes('image') && !this.paramURL.endsWith('pdf'); this.fileType = this.isImage ? 'img' : 'raw'; - this.fileName = this.paramURL.match('(?<=\/)(?:.(?!\/))+$')?.pop() ?? 'Attachment'; + if (this.fileType === 'img') { + this.fileName = this.paramURL.match(/(?!\/)+?[^\/]+?(?=\.)/g)?.pop() ?? 'Attachment'; + } + else { + this.fileName = this.paramURL.match(/[^\/]+?$/g)?.pop() ?? 'Attachment'; + } } toggleShowFull(): void { |