From 930c1a2933c32a1aea61599a3be59db25cea1067 Mon Sep 17 00:00:00 2001 From: "Patrik J. Braun" Date: Sat, 24 Nov 2018 14:21:46 +0100 Subject: [PATCH] design bug fix (search and settings badge) --- README.md | 1 + backend/model/sql/SearchManager.ts | 30 ++++++++++++++----- common/entities/AutoCompleteItem.ts | 3 +- frontend/app/frame/frame.component.css | 17 ++++++----- frontend/app/frame/frame.component.html | 2 +- frontend/app/gallery/gallery.component.css | 4 +++ frontend/app/gallery/gallery.component.html | 12 ++++---- .../search/search.gallery.component.html | 3 +- 8 files changed, 50 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index f2700580..7938da77 100644 --- a/README.md +++ b/README.md @@ -138,6 +138,7 @@ apt-get install build-essential libkrb5-dev gcc g++ * Random photo url * You can generate an url that returns a random photo from your gallery. You can use this feature to develop 3rd party applications, like: changing desktop background * video support + * uses ffmpeg and ffprobe to generate video thumbnails * **Markdown based blogging support** - `future plan` * you can write some note in the blog.md for every directory * bug free :) - `In progress` diff --git a/backend/model/sql/SearchManager.ts b/backend/model/sql/SearchManager.ts index e65d5ee1..019b488b 100644 --- a/backend/model/sql/SearchManager.ts +++ b/backend/model/sql/SearchManager.ts @@ -5,6 +5,7 @@ import {SQLConnection} from './SQLConnection'; import {PhotoEntity} from './enitites/PhotoEntity'; import {DirectoryEntity} from './enitites/DirectoryEntity'; import {MediaEntity} from './enitites/MediaEntity'; +import {VideoEntity} from './enitites/VideoEntity'; export class SearchManager implements ISearchManager { @@ -27,6 +28,7 @@ export class SearchManager implements ISearchManager { let result: AutoCompleteItem[] = []; const photoRepository = connection.getRepository(PhotoEntity); + const videoRepository = connection.getRepository(VideoEntity); const mediaRepository = connection.getRepository(MediaEntity); const directoryRepository = connection.getRepository(DirectoryEntity); @@ -60,13 +62,21 @@ export class SearchManager implements ISearchManager { .filter(p => p.toLowerCase().indexOf(text.toLowerCase()) !== -1), SearchTypes.position)); }); - result = result.concat(this.encapsulateAutoComplete((await mediaRepository + result = result.concat(this.encapsulateAutoComplete((await photoRepository .createQueryBuilder('media') .select('DISTINCT(media.name)') .where('media.name LIKE :text COLLATE utf8_general_ci', {text: '%' + text + '%'}) .limit(5) .getRawMany()) - .map(r => r.name), SearchTypes.image)); + .map(r => r.name), SearchTypes.photo)); + + result = result.concat(this.encapsulateAutoComplete((await videoRepository + .createQueryBuilder('media') + .select('DISTINCT(media.name)') + .where('media.name LIKE :text COLLATE utf8_general_ci', {text: '%' + text + '%'}) + .limit(5) + .getRawMany()) + .map(r => r.name), SearchTypes.video)); result = result.concat(this.encapsulateAutoComplete((await directoryRepository .createQueryBuilder('dir') @@ -91,9 +101,15 @@ export class SearchManager implements ISearchManager { resultOverflow: false }; - const query = connection - .getRepository(MediaEntity) - .createQueryBuilder('media') + let repostiroy = connection.getRepository(MediaEntity); + + if (searchType === SearchTypes.photo) { + repostiroy = connection.getRepository(PhotoEntity); + } else if (searchType === SearchTypes.video) { + repostiroy = connection.getRepository(VideoEntity); + } + + const query = repostiroy.createQueryBuilder('media') .innerJoinAndSelect('media.directory', 'directory') .orderBy('media.metadata.creationDate', 'ASC'); @@ -102,7 +118,7 @@ export class SearchManager implements ISearchManager { query.orWhere('directory.name LIKE :text COLLATE utf8_general_ci', {text: '%' + text + '%'}); } - if (!searchType || searchType === SearchTypes.image) { + if (!searchType || searchType === SearchTypes.photo || searchType === SearchTypes.video) { query.orWhere('media.name LIKE :text COLLATE utf8_general_ci', {text: '%' + text + '%'}); } @@ -173,7 +189,7 @@ export class SearchManager implements ISearchManager { return result; } - private encapsulateAutoComplete(values: Array, type: SearchTypes): Array { + private encapsulateAutoComplete(values: string[], type: SearchTypes): Array { const res = []; values.forEach((value) => { res.push(new AutoCompleteItem(value, type)); diff --git a/common/entities/AutoCompleteItem.ts b/common/entities/AutoCompleteItem.ts index 5bea8449..9fe6e5aa 100644 --- a/common/entities/AutoCompleteItem.ts +++ b/common/entities/AutoCompleteItem.ts @@ -2,7 +2,8 @@ export enum SearchTypes { directory = 1, keyword = 2, position = 3, - image = 4 + photo = 4, + video = 5 } export class AutoCompleteItem { diff --git a/frontend/app/frame/frame.component.css b/frontend/app/frame/frame.component.css index 063fee5a..82928aa6 100644 --- a/frontend/app/frame/frame.component.css +++ b/frontend/app/frame/frame.component.css @@ -55,10 +55,9 @@ ng2-slim-loading-bar { } } -.badge { - margin-left: -5px; - padding: 0; - background-color: transparent; +.navbar-badge { + border-radius: 1rem !important; + margin-left: -10px; } app-language { @@ -71,12 +70,16 @@ app-language { } - a.dropdown-item { - padding:0.3rem 1.0rem 0.3rem 0.8rem; + padding: 0.3rem 1.0rem 0.3rem 0.8rem; } -a.dropdown-item span{ +a.dropdown-item span { padding-right: 0.8rem; } + +a.dropdown-item span.badge { + padding: 0.25em 0.4em 0.25rem 0; + margin-left: -0.8rem; +} diff --git a/frontend/app/frame/frame.component.html b/frontend/app/frame/frame.component.html index c42696a8..1ad69de9 100644 --- a/frontend/app/frame/frame.component.html +++ b/frontend/app/frame/frame.component.html @@ -28,7 +28,7 @@ type="button" class="btn btn-dark dropdown-toggle" aria-controls="dropdown-basic"> - {{notificationService.notifications.length}} + {{notificationService.notifications.length}}