1
1
mirror of https://github.com/bitgapp/eqMac.git synced 2024-11-25 20:51:06 +03:00

changes from pro repo

This commit is contained in:
Nodeful 2021-06-19 00:57:26 +03:00
parent f59a4d9406
commit 6ef4589d35
18 changed files with 81 additions and 39 deletions

View File

@ -3,11 +3,13 @@ import { trigger, style, animate, transition } from '@angular/animations'
const DURATION = 100 const DURATION = 100
const INITIAL_STATE = { const INITIAL_STATE = {
transform: 'translateY(-100%)' transform: 'translateY(-100%)',
'-webkit-transform': 'translateY(-100%)'
} }
const END_FRAME_STATE = { const END_FRAME_STATE = {
transform: 'translateY(0%)' transform: 'translateY(0%)',
'-webkit-transform': 'translateY(0%)'
} }
export const FromTopAnimation = trigger('FromTop', [ export const FromTopAnimation = trigger('FromTop', [

View File

@ -1,3 +1,3 @@
<div (click)="click()" [class]="computeClass()" [ngStyle]="style"> <div (click)="click($event)" [class]="computeClass()" [ngStyle]="style">
<ng-content></ng-content> <ng-content></ng-content>
</div> </div>

View File

@ -12,7 +12,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
text-align: center; text-align: center;
background-color: rgb(62, 65, 70); background-color: #3e4146;
transition-property: filter; transition-property: filter;
transition-duration: .5s; transition-duration: .5s;
border-radius: 3px; // font-size: 20px; border-radius: 3px; // font-size: 20px;

View File

@ -1,4 +1,5 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core' import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
import { ColorsService } from '../../services/colors.service'
@Component({ @Component({
selector: 'eqm-button', selector: 'eqm-button',
@ -13,8 +14,14 @@ export class ButtonComponent implements OnInit {
@Input() toggle = false @Input() toggle = false
@Input() depressable = true @Input() depressable = true
@Input() hoverable = true @Input() hoverable = true
@Input() backgroundColor = '#3e4146'
@Input() color = this.colors.light
@Output() pressed = new EventEmitter<MouseEvent>()
@Input() enabled = true @Input() enabled = true
@Output() pressed = new EventEmitter()
constructor (
public colors: ColorsService
) {}
ngOnInit () { ngOnInit () {
} }
@ -22,7 +29,9 @@ export class ButtonComponent implements OnInit {
get style () { get style () {
return { return {
width: `${this.width}px`, width: `${this.width}px`,
height: `${this.height}px` height: `${this.height}px`,
backgroundColor: this.type === 'transparent' ? 'transparent' : this.backgroundColor,
color: this.color
} }
} }
@ -39,7 +48,8 @@ export class ButtonComponent implements OnInit {
return className return className
} }
click () { click (event: MouseEvent) {
event.stopPropagation()
if (this.enabled) { if (this.enabled) {
if (this.toggle) { if (this.toggle) {
if (this.state && this.depressable) { if (this.state && this.depressable) {
@ -51,7 +61,7 @@ export class ButtonComponent implements OnInit {
this.state = false this.state = false
}, 100) }, 100)
} }
this.pressed.emit() this.pressed.emit(event)
} }
} }
} }

View File

@ -1,3 +1,9 @@
<eqm-container (click)="toggle()"> <eqm-label [clickable]="enabled" *ngIf="contentSide === 'left'">
<ng-content></ng-content>
</eqm-label>
<eqm-container>
<eqm-icon name="checkbox" [size]="10" [color]="checked ? '#4f8d71' : 'transparent'"></eqm-icon> <eqm-icon name="checkbox" [size]="10" [color]="checked ? '#4f8d71' : 'transparent'"></eqm-icon>
</eqm-container> </eqm-container>
<eqm-label [clickable]="enabled" *ngIf="contentSide === 'right'">
<ng-content></ng-content>
</eqm-label>

View File

@ -3,7 +3,11 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: default; cursor: default;
filter: grayscale(80%) filter: grayscale(80%);
eqm-label {
margin: 0 5px;
}
} }
:host.enabled { :host.enabled {

View File

@ -1,4 +1,4 @@
import { Component, Input, Output, EventEmitter, HostBinding } from '@angular/core' import { Component, Input, Output, EventEmitter, HostBinding, HostListener } from '@angular/core'
@Component({ @Component({
selector: 'eqm-checkbox', selector: 'eqm-checkbox',
@ -6,11 +6,13 @@ import { Component, Input, Output, EventEmitter, HostBinding } from '@angular/co
styleUrls: [ './checkbox.component.scss' ] styleUrls: [ './checkbox.component.scss' ]
}) })
export class CheckboxComponent { export class CheckboxComponent {
@Input() contentSide: 'left' | 'right' = 'right'
@Input() interactive: boolean = true @Input() interactive: boolean = true
@Input() checked: boolean = false @Input() checked: boolean = false
@Output() checkedChanged = new EventEmitter<boolean>() @Output() checkedChanged = new EventEmitter<boolean>()
@HostBinding('class.enabled') @Input() enabled = true @HostBinding('class.enabled') @Input() enabled = true
@HostListener('click')
toggle () { toggle () {
if (this.interactive && this.enabled) { if (this.interactive && this.enabled) {
this.checked = !this.checked this.checked = !this.checked

View File

@ -14,12 +14,12 @@ export class DividerComponent {
@HostBinding('style.width') @HostBinding('style.width')
get width () { get width () {
return this.orientation === 'vertical' ? '1px' : `${this.elem.nativeElement.parentElement.offsetWidth}` return this.orientation === 'vertical' ? '1px' : '100%'
} }
@HostBinding('style.height') @HostBinding('style.height')
get height () { get height () {
return this.orientation === 'vertical' ? `${this.elem.nativeElement.parentElement.offsetHeight}` : '1px' return this.orientation === 'vertical' ? 'initial' : '1px'
} }
@HostBinding('style.border-left') @HostBinding('style.border-left')

View File

@ -1 +1 @@
<div class="container" [ngStyle]="style" [innerHtml]="svg"></div> <div class="icon-container" [ngStyle]="style" [innerHtml]="svg"></div>

View File

@ -1,5 +1,5 @@
.container { .icon-container {
position: relative; position: relative;
svg { svg {
width: 100%; width: 100%;
@ -8,5 +8,6 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
} }
} }

View File

@ -11,7 +11,7 @@ import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
selector: 'eqm-icon', selector: 'eqm-icon',
templateUrl: './icon.component.html', templateUrl: './icon.component.html',
styleUrls: [ './icon.component.scss' ], styleUrls: [ './icon.component.scss' ],
encapsulation: ViewEncapsulation.ShadowDom encapsulation: ViewEncapsulation.None
}) })
export class IconComponent implements OnInit { export class IconComponent implements OnInit {
@Input() width = 20 @Input() width = 20
@ -82,6 +82,7 @@ export class IconComponent implements OnInit {
style.width = `${this.width}px` style.width = `${this.width}px`
} }
style.transform = `rotate(${this.rotate}deg)` style.transform = `rotate(${this.rotate}deg)`
style['-webkit-transform'] = `rotate(${this.rotate}deg)`
if (this.stroke) { if (this.stroke) {
style['stroke-width'] = `${this.stroke}px` style['stroke-width'] = `${this.stroke}px`
@ -92,4 +93,4 @@ export class IconComponent implements OnInit {
} }
} }
export * from './icons' export * from './icons'

View File

@ -13,6 +13,7 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
} }
@mixin size ($size) { @mixin size ($size) {
@ -101,6 +102,7 @@
top: -4%; top: -4%;
left: 50%; left: 50%;
transform: translate(-50%, 0); transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
background-color: $accent; background-color: $accent;
} }
} }

View File

@ -180,15 +180,21 @@ export class KnobComponent implements OnInit {
largeCapMaxAngle = 135 largeCapMaxAngle = 135
get largeCapClipPathStyle () { get largeCapClipPathStyle () {
const transform = `rotate(${this.utils.mapValue(this.value, this.min, this.max, -this.largeCapMaxAngle, this.largeCapMaxAngle)}deg)`
const transformOrigin = '50% 50%'
return { return {
transform: `rotate(${this.utils.mapValue(this.value, this.min, this.max, -this.largeCapMaxAngle, this.largeCapMaxAngle)}deg)`, transform,
'transform-origin': '50% 50%' '-webkit-transform': transform,
'transform-origin': transformOrigin,
'-webkit-transform-origin': transformOrigin
} }
} }
get largeCapIndicatorStyle () { get largeCapIndicatorStyle () {
const transform = `translate(-50%, -50%) rotate(${this.utils.mapValue(this.value, this.min, this.max, -this.largeCapMaxAngle, this.largeCapMaxAngle)}deg)`
return { return {
transform: `translate(-50%, -50%) rotate(${this.utils.mapValue(this.value, this.min, this.max, -this.largeCapMaxAngle, this.largeCapMaxAngle)}deg)` transform,
'-webkit-transform': transform
} }
} }
@ -201,15 +207,19 @@ export class KnobComponent implements OnInit {
mediumCapMaxAngle = 135 mediumCapMaxAngle = 135
get mediumCapIndicatorStyle () { get mediumCapIndicatorStyle () {
const transform = `translate(-50%, -50%) rotate(${this.utils.mapValue(this.value, this.min, this.max, -this.mediumCapMaxAngle, this.mediumCapMaxAngle)}deg)`
return { return {
transform: `translate(-50%, -50%) rotate(${this.utils.mapValue(this.value, this.min, this.max, -this.mediumCapMaxAngle, this.mediumCapMaxAngle)}deg)` transform,
'-webkit-transform': transform
} }
} }
smallCapMaxAngle = 135 smallCapMaxAngle = 135
get smallCapIndicatorStyle () { get smallCapIndicatorStyle () {
const transform = `translate(-50%, -50%) rotate(${this.utils.mapValue(this.value, this.min, this.max, -this.smallCapMaxAngle, this.smallCapMaxAngle)}deg)`
return { return {
transform: `translate(-50%, -50%) rotate(${this.utils.mapValue(this.value, this.min, this.max, -this.smallCapMaxAngle, this.smallCapMaxAngle)}deg)` transform,
'-webkit-transform': transform
} }
} }

View File

@ -6,7 +6,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center;
cursor: default; cursor: default;
& * { & * {
cursor: default; cursor: default;

View File

@ -4,8 +4,8 @@ import { ColorsService } from '../../services/colors.service'
@Component({ @Component({
selector: 'eqm-pro', selector: 'eqm-pro',
template: ` template: `
<div [style]="style"> <div [ngStyle]="style">
<eqm-label [fontSize]="fontSize">Pro</eqm-label> <eqm-label [fontSize]="fontSize" [color]="color">Pro</eqm-label>
</div> </div>
` `
}) })
@ -14,11 +14,13 @@ export class ProComponent {
@Input() backgroundColor = this.colors.dark @Input() backgroundColor = this.colors.dark
@Input() fontSize = 14 @Input() fontSize = 14
constructor (public colors: ColorsService) {} constructor (public colors: ColorsService) {}
style: { [name: string]: any } = { get style () {
display: 'inline-block', return {
backgroundColor: this.backgroundColor, display: 'inline-block',
color: this.color, backgroundColor: this.backgroundColor,
borderRadius: '4px', color: this.color,
padding: '2px 4px' borderRadius: '4px',
padding: '2px 4px'
}
} }
} }

View File

@ -2,7 +2,7 @@ import { Directive, EventEmitter, HostListener, Output } from '@angular/core'
@Directive({ selector: '[clickedOutside]' }) @Directive({ selector: '[clickedOutside]' })
export class ClickedOutsideDirective { export class ClickedOutsideDirective {
@Output() clickedOutside = new EventEmitter() @Output() clickedOutside = new EventEmitter<MouseEvent>()
private inside = false private inside = false
@HostListener('click') @HostListener('click')
@ -10,10 +10,10 @@ export class ClickedOutsideDirective {
this.inside = true this.inside = true
} }
@HostListener('document:click') @HostListener('document:click', [ '$event' ])
outsideClick () { outsideClick (event: MouseEvent) {
if (!this.inside) { if (!this.inside) {
this.clickedOutside.emit() this.clickedOutside.emit(event)
} }
this.inside = false this.inside = false
} }

View File

@ -21,6 +21,7 @@ export * from './components/tooltip/tooltip-container.component'
export * from './components/tooltip/tooltip.component' export * from './components/tooltip/tooltip.component'
export * from './components/skeuomorph-slider/skeuomorph-slider.component' export * from './components/skeuomorph-slider/skeuomorph-slider.component'
export * from './services/utilities.service' export * from './services/utilities.service'
export * from './services/colors.service'
export * from './components/label/label.component' export * from './components/label/label.component'
export * from './components/loading/loading.component' export * from './components/loading/loading.component'
export * from './components/checkbox/checkbox.component' export * from './components/checkbox/checkbox.component'
@ -28,4 +29,4 @@ export * from './components/prompt/prompt.component'
export * from './components/carousel/carousel.component' export * from './components/carousel/carousel.component'
export * from './components/question/question.component' export * from './components/question/question.component'
export * from './directives/clicked-outside.directive' export * from './directives/clicked-outside.directive'
export * from './components/breadcrumbs/breadcrumbs.component' export * from './components/breadcrumbs/breadcrumbs.component'

View File

@ -15,7 +15,7 @@
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data:; img-src 'self' data:; font-src 'self' data:; script-src 'self' 'unsafe-eval' 'sha256-bXrLdI2KMMIc9ZIiuVrqGgA2juhoNIXC3iylOFn9Z/c='"> --> <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data:; img-src 'self' data:; font-src 'self' data:; script-src 'self' 'unsafe-eval' 'sha256-bXrLdI2KMMIc9ZIiuVrqGgA2juhoNIXC3iylOFn9Z/c='"> -->
<title>eqMac</title> <title>eqMac</title>
<script>document.write(`<base href="${document.location}" />`);</script> <script>document.write('<base href="' + document.location + '" />');</script>
<meta name="theme-color" content="#000"> <meta name="theme-color" content="#000">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<style> <style>
@ -46,10 +46,11 @@
0% { 0% {
stroke-dashoffset: 0; stroke-dashoffset: 0;
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
} }
100% { 100% {
stroke-dashoffset: -133; stroke-dashoffset: -133;
transform: translate3d(-90px, 0, 0); -webkit-transform: translate3d(-90px, 0, 0);
} }
} }
</style> </style>