Skip to content

Commit

Permalink
Refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@cetincakiroglu
cetincakiroglu committed Feb 28, 2024
1 parent 7ff9be4 commit e642a73
Show file tree
Hide file tree
Showing 56 changed files with 883 additions and 423 deletions.
5 changes: 5 additions & 0 deletions src/app/components/iconfield/iconfield.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
@layer primeng {
.p-icon-field {
position: relative;
}
}
20 changes: 13 additions & 7 deletions src/app/components/iconfield/iconfield.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { CommonModule } from '@angular/common';
import { Component, Input, NgModule } from '@angular/core';
import { ChangeDetectionStrategy, Component, Input, NgModule, ViewEncapsulation } from '@angular/core';

import { SharedModule } from 'primeng/api';

Expand All @@ -9,18 +9,24 @@ import { SharedModule } from 'primeng/api';
*/
@Component({
selector: 'p-iconField',
template: ` <span class="p-input-icon-left"><ng-content></ng-content> </span>`,

host: {
class: 'p-element'
}
template: ` <span class="p-icon-field" [ngClass]="containerClass"><ng-content></ng-content> </span>`,
styleUrl: './iconfield.css',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class IconField {
/**
* Position of the icon.
* @group Props
*/
@Input() iconPosition: 'right' | 'left' = 'right';
@Input() iconPosition: 'right' | 'left' = 'left';

get containerClass() {
return {
'p-icon-field-left': this.iconPosition === 'left',
'p-icon-field-right': this.iconPosition === 'right'
};
}
}

@NgModule({
Expand Down
274 changes: 2 additions & 272 deletions src/app/components/inputicon/inputicon.css
View file
Original file line number Diff line number Diff line change
@@ -1,276 +1,6 @@
@layer primeng {
.p-galleria-content {
display: flex;
flex-direction: column;
}

.p-galleria-item-wrapper {
display: flex;
flex-direction: column;
position: relative;
}

.p-galleria-item-container {
position: relative;
display: flex;
height: 100%;
}

.p-galleria-item-nav {
position: absolute;
top: 50%;
margin-top: -0.5rem;
display: inline-flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

.p-galleria-item-prev {
left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}

.p-galleria-item-next {
right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

.p-galleria-item {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}

.p-galleria-item-nav-onhover .p-galleria-item-nav {
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease-in-out;
}

.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav {
pointer-events: all;
opacity: 1;
}

.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled {
pointer-events: none;
}

.p-galleria-caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}

/* Thumbnails */
.p-galleria-thumbnail-wrapper {
display: flex;
flex-direction: column;
overflow: auto;
flex-shrink: 0;
}

.p-galleria-thumbnail-prev,
.p-galleria-thumbnail-next {
align-self: center;
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}

.p-galleria-thumbnail-prev span,
.p-galleria-thumbnail-next span {
display: flex;
justify-content: center;
align-items: center;
}

.p-galleria-thumbnail-container {
display: flex;
flex-direction: row;
}

.p-galleria-thumbnail-items-container {
overflow: hidden;
width: 100%;
}

.p-galleria-thumbnail-items {
display: flex;
}

.p-galleria-thumbnail-item {
overflow: auto;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0.5;
}

.p-galleria-thumbnail-item:hover {
opacity: 1;
transition: opacity 0.3s;
}

.p-galleria-thumbnail-item-current {
opacity: 1;
}

/* Positions */
/* Thumbnails */
.p-galleria-thumbnails-left .p-galleria-content,
.p-galleria-thumbnails-right .p-galleria-content {
flex-direction: row;
}

.p-galleria-thumbnails-left .p-galleria-item-wrapper,
.p-galleria-thumbnails-right .p-galleria-item-wrapper {
flex-direction: row;
}

.p-galleria-thumbnails-left p-galleriaitem,
.p-galleria-thumbnails-top p-galleriaitem {
order: 2;
}

.p-galleria-thumbnails-left p-galleriathumbnails,
.p-galleria-thumbnails-top p-galleriathumbnails {
order: 1;
}

.p-galleria-thumbnails-left .p-galleria-thumbnail-container,
.p-galleria-thumbnails-right .p-galleria-thumbnail-container {
flex-direction: column;
flex-grow: 1;
}

.p-galleria-thumbnails-left .p-galleria-thumbnail-items,
.p-galleria-thumbnails-right .p-galleria-thumbnail-items {
flex-direction: column;
height: 100%;
}
.p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,
.p-galleria-thumbnails-right .p-galleria-thumbnail-wrapper {
height: 100%;
}

/* Indicators */
.p-galleria-indicators {
display: flex;
align-items: center;
justify-content: center;
}

.p-galleria-indicator > button {
display: inline-flex;
align-items: center;
}

.p-galleria-indicators-left .p-galleria-item-wrapper,
.p-galleria-indicators-right .p-galleria-item-wrapper {
flex-direction: row;
align-items: center;
}

.p-galleria-indicators-left .p-galleria-item-container,
.p-galleria-indicators-top .p-galleria-item-container {
order: 2;
}

.p-galleria-indicators-left .p-galleria-indicators,
.p-galleria-indicators-top .p-galleria-indicators {
order: 1;
}

.p-galleria-indicators-left .p-galleria-indicators,
.p-galleria-indicators-right .p-galleria-indicators {
flex-direction: column;
}

.p-galleria-indicator-onitem .p-galleria-indicators {
position: absolute;
display: flex;
z-index: 1;
}

.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators {
top: 0;
left: 0;
width: 100%;
align-items: flex-start;
}

.p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators {
right: 0;
top: 0;
height: 100%;
align-items: flex-end;
}

.p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators {
bottom: 0;
left: 0;
width: 100%;
align-items: flex-end;
}

.p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators {
left: 0;
top: 0;
height: 100%;
align-items: flex-start;
}

/* FullScreen */
.p-galleria-mask {
position: fixed;
top: 0;
left: 0;
.p-fluid .p-icon-field-left,
.p-fluid .p-icon-field-right {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
transition-property: background-color;
}

.p-galleria-close {
position: absolute;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

.p-galleria-mask .p-galleria-item-nav {
position: fixed;
top: 50%;
margin-top: -0.5rem;
}

.p-galleria-mask.p-galleria-mask-leave {
background-color: transparent;
}

/* Keyboard Support */
.p-items-hidden .p-galleria-thumbnail-item {
visibility: hidden;
}

.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {
visibility: visible;
}
}
Loading

0 comments on commit e642a73

Please sign in to comment.