-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Read all about the changes in https://github.com/DigitalExcellence/dex-frontend/releases/tag/v0.8.0-beta
- Loading branch information
Showing
45 changed files
with
860 additions
and
220 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,38 @@ | ||
| # DeX-Frontend | ||
|
|
||
| Angular Frontend for DeX platform | ||
|
|
||
| What is Digital Excellence? | ||
| A lot of employees and students of FHICT create a lot of nice products. As a hobby, for their work or because of a school project. These can be software solutions, small scripts, research papers, thesis but possibly also project ideas and proposals for others to pick up. Unfortunately, most of them remain private and are not known by the majority of the population. The goal of the DeX-platform (short: DeX) is to make all this work more findable and thus improving collaboration. | ||
|
|
||
| Commonly heard criticism is that “we already have GitLab for this”. This, however, is only one specific source. A content creator can choose to use a different platform for its project. DeX will search for all sources that are linked to the platform. Moreover, GitLab is mostly used in software development. Research papers, for instance, have a different source. We want to find all relevant information and thus search in all available sources, not only GitLab. | ||
| The benefits of using DeX will include, but probably not be limited to: | ||
|
|
||
| VISIBILITY | ||
| Projects that are now only known by a small group of people will be more visible to the whole community. This increases the visibility of innovative solutions as well as their collaborators. | ||
|
|
||
| COLLABORATE | ||
| People can easily find the collaborators of a project (proposal) and collaborate with them more easily. This creates a sort of open-source community in which all our collaborative ideas are shared. | ||
|
|
||
| AGGREGATE | ||
| People have a better overview of their own work. This can be useful for instance when maintaining a portfolio or using examples in class, both as a teacher as well as a student. A student can show his or her previous work and maybe even demonstrate certain learning outcomes within that particular semester. | ||
|
|
||
| SHOWCASE | ||
| Administrators can more easily find good examples of innovative solutions (showcases) that are built by the community. This can then, for instance, be used for promotional use. The interesting projects will be praised by the community and will be identified sooner and more easily. Such projects can then be put on the website of FHICT for instance. | ||
|
|
||
| CENTRALIZE | ||
| It can be a central place where all project proposals can be gathered. Internships, minors, challenges for certain semesters such as Open Innovation all have their own format and system where employees and students need to work with. This can all potentially be grouped into one system. | ||
|
|
||
| SUGGEST | ||
| DeX can suggest interesting projects for you as a person, based on interest such as techniques, a certain topic or based on the collaborators which (some of them) you follow and/or share the same interests. This way you will be informed and up-to-date with the latest news and trends. | ||
|
|
||
|    [](https://github.com/DigitalExcellence/dex-frontend/issues) [](https://sonarcloud.io/dashboard?id=DigitalExcellence_dex-frontend) [](https://sonarcloud.io/dashboard?id=DigitalExcellence_dex-frontend) | ||
|
|
||
|
|
||
| This repository contains the Angular Frontend for [DeX platform](https://dex.software). | ||
|
|
||
| ## Quick links | ||
|
|
||
| * [Check out the Wiki](https://github.com/DigitalExcellence/dex-frontend/wiki) | ||
| * [View all releases](https://github.com/DigitalExcellence/dex-frontend/releases) | ||
| * [Changelog](CHANGELOG.md) | ||
| * [Read the license (LGPL-3.0)](LICENSE.md) | ||
| * [Coding guidelines](https://github.com/DigitalExcellence/dex-frontend/wiki/Coding-Guidelines) | ||
|
|
||
| ## What is Digital Excellence? | ||
| A lot of employees and students of Fontys School of ICT (FHICT) create a lot of nice products. As a hobby, for their work or because of a school project. These can be software solutions, small scripts, research papers, thesis but possibly also project ideas and proposals for others to pick up. Unfortunately, most of them remain private and are not known by the majority of the population. The goal of the DeX-platform (short: DeX) is to make all this work more findable and thus improving collaboration. | ||
|
|
||
| Commonly heard criticism is that “we already have GitLab for this”. This, however, is only one specific source. A content creator can choose to use a different platform for its project. DeX will search for all sources that are linked to the platform. Moreover, GitLab is mostly used in software development. Research papers, for instance, have a different source. We want to find all relevant information and thus search in all available sources, not only GitLab. | ||
| The benefits of using DeX will include, but probably not be limited to: | ||
|
|
||
| #### VISIBILITY | ||
| Projects that are now only known by a small group of people will be more visible to the whole community. This increases the visibility of innovative solutions as well as their collaborators. | ||
|
|
||
| #### COLLABORATE | ||
| People can easily find the collaborators of a project (proposal) and collaborate with them more easily. This creates a sort of open-source community in which all our collaborative ideas are shared. | ||
|
|
||
| #### AGGREGATE | ||
| People have a better overview of their own work. This can be useful for instance when maintaining a portfolio or using examples in class, both as a teacher as well as a student. A student can show his or her previous work and maybe even demonstrate certain learning outcomes within that particular semester. | ||
|
|
||
| #### SHOWCASE | ||
| Administrators can more easily find good examples of innovative solutions (showcases) that are built by the community. This can then, for instance, be used for promotional use. The interesting projects will be praised by the community and will be identified sooner and more easily. Such projects can then be put on the website of FHICT for instance. | ||
|
|
||
| #### CENTRALIZE | ||
| It can be a central place where all project proposals can be gathered. Internships, minors, challenges for certain semesters such as Open Innovation all have their own format and system where employees and students need to work with. This can all potentially be grouped into one system. | ||
|
|
||
| #### SUGGEST | ||
| DeX can suggest interesting projects for you as a person, based on interest such as techniques, a certain topic or based on the collaborators which (some of them) you follow and/or share the same interests. This way you will be informed and up-to-date with the latest news and trends. | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import { | ||
| Directive, | ||
| Output, | ||
| Input, | ||
| EventEmitter, | ||
| HostBinding, | ||
| HostListener | ||
| } from '@angular/core'; | ||
|
|
||
| @Directive({ | ||
| selector: '[app-DndDirective]' | ||
| }) | ||
| export class DndDirective { | ||
| @HostBinding('class.fileover') fileOver: boolean; | ||
| @Output() fileDropped = new EventEmitter<any>(); | ||
|
|
||
| // Dragover listener | ||
| @HostListener('dragover', ['$event']) onDragOver(evt) { | ||
| evt.preventDefault(); | ||
| evt.stopPropagation(); | ||
| this.fileOver = true; | ||
| } | ||
|
|
||
| // Dragleave listener | ||
| @HostListener('dragleave', ['$event']) public onDragLeave(evt) { | ||
| evt.preventDefault(); | ||
| evt.stopPropagation(); | ||
| this.fileOver = false; | ||
| } | ||
|
|
||
| // Drop listener | ||
| @HostListener('drop', ['$event']) public ondrop(evt) { | ||
| evt.preventDefault(); | ||
| evt.stopPropagation(); | ||
| this.fileOver = false; | ||
| const files = evt.dataTransfer.files; | ||
| if (files.length > 0) { | ||
| this.fileDropped.emit(files); | ||
| } | ||
| } | ||
| } |
30 changes: 30 additions & 0 deletions
30
src/app/components/file-uploader/file-uploader.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| <div class="container" DndDirective> | ||
| <input type="file" #fileDropRef id="fileDropRef" (change)="fileBrowseHandler($event.target)" | ||
| [multiple]="acceptMultiple" [accept]="acceptedTypes.join(',')" /> | ||
| <img src="assets/images/file-dnd.svg" alt="file-dnd-icon"> | ||
| <label for="fileDropRef"> | ||
| <strong>Choose a file</strong> | ||
| <span class="box__dragndrop"> or drag it here</span>. | ||
| </label> | ||
| </div> | ||
| <div class="files-list"> | ||
| <div class="single-file" *ngFor="let file of files; let i = index"> | ||
| <div class="file-info"> | ||
| <button type="button" class="btn btn-icon btn-danger" aria-label="error" | ||
| (click)="deleteFile(i)"><span aria-hidden="true">×</span> | ||
| </button> | ||
| <img alt="image-preview" class="file-icon" [src]=file?.preview > | ||
| <h4 class="file-name"> | ||
| {{ file?.name }} | ||
| </h4> | ||
| <h4 class="file-size"> | ||
| {{ file?.readableSize }} | ||
| </h4> | ||
| </div> | ||
| <div *ngIf="file.progress" class="file-progress" > | ||
| <div class="progress-bar" id="progress-bar-{{i}}" [style.width]="file.progress + '%'">{{file.progress}}% | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> |
104 changes: 104 additions & 0 deletions
104
src/app/components/file-uploader/file-uploader.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| @import "assets/styles/variables"; | ||
|
|
||
| .container { | ||
| width: 100%; | ||
| height: 200px; | ||
| padding: 2rem; | ||
| text-align: center; | ||
| border: dashed 1px $light-mode-grey-primary; | ||
| position: relative; | ||
| margin: 0 auto 20px auto; | ||
|
|
||
|
|
||
| input { | ||
| opacity: 0; | ||
| position: absolute; | ||
| z-index: 2; | ||
| width: 100%; | ||
| height: 100%; | ||
| top: 0; | ||
| left: 0; | ||
| } | ||
|
|
||
| label { | ||
| max-width: 80%; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; | ||
| display: inline-block; | ||
| overflow: hidden; | ||
| font-size: 1.2rem; | ||
| } | ||
|
|
||
| img { | ||
| width: 100%; | ||
| height: 80px; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| strong { | ||
| color: $accent-color-red-primary; | ||
| } | ||
| } | ||
|
|
||
| .files-list { | ||
| background-color: $light-mode-grey-quaternary; | ||
| transition: 0.5s all; | ||
| border-radius: 6px; | ||
|
|
||
| div.single-file:not(:last-child) { | ||
| border-bottom: 3px solid $light-mode-grey-primary; | ||
| border-radius: 2px; | ||
| } | ||
|
|
||
| div.single-file { | ||
| padding: 0 10px; | ||
|
|
||
| div.file-info { | ||
| display: flex; | ||
| align-items: center; | ||
| margin-bottom: 10px; | ||
|
|
||
| .file-icon { | ||
| max-width: 128px; | ||
| height: 128px; | ||
| object-fit: cover; | ||
| } | ||
|
|
||
| .file-name { | ||
| font-size: 1rem; | ||
| margin: 0 auto 0 5%; | ||
| } | ||
|
|
||
| .file-size { | ||
| color: gray; | ||
| margin: 0 auto 0 auto; | ||
| } | ||
|
|
||
| .delete { | ||
| font-size: 2rem; | ||
| margin: 0 20px 0 auto; | ||
| } | ||
|
|
||
| button { | ||
| background: $accent-color-red-primary; | ||
| border-radius: 50px; | ||
| width: 50px; | ||
| height: 50px; | ||
| border: none; | ||
| font-size: 25px; | ||
| font-weight: 800; | ||
| margin-right: 1em; | ||
| } | ||
| } | ||
|
|
||
| .file-progress { | ||
| min-width: 100%; | ||
| } | ||
|
|
||
| .progress-bar { | ||
| background-color: $accent-color-red-primary; | ||
| transition: 0.5s all; | ||
| border-radius: 25px; | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.