Skip to content

style: Update modal styles within project page #137

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
KobenjiSan wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

style: Update modal styles within project page #137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 60 additions & 33 deletions ...ClientApp/src/app/projects/project-file-explorer/modal-folder/modal-folder.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,64 @@
<!-- Modal -->
<div class="modal-content">
<div class="modal-header justify-content-center">
<h5 class="modal-title">Create Folder</h5>
</div>
<div class="modal-header modal-header--center">
<h5 class="modal-title">Create Folder</h5>

<!-- Register Form Start -->
<form class="form" [formGroup]="folderForm" (ngSubmit)="onSubmit()">
<div class="modal-body">
<!-- Form Group Username -->
<div class="form-group">
<label for="folderName">Folder Name:</label>
<input formControlName="folderName" type="text" class="form-control" placeholder="" [class.invalid]="folderName.touched && folderName.invalid" [class.valid]="folderName.valid" [readOnly]="isLoading" required>
<div *ngIf="folderName.touched && folderName.errors" class="text-danger">
<span [hidden]="!folderName.errors?.['minlength']">Minimum 1 character</span>
<span [hidden]="!folderName.errors?.['maxlength']">Maximum 20 character</span>
<span [hidden]="!folderName.errors?.['noMatch']">Folder Already Exist</span>
<span [hidden]="!folderName.errors?.['noSpaceSpecial']">No Space or Special Character</span>
</div>
</div>
</div>
<div class="modal-footer justify-content-center">
<!-- Form Group Register -->
<div class="form-group">
<button type="submit" class="btn" value="Submit" [disabled]="folderName.invalid">
<div *ngIf="!isLoading">
<span>Create</span>
</div>
<div *ngIf="isLoading" class="spinner-border" role="status">
<span class="sr-only"></span>
</div>
</button>
</div>
<button type="button" class="btn" (click)="closeModal()">Close</button>
<button type="button" class="close" (click)="closeModal()" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>

<form [formGroup]="folderForm" (ngSubmit)="onSubmit()">
<div class="modal-body">
<div class="form-group">
<label for="folderName">Folder Name:</label>

<input
id="folderName"
formControlName="folderName"
type="text"
class="form-control"
[class.invalid]="folderName.touched && folderName.invalid"
[class.valid]="folderName.touched && folderName.valid"
[readOnly]="isLoading"
required
/>

<div *ngIf="folderName.touched && folderName.errors" class="text-danger">
<span [hidden]="!folderName.errors?.['minlength']">Minimum 1 character</span>
<span [hidden]="!folderName.errors?.['maxlength']">Maximum 20 characters</span>
<span [hidden]="!folderName.errors?.['noMatch']">Folder already exists</span>
<span [hidden]="!folderName.errors?.['noSpaceSpecial']">No spaces or special characters</span>
</div>
</form> <!-- Register Form End -->
</div>
</div>
</div>

<div class="modal-footer">
<!-- Secondary -->
<button
type="button"
class="btn btn-outline-primary"
(click)="closeModal()"
[disabled]="isLoading"
>
Close
</button>

<!-- Primary -->
<button
type="submit"
class="btn btn-primary"
[disabled]="folderName.invalid || isLoading"
>
<span *ngIf="!isLoading">Create</span>

<span
*ngIf="isLoading"
class="spinner-border spinner-border-sm"
role="status"
aria-hidden="true"
></span>
</button>
</div>
</form>
</div>
17 changes: 0 additions & 17 deletions ...ClientApp/src/app/projects/project-file-explorer/modal-folder/modal-folder.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +0,0 @@
/* You can add global styles to this file, and also import other style files */
.modal-content {
background-color: var(--background-color-tertiary);
}

.btn {
color:var(--primary-color);
background-color: var(--button-background-color);
}

.invalid {
border-color: #dc3545 !important;
}

.valid{
border-color: #28a745 !important;
}
45 changes: 31 additions & 14 deletions ...ClientApp/src/app/projects/project-file-explorer/modal-upload/modal-upload.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,33 @@
<!-- Modal -->
<div class="modal-content">
<div class="modal-header justify-content-center">
<h5 class="modal-title">Upload Progress</h5>
<div class="modal-content fork-modal">
<div class="modal-header modal-header--center">
<h5 class="modal-title">Upload Progress</h5>

<button type="button" class="close" (click)="uploadModalRef.hide()" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>

<div class="modal-body p-0">
<table class="table mb-0" *ngIf="uploadFileList.length > 0">
<tr *ngFor="let fileItem of uploadFileList">
<app-modal-upload-item
[uploadFileItem]="fileItem"
(uploadedFile)="uploadedFile($event)"
(updatedFile)="updateFileUpload($event)"
(removedFile)="removeFileUpload($event)"
></app-modal-upload-item>
</tr>
</table>

<div class="p-4 text-center" *ngIf="uploadFileList.length === 0">
<p class="mb-0">No uploads in progress.</p>
</div>
<div class="modal-body p-0">
<table class="table mb-0" *ngIf="uploadFileList.length > 0 ? true : uploadModalRef.hide();">
<tr *ngFor="let fileItem of uploadFileList">
<app-modal-upload-item [uploadFileItem]="fileItem" (uploadedFile)="uploadedFile($event)" (updatedFile)="updateFileUpload($event)" (removedFile)="removeFileUpload($event)"></app-modal-upload-item>
</tr>
</table>
</div>
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-secondary" (click)="uploadModalRef.hide()">Close</button>
</div>
</div>
</div>

<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" (click)="uploadModalRef.hide()">
Close
</button>
</div>
</div>
91 changes: 48 additions & 43 deletions ...Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,54 +205,59 @@

<!--Delete Modal-->
<div
class="modal fade"
id="deleteModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content file-explorer-card__modal">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Delete Window</h5>
<button
type="button"
class="close"
#closeDeleteModalbutton
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to delete this file ?
<div class="note">
* It will detach all the notebooks attached to it !!
</div>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-outline-primary"
data-dismiss="modal"
>
Close
</button>
<button
type="button"
class="btn btn-danger"
(click)="delete()"
data-dismiss="modal"
>
Delete
</button>
class="modal fade"
id="deleteModal"
tabindex="-1"
role="dialog"
aria-labelledby="deleteModalLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content file-explorer-card__modal">
<div class="modal-header modal-header--center">
<h5 class="modal-title" id="deleteModalLabel">Delete</h5>

<button
type="button"
class="close"
#closeDeleteModalbutton
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
</div>

<div class="modal-body">
<p>Are you sure you want to delete this file?</p>

<div class="file-explorer-card__note">
* It will detach all notebooks attached to it.
</div>
</div>

<div class="modal-footer">
<button
type="button"
class="btn btn-outline-primary"
data-dismiss="modal"
>
Close
</button>

<button
type="button"
class="btn btn-danger"
(click)="delete()"
data-dismiss="modal"
>
Delete
</button>
</div>
</div>
</div>
</div>
</div>

<ng-template #uploadModal>
<app-modal-upload
Expand Down
4 changes: 1 addition & 3 deletions ...Web/ClientApp/src/app/projects/project-file-explorer/project-file-explorer.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,9 +106,7 @@
}

/* Modal surface */
.file-explorer-card__modal {
background: var(--background-color-tertiary);
}


.note {
font-size: var(--fs-12);
Expand Down
86 changes: 57 additions & 29 deletions ...rc/app/projects/project-file-preview/modal-observablehq/modal-observablehq.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,59 @@
<!-- Modal -->
<div class="modal-content">
<div class="modal-header justify-content-center">
<h5 class="modal-title">Load Observable Notebook</h5>
</div>
<div class="modal-content load-notebook-modal surface-soft">
<div class="modal-header modal-header--center">
<h5 class="modal-title">Load Observable Notebook</h5>
</div>

<!-- Register Form Start -->
<form class="form" [formGroup]="notebookForm" (ngSubmit)="onSubmit()">
<div class="modal-body">
<!-- Form Group Username -->
<div class="form-group">
<label for="notebookLink">Notebook Link:</label>
<input formControlName="notebookLink" type="text" class="form-control" placeholder=""[class.invalid]="notebookLink.touched && notebookLink.invalid" [class.valid]="notebookLink.valid" [readOnly]="isLoading" required>
<div *ngIf="notebookLink.touched && notebookLink.errors" class="text-danger">
<span [hidden]="!notebookLink.errors?.['fromObservable']">URL must be from domain ObservableHQ</span>
<span [hidden]="!notebookLink.errors?.['isValidURL']">Not a valid URL</span>
</div>
</div>
</div>
<div class="modal-footer justify-content-center">
<!-- Form Group Register -->
<div class="form-group">
<button type="submit" class="btn" value="Submit" [disabled]="notebookLink.invalid">
<span>Load Notebook</span>
</button>
</div>
<button type="button" class="btn" (click)="usePreset()">Use Preset</button>
<button type="button" class="btn" (click)="closeModal()">Close</button>
<form class="form" [formGroup]="notebookForm" (ngSubmit)="onSubmit()">
<div class="modal-body">
<div class="form-group">
<label for="notebookLink">Notebook Link</label>

<input
id="notebookLink"
formControlName="notebookLink"
type="text"
class="form-control"
[class.invalid]="notebookLink.touched && notebookLink.invalid"
[class.valid]="notebookLink.valid"
[readOnly]="isLoading"
required
/>

<div *ngIf="notebookLink.touched && notebookLink.errors" class="text-danger">
<span [hidden]="!notebookLink.errors?.['fromObservable']">
URL must be from ObservableHQ
</span>
<span [hidden]="!notebookLink.errors?.['isValidURL']">
Not a valid URL
</span>
</div>
</form> <!-- Register Form End -->
</div>
</div>
</div>

<div class="modal-footer">
<button
type="button"
class="btn btn-outline-primary"
(click)="closeModal()"
>
Close
</button>

<button
type="button"
class="btn btn-primary"
(click)="usePreset()"
>
Use Preset
</button>

<button
type="submit"
class="btn btn-primary"
[disabled]="notebookLink.invalid || isLoading"
>
<span>Load Notebook</span>
</button>
</div>
</form>
</div>
Loading
Loading