OpenServer/SecureNotes
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

witching to UIKit 3

Browse Source
This commit is contained in:
Fabian
2019-04-30 12:22:09 -04:00
parent 8b6c71247f
commit 595f2be1fb
26 changed files with 774 additions and 499 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/modals/InputModal.tsx
View File

@ -16,6 +16,10 @@ export class InputModal extends Modal<string> {
this.rand = Math.random().toString();
}
componentDidMount() {
this.input.focus();
}
componentWillUnmount() {
if (this.input)
this.input.value = "";
@ -23,23 +27,36 @@ export class InputModal extends Modal<string> {
render() {
return <Modal.BaseModal modal={this.props.modal}>
<fieldset style="border:none; min-inline-size:0;">
<label for={this.rand}>{this.props.modal.fieldname}</label>
<input style="min-width: 85%" autofocus ref={elm => {
this.input = elm
if (this.input)
setTimeout(() => this.input.focus(), 0)
}} type={this.props.modal.type} id={this.rand} placeholder={this.props.modal.fieldname} onKeyDown={evt => {
if (evt.keyCode === 13) {
this.props.modal.result(this.input.value)
}
}} />
<div style="text-align: right;">
<button class="primary" style="display: inline-block;" onClick={() => {
<div class="uk-form-horizontal uk-margin-large">
<div class="uk-margin">
<label class="uk-form-label" for={this.rand}>{this.props.modal.fieldname}</label>
<div class="uk-form-controls">
<input
class="uk-input"
id={this.rand}
type={this.props.modal.type}
placeholder={this.props.modal.fieldname}
autofocus
ref={elm => { this.input = elm; }}
onKeyDown={evt => {
if (evt.keyCode === 13) {
this.props.modal.result(this.input.value)
}
}}
/>
</div>
</div>
<div class="uk-margin" style="text-align: right;">
<button class="uk-button uk-button-primary" style="display: inline-block;" onClick={() => {
this.props.modal.result(this.input.value);
}}>Enter</button>
</div>
</fieldset>
</div>
{/*
<fieldset style="border:none; min-inline-size:0;">
</fieldset> */}
</Modal.BaseModal>
}
}

6
src/components/modals/LoadingModal.tsx
View File

@ -11,7 +11,11 @@ export default class LoadingModal extends Modal<undefined> {
getComponent() {
return <Modal.BaseModal modal={this}>
<div class="spinner primary" style="height: 80px; width: 80px; margin: 3rem auto;"></div>
<div style="display: flex; justify-content: center;">
<div style="margin: 3rem;" class="uk-spinner uk-icon">
<svg width="90" height="90" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" data-svg="spinner"><circle fill="none" stroke="#000" cx="15" cy="15" r="14" style="stroke-width: 0.333333px;"></circle></svg>
</div>
</div>
</Modal.BaseModal>
}
}

31
src/components/modals/Modal.tsx
View File

@ -13,6 +13,7 @@ export default abstract class Modal<T> {
// Private
private onResult: (result: T | null) => void;
private closeOnResult: boolean;
private noClose: boolean = false;
// Protected
protected result(value: T | null) {
@ -25,9 +26,10 @@ export default abstract class Modal<T> {
//Public
/**
* This function shows the modal
* Do not cell when using getResult()
* Do not call when using getResult()
*/
public async show() {
public show(noClose = true) {
this.noClose = noClose;
Modal.modalObservableServer.send({ modal: this, close: false });
}
@ -38,7 +40,7 @@ export default abstract class Modal<T> {
*/
public async getResult(close = true) {
this.closeOnResult = close;
this.show();
this.show(false);
return new Promise<T | null>((yes) => this.onResult = yes);
}
@ -50,17 +52,11 @@ export default abstract class Modal<T> {
public static BaseModal = class BaseModal<T> extends Component<{ modal: Modal<T> }, {}> {
render() {
return <div class="modal_container" onClick={(evt) => {
return <div class="modal-container" onClick={(evt) => {
let path = evt.composedPath();
if (!path.find(e => {
let res = false;
let s = (e as Element);
if (s) {
if (s.classList) {
res = s.classList.contains("card")
}
}
return res;
return s.id === "ModalContent";
})) {
this.props.modal.result(null)
}
@ -69,12 +65,15 @@ export default abstract class Modal<T> {
this.props.modal.result(null)
}
}}>
<div class="card" >
<div class="section" style="display:flex;justify-content:space-between;">
<div id="ModalContent" class="uk-card uk-card-body uk-card-body" >
<div class="modal-title uk-card-title" style="">
<h3>{this.props.modal.title}</h3>
<h3>
<CloseIcon onClick={() => this.props.modal.result(null)} width={undefined} height={undefined} style="height:calc(1rem * var(--heading-ratio) * var(--heading-ratio))" />
</h3>
{/* <div> */}
{!this.props.modal.noClose ?
<CloseIcon onClick={() => this.props.modal.result(null)} width={undefined} height={undefined} />
: undefined
}
{/* </div> */}
</div>
{this.props.children}
</div>

8
src/components/modals/YesNoModal.tsx
View File

@ -28,16 +28,16 @@ export class YesNoModal extends Modal<boolean> {
render() {
return <Modal.BaseModal modal={this.props.modal}>
<fieldset style="border:none;min-inline-size:0;">
<div class="uk-margin-large">
<div style="text-align: right;">
<button class="primary" style="display: inline-block;" onClick={() => {
<button class="uk-button uk-button-primary uk-margin-right" style="display: inline-block;" onClick={() => {
this.props.modal.result(false);
}}>No</button>
<button class="primary" style="display: inline-block;" onClick={() => {
<button class="uk-button uk-button-primary" style="display: inline-block;" onClick={() => {
this.props.modal.result(true);
}}>Yes</button>
</div>
</fieldset>
</div>
</Modal.BaseModal>
}
}

6
src/components/modals/context.scss
View File

@ -1,6 +0,0 @@
.context_menu {
button {
margin: 0;
display: block;
}
}

8
src/components/modals/context.tsx
View File

@ -1,8 +0,0 @@
import { h } from "preact";
import "./context.scss";
export default function ContextMenu({ children, event }: { children: JSX.Element | JSX.Element[], event: MouseEvent }) {
return <div style={{ position: "fixed", left: event.pageX, top: event.pageY, zIndex: 10 }} class="context_menu">
{children}
</div>
}

13
src/components/modals/modal.scss
View File

@ -1,4 +1,4 @@
.modal_container {
.modal-container {
position: fixed;
top: 0;
left: 0;
@ -8,7 +8,7 @@
z-index: 32;
}
.modal_container>.card {
.modal-container>.uk-card {
position: absolute;
left: 0;
right: 0;
@ -16,4 +16,13 @@
width: 80%;
max-width: 800px;
margin: auto;
background: white;
}
.modal-title {
display:flex;
justify-content:space-between;
>svg {
height: 1em;
}
}