MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Sidebar: Add uk-nav-default class in uk-nav. Pagination: Change ratio of icons. Theme preview: Add some missing components

This commit is contained in:
Konstantinos Triantafyllou 2022-06-16 17:54:50 +03:00
parent fc73b55832
commit 4ed89bac13
6 changed files with 122 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dashboard/sharedComponents/sidebar/sideBar.component.html
View File

@ -2,7 +2,7 @@
<div id="sidebar_content">
<div *ngIf="items.length > 0" class="menu_section uk-margin-xlarge-top" style="min-height: 30vh">
<div *ngIf="items[activeIndex]" class="active" [style]="'--index: ' + activeIndex + '; --size: ' + (items[activeIndex].icon?'40px':0)"></div>
<ul class="uk-list uk-nav-parent-icon uk-nav" uk-nav>
<ul class="uk-list uk-nav uk-nav-default" uk-nav>
<ng-template ngFor [ngForOf]="items" let-item let-i="index">
<li [class.uk-active]="isTheActiveMenuItem(item)"
[class.uk-open]="isTheActiveMenuItem(item)"

2
sharedComponents/input/input.component.ts
View File

@ -58,7 +58,7 @@ declare var UIkit;
<label>{{placeholderInfo.label}} <sup *ngIf="required">*</sup></label>
</div>
<div class="uk-flex" [class.uk-flex-middle]="type !== 'textarea'"
[attr.uk-tooltip]="(tooltip && !focused && type !== 'chips' && type !== 'textarea')?('title: ' + getLabel(formControl.value) + '; delay: 500; pos: bottom-left'):null">
[attr.uk-tooltip]="(tooltip && formControl.value && !focused && type !== 'chips' && type !== 'textarea')?('title: ' + getLabel(formControl.value) + '; delay: 500; pos: bottom-left'):null">
<ng-template [ngIf]="type === 'text' || type === 'URL' || type === 'logoURL'">
<input #input class="input" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
[formControl]="formAsControl" [class.uk-text-truncate]="!focused">

4
utils/pagingFormatter.component.ts
View File

@ -11,7 +11,7 @@ import {properties} from "../../../environments/environment";
<li [class.uk-invisible]="currentPage <= 1">
<a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page', (currentPage - 1))"
[routerLink]=baseUrl aria-label="Previous">
<icon name="chevron_left" [flex]="true" customClass="uk-pagination-previous"></icon>
<icon name="chevron_left" ratio="1.2" [flex]="true" customClass="uk-pagination-previous"></icon>
</a>
</li>
<li *ngIf=" currentPage -2 > 0"><a
@ -36,7 +36,7 @@ import {properties} from "../../../environments/environment";
<li [class.uk-invisible]="getTotalPages() <= currentPage">
<a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage + 1))"
[routerLink]=baseUrl aria-label="Next">
<icon name="chevron_right" [flex]="true" customClass="uk-pagination-next"></icon>
<icon name="chevron_right" ratio="1.2" [flex]="true" customClass="uk-pagination-next"></icon>
</a>
</li>
</ul>

227
utils/theme/theme.component.html
View File

@ -104,16 +104,7 @@
<button class="uk-button uk-button-default" disabled="">Disabled</button>
</div>
</div>
<div class="uk-grid-small uk-child-width-auto uk-flex-middle uk-margin-medium uk-grid" uk-grid="">
<div>
<button class="uk-button uk-button-primary outlined">Outlined Primary</button>
</div>
<div>
<button class="uk-button uk-button-secondary outlined">Outlined Secondary</button>
</div>
</div>
<hr class="uk-margin-medium">
<div class="uk-child-width-1-2 uk-child-width-1-4@s uk-margin uk-grid" uk-grid="">
<div class="uk-first-column">
<ul class="uk-list">
@ -139,6 +130,7 @@
<ul class="uk-list">
<li class="uk-text-muted">Text Muted</li>
<li class="uk-text-emphasis">Text Emphasis</li>
<li class="uk-text-background">Text Background</li>
<li class="uk-text-primary">Text Primary</li>
<li class="uk-text-secondary">Text Secondary</li>
<li class="uk-text-success">Text Success</li>
@ -172,10 +164,10 @@
<div class="uk-grid-small uk-grid" uk-grid="">
<div class="uk-first-column">
<a class="uk-button uk-button-text" href="#">Read more</a>
<a class="uk-button uk-button-text" href="#">Button Text</a>
</div>
<div>
<a class="uk-button uk-button-text" href="#">5 Comments</a>
<a class="uk-button uk-button-link" href="#">Button Link</a>
</div>
</div>
@ -206,7 +198,13 @@
</ul>
<ul class="uk-pagination uk-flex-center" uk-margin="">
<li class="uk-first-column"><a href="#"><span uk-pagination-previous="" class="uk-icon uk-pagination-previous"><svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg" data-svg="pagination-previous"><polyline fill="none" stroke="#000" stroke-width="1.2" points="6 1 1 6 6 11"></polyline></svg></span></a></li>
<li class="uk-first-column">
<a href="#">
<span class="uk-icon uk-pagination-previous">
<icon name="chevron_left" [flex]="true" ratio="1.2"></icon>
</span>
</a>
</li>
<li><a href="#">1</a></li>
<li class="uk-disabled"><span>...</span></li>
<li><a href="#">4</a></li>
@ -218,7 +216,13 @@
<li><a href="#">10</a></li>
<li class="uk-disabled"><span>...</span></li>
<li><a href="#">20</a></li>
<li><a href="#"><span uk-pagination-next="" class="uk-icon uk-pagination-next"><svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg" data-svg="pagination-next"><polyline fill="none" stroke="#000" stroke-width="1.2" points="1 1 6 6 1 11"></polyline></svg></span></a></li>
<li>
<a href="#">
<span class="uk-icon uk-pagination-next">
<icon name="chevron_right" [flex]="true" ratio="1.2"></icon>
</span>
</a>
</li>
</ul>
</div>
@ -259,9 +263,16 @@
<li><a href="#"><span class="uk-margin-small-right uk-icon" uk-icon="icon: trash"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="trash"><polyline fill="none" stroke="#000" points="6.5 3 6.5 1.5 13.5 1.5 13.5 3"></polyline><polyline fill="none" stroke="#000" points="4.5 4 4.5 18.5 15.5 18.5 15.5 4"></polyline><rect x="8" y="7" width="1" height="9"></rect><rect x="11" y="7" width="1" height="9"></rect><rect x="2" y="3" width="16" height="1"></rect></svg></span> Item</a></li>
</ul>
<div class="uk-card uk-card-body uk-card-default uk-card-hover">
<h3 class="uk-card-title">Default</h3>
<p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="uk-card uk-card-default uk-card-hover">
<div class="uk-card-header">
<h3 class="uk-card-title">Default</h3>
</div>
<div class="uk-card-body">
<p>Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="uk-card-footer uk-flex uk-flex-right">
<button class="uk-button uk-button-primary">Action</button>
</div>
</div>
<div class="uk-margin uk-card uk-card-body uk-card-primary uk-card-hover">
@ -288,64 +299,56 @@
<div class="uk-width-3-5@m uk-first-column">
<div class="uk-child-width-expand@s uk-grid" uk-grid="">
<div class="uk-first-column">
<form class="uk-grid uk-child-width-1-1" uk-grid>
<form class="uk-form-stacked">
<div class="uk-width-1-2">
<div input placeholder="Text" [validators]="required"></div>
</div>
<div class="uk-margin-small">
<label class="uk-form-label">Text</label>
<input class="uk-input" type="text" placeholder="Some text...">
<div class="uk-width-1-2">
<div input placeholder="Select" type="select" [options]="['option 1', 'option 2']"></div>
</div>
<div>
<div input placeholder="URL" type="URL" [(value)]="url" [validators]="urlValidator"></div>
</div>
<div>
<div input placeholder="Logo URL" type="logoURL" [(value)]="logoURL"></div>
</div>
<div class="uk-width-1-2">
<div input placeholder="Autocomplete" type="autocomplete" [options]="['option 1', 'option 2']"></div>
</div>
<div class="uk-width-1-2">
<div input placeholder="Autocomplete Soft" type="autocomplete_soft" [options]="['option 1', 'option 2']"></div>
</div>
<div>
<div input placeholder="Textarea" type="textarea"></div>
</div>
<div class="uk-grid-small uk-child-width-auto uk-margin uk-grid" uk-grid="">
<div class="uk-first-column">
<label>
<input class="uk-radio" type="radio" name="radio">
<span class="uk-margin-small-left">Radio</span>
</label>
</div>
<div class="uk-margin-small">
<select class="uk-select">
<option>Option 01</option>
<option>Option 02</option>
</select>
<div>
<label>
<input class="uk-checkbox" type="checkbox">
<span class="uk-margin-small-left">Checkbox</span>
</label>
</div>
</div>
<div class="uk-margin-small">
<textarea class="uk-textarea" rows="2" placeholder="Some text..."></textarea>
</div>
<div>
<input class="uk-range" type="range" value="2" min="0" max="10" step="0.1">
</div>
<div class="uk-grid-small uk-child-width-auto uk-grid" uk-grid="">
<div class="uk-first-column">
<label><input class="uk-radio" type="radio" name="radio"> Radio</label>
</div>
<div>
<label><input class="uk-checkbox" type="checkbox"> Checkbox</label>
</div>
</div>
<div class="uk-margin-small">
<input class="uk-range" type="range" value="2" min="0" max="10" step="0.1">
</div>
</form>
</div>
<div>
<form class="uk-form-stacked">
<div class="uk-margin-small">
<label class="uk-form-label">States</label>
<input class="uk-input" type="text" placeholder=":disabled" disabled="">
</div>
<div class="uk-margin-small">
<input class="uk-input uk-form-danger" type="text" placeholder="form-danger" value="form-danger">
</div>
<div class="uk-margin-small">
<input class="uk-input uk-form-success" type="text" placeholder="form-success" value="form-success">
</div>
<div class="uk-margin-small">
<input class="uk-input uk-form-blank" type="text" placeholder="form-blank">
</div>
</form>
</div>
</form>
</div>
<div class="uk-overflow-auto uk-margin-medium-top">
@ -382,28 +385,38 @@
</table>
</div>
<div class="uk-margin-medium-top uk-alert" uk-alert="">
<a href="#" class="uk-alert-close uk-icon uk-close" uk-close=""><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></a>
<div class="uk-margin-medium-top uk-alert" uk-alert>
<a href="#" class="uk-alert-close uk-icon uk-close">
<icon name="close"></icon>
</a>
<p>Default</p>
</div>
<div class="uk-alert-primary uk-alert" uk-alert="">
<a href="#" class="uk-alert-close uk-icon uk-close" uk-close=""><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></a>
<div class="uk-alert-primary uk-alert" uk-alert>
<a href="#" class="uk-alert-close uk-icon uk-close">
<icon name="close"></icon>
</a>
<p>Primary</p>
</div>
<div class="uk-alert-success uk-alert" uk-alert="">
<a href="#" class="uk-alert-close uk-icon uk-close" uk-close=""><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></a>
<div class="uk-alert-success uk-alert" uk-alert>
<a href="#" class="uk-alert-close uk-icon uk-close">
<icon name="close"></icon>
</a>
<p>Success</p>
</div>
<div class="uk-alert-warning uk-alert" uk-alert="">
<a href="#" class="uk-alert-close uk-icon uk-close" uk-close=""><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></a>
<div class="uk-alert-warning uk-alert" uk-alert>
<a href="#" class="uk-alert-close uk-icon uk-close">
<icon name="close"></icon>
</a>
<p>Warning</p>
</div>
<div class="uk-alert-danger uk-margin-remove-bottom uk-alert" uk-alert="">
<a href="#" class="uk-alert-close uk-icon uk-close" uk-close=""><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></a>
<div class="uk-alert-danger uk-margin-remove-bottom uk-alert" uk-alert>
<a href="#" class="uk-alert-close uk-icon uk-close">
<icon name="close"></icon>
</a>
<p>Danger</p>
</div>
@ -520,11 +533,14 @@
</div>
<div>
<a href="#" uk-slidenav-previous="" class="uk-icon uk-slidenav-previous uk-slidenav"><svg width="14px" height="24px" viewBox="0 0 14 24" xmlns="http://www.w3.org/2000/svg" data-svg="slidenav-previous"><polyline fill="none" stroke="#000" stroke-width="1.4" points="12.775,1 1.225,12 12.775,23 "></polyline></svg></a>
<a href="#" uk-slidenav-next="" class="uk-icon uk-slidenav-next uk-slidenav"><svg width="14px" height="24px" viewBox="0 0 14 24" xmlns="http://www.w3.org/2000/svg" data-svg="slidenav-next"><polyline fill="none" stroke="#000" stroke-width="1.4" points="1.225,23 12.775,12 1.225,1 "></polyline></svg></a>
<a href="#" class="uk-icon uk-slidenav-previous uk-slidenav">
<icon name="chevron_left" [flex]="true" ratio="1.5"></icon>
</a>
<a href="#" class="uk-icon uk-slidenav-next uk-slidenav">
<icon name="chevron_right" [flex]="true" ratio="1.5"></icon>
</a>
</div>
<div>
<!--<div>
<ul class="uk-thumbnav">
<li class="uk-active"><a href="#"><canvas width="60" height="40" class="test-img"></canvas></a></li>
@ -532,7 +548,7 @@
<li><a href="#"><canvas width="60" height="40" class="test-img"></canvas></a></li>
</ul>
</div>
</div>-->
<div>
<div class="uk-tooltip uk-tooltip-top-center uk-display-inline-block uk-margin-remove uk-position-relative">Tooltip</div>
@ -545,12 +561,14 @@
</div>
<div>
<button type="button" uk-close="" class="uk-icon uk-close"><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></button>
<button type="button" class="uk-icon uk-close">
<icon name="close" ratio="1.5"></icon>
</button>
</div>
<div>
<a href="#" uk-totop="" class="uk-icon uk-totop"><svg width="18" height="10" viewBox="0 0 18 10" xmlns="http://www.w3.org/2000/svg" data-svg="totop"><polyline fill="none" stroke="#000" stroke-width="1.2" points="1 9 9 1 17 9 "></polyline></svg></a>
<a href="#" uk-totop="" class="uk-icon uk-totop"></a>
</div>
</div>
@ -735,16 +753,18 @@
<div id="modal" uk-modal="" class="uk-modal">
<div class="uk-modal-dialog">
<button class="uk-modal-close-default uk-icon uk-close" type="button" uk-close=""><svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon"><line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line><line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line></svg></button>
<div class="uk-modal-header">
<h2 class="uk-modal-title">Headline</h2>
<div class="uk-modal-header uk-flex uk-flex-middle uk-flex-between uk-background-primary-opacity">
<h5 class="uk-modal-title uk-margin-remove">Headline</h5>
<button class="uk-modal-close-default uk-icon uk-close uk-margin-left" type="button">
<icon ratio="1.5" name="close"></icon>
</button>
</div>
<div class="uk-modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="uk-modal-footer uk-text-right">
<button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
<button class="uk-button uk-button-primary" type="button">Save</button>
<button class="uk-button uk-button-primary uk-margin-left" type="button">Save</button>
</div>
</div>
</div>
@ -773,33 +793,4 @@
</div>
</div>
</div>
<div class="uk-container ">
<button class="uk-button portal-button">Button</button>
<div class="portal-color">portal-color</div>
<div class="portal-secondary-color">portal-secondary-color</div>
<div class="portal-background-color">portal-background-color</div>
<a class="uk-link portal-link">portal-link</a>
<div class="portal-box">portal-box</div>
<div><span class="portal-icon-button uk-icon uk-icon-button" uk-icon="icon: check"></span> portal-icon-button
uk-icon-button uk-icon</div>
</div>
<div class="uk-container uk-container-small portal-box">
<div class=" uk-text-large">small container</div>
</div>
<div class="uk-container portal-box">
<div class=" uk-text-large">large container</div>
</div>
<div class="uk-container uk-container-large portal-box">
<div class=" uk-text-large">large container</div>
</div>
.

7
utils/theme/theme.component.ts
View File

@ -1,4 +1,6 @@
import {Component} from '@angular/core';
import {ValidatorFn, Validators} from "@angular/forms";
import {StringUtils} from "../string-utils.class";
@Component({
@ -7,5 +9,8 @@ import {Component} from '@angular/core';
})
export class ThemeComponent {
url: string = 'https://example.com';
logoURL: string = 'https://example.com/test.png';
required: ValidatorFn = Validators.required;
urlValidator: ValidatorFn = StringUtils.urlValidator;
}

4
utils/theme/theme.module.ts
View File

@ -3,11 +3,13 @@ import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import {ThemeRoutingModule} from "./theme-routing.module";
import {ThemeComponent} from "./theme.component";
import {IconsModule} from "../icons/icons.module";
import {InputModule} from "../../sharedComponents/input/input.module";
@NgModule({
imports: [
CommonModule, RouterModule,
ThemeRoutingModule
ThemeRoutingModule, IconsModule, InputModule
],
declarations: [
ThemeComponent