view page done

frontend/src/app/components/copy-field/copy-field.component.html

@@ -1,7 +1,7 @@
 <mat-form-field appearance="outline" color="accent">
-  <mat-label>{{ name }}</mat-label>
+  <mat-label>{{ label }}</mat-label>
   <input matInput [value]="value" readonly="readonly" />
-  <button mat-icon-button matSuffix [attr.aria-label]="'Copy'">
+  <button mat-icon-button matSuffix [attr.aria-label]="'Copy'" (click)="copy()">
     <mat-icon>content_copy</mat-icon>
   </button>
 </mat-form-field>

frontend/src/app/components/copy-field/copy-field.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'copy-field',
@@ -7,10 +8,14 @@ import { Component, Input } from '@angular/core';
 })
 export class CopyFieldComponent {
   // Two paramets: name, value
-  @Input() name: string;
+  @Input() label: string = 'Loading...';
-  @Input() value: string;
+  @Input() value: string = 'Loading...';
+
+  constructor(private snackBar: MatSnackBar) {}
 
   public copy() {
+    navigator.clipboard.writeText(this.value);
 
+    this.snackBar.open(`Copied ${this.label}!`);
   }
 }

frontend/src/app/components/copy-field/copy-field.module.ts

@@ -4,10 +4,16 @@ import { CopyFieldComponent } from './copy-field.component';
 import { MatInputModule } from '@angular/material/input';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
-
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 @NgModule({
   declarations: [CopyFieldComponent],
-  imports: [CommonModule, MatInputModule, MatIconModule, MatButtonModule],
+  imports: [
+    CommonModule,
+    MatInputModule,
+    MatIconModule,
+    MatButtonModule,
+    MatSnackBarModule,
+  ],
   exports: [CopyFieldComponent],
 })
 export class CopyFieldModule {}

frontend/src/app/router/router.module.ts

@@ -13,6 +13,7 @@ import { PageNotFoundModule } from '../components/pagenotfound/pagenotfound.modu
 import { PageNotFoundComponent } from '../components/pagenotfound/pagenotfound.component';
 import { ViewComponent } from '../routes/view/view.component';
 import { CopyFieldModule } from '../components/copy-field/copy-field.module';
+import { MatButtonModule } from '@angular/material/button';
 
 const routes: Routes = [
   { path: '', component: UploadComponent },
@@ -29,6 +30,7 @@ const routes: Routes = [
     NgxDropzoneModule,
     MatSnackBarModule,
     MatProgressSpinnerModule,
+    MatButtonModule,
     PageNotFoundModule,
     CopyFieldModule,
     ApiModule,

frontend/src/app/routes/view/view.component.html

@@ -1,16 +1,34 @@
 <div class="content-border">
   <div class="container centered">
-    <div class="col p-3">
+    <div class="row">
+      <div class="col-12">
         <h1>Uploaded Image</h1>
       </div>
 
-    <div class="col p-3">
+      <div class="col-12 py-3">
         <img class="uploadedimage" src="{{ imageUrl }}" als="Uploaded" />
       </div>
 
-    <div class="col-12 p-3">
+      <div class="col-12">
-      <copy-field name="Image URL" [value]="imageUrl"></copy-field>
+        <copy-field label="Image URL" [value]="imageUrl"></copy-field>
+      </div>
+      <div class="col-md-6 col-12">
+        <copy-field label="Markdown" [value]="imageLinks.markdown"></copy-field>
+      </div>
+      <div class="col-md-6 col-12">
+        <copy-field label="HTML" [value]="imageLinks.html"></copy-field>
+      </div>
+      <div class="col-md-6 col-12">
+        <copy-field label="BBCode" [value]="imageLinks.bbcode"></copy-field>
+      </div>
+      <div class="col-md-6 col-12">
+        <copy-field label="Rst" [value]="imageLinks.rst"></copy-field>
+      </div>
+      <div class="col-12">
+        <button mat-raised-button color="accent" (click)="goBackHome()">
+          Upload Another
+        </button>
+      </div>
     </div>
-    <div class="col-12 p-3"></div>
   </div>
 </div>

frontend/src/app/routes/view/view.component.scss

@@ -1,12 +1,9 @@
 .uploadedimage {
-  width: 100%;
-  height: auto;
-
   border-radius: 20px;
 }
 
 .content-border {
-  padding-top: 2rem;
+  padding: 2rem;
 }
 
 

frontend/src/app/routes/view/view.component.ts

@@ -38,4 +38,8 @@ export class ViewComponent implements OnInit {
     this.imageUrl = this.imageService.GetImageURL(hash);
     this.imageLinks = this.imageService.CreateImageLinks(this.imageUrl);
   }
+
+  goBackHome() {
+    this.router.navigate(['/']);
+  }
 }

frontend/src/styles.scss

@@ -251,8 +251,6 @@ $altTheme: mat-light-theme($theme-primary, $theme-accent, $theme-warn);
   }
 }
 
-// Custom shit
-$grid-gutter-width: 5rem;
 
 // Include bootstrap-grid.scss from node_modules
 @import "../node_modules/bootstrap/scss/bootstrap-grid.scss";
@@ -272,8 +270,15 @@ app-root {
 html {
   box-sizing: border-box;
 }
-*, *:before, *:after {
+*,
+*:before,
+*:after {
   box-sizing: inherit;
+
+  -webkit-transition: 0.2s;
+  -moz-transition: 0.2s;
+  -o-transition: 0.2s;
+  transition: 0.2s;
 }
 
 @import "./styles.personal";