make dialogues more "appealing"

This commit is contained in:
flash 2016-12-09 00:10:56 +01:00
parent 5e8c640cc9
commit 7876b95a41
10 changed files with 67 additions and 11 deletions

View file

@ -1,3 +1,7 @@
.dialogues {
opacity: 0;
}
.dialogues:not(:empty) {
background: fade(#000, 50%);
position: fixed;
@ -9,31 +13,61 @@
justify-content: center;
align-items: center;
z-index: 2147483648; // fuck it
opacity: 1;
transition: opacity .2s;
}
.dialogue {
font-family: @cute-font;
display: inline-block;
background: #9475b2;
background: #c2affe;
box-shadow: 0 0 5px #9475B2;
padding: 10px;
margin: 10px;
min-width: 200px;
border: 1px solid #9475B2;
padding: 4px;
min-width: 250px;
border-radius: 2px;
&__buttons {
text-align: right;
border-top: 1px solid #9475b2;
margin-top: 2px;
padding-top: 2px;
}
&__button {
font-family: @cute-font;
background: #8364a1;
border: 0 solid transparent;
background: #b19eed;
border: 1px solid #9475B2;
padding: 2px 4px;
cursor: pointer;
margin-left: 2px;
min-width: 50px;
border-radius: 3px;
transition: background .2s;
&:hover {
background: #c2affe;
}
&:active {
background: #a08ddc;
}
&:last-child {
font-weight: 700;
min-width: 70px;
}
}
&__title {
margin: -4px;
background: linear-gradient(90deg, rgba(148, 117, 178, .7), rgba(148, 117, 178, 0)) #C2AFFE;
margin-bottom: 4px;
padding: 2px 4px;
}
&__text {
white-space: pre;
padding: 3px 4px;
}
}

View file

@ -2,7 +2,7 @@
&__head {
margin: -1px -2px;
padding: 4px;
background: #C2AFFE;
background: #c2affe;
color: inherit !important;
font-weight: 700;
display: block;

View file

@ -2,6 +2,7 @@ namespace Sakura
{
export class Dialogue
{
public Title: string = null;
public Text: string;
private Type: DialogueType = DialogueType.Info;
private Callbacks: Dictionary<DialogueButton, Function> = new Dictionary<DialogueButton, Function>();
@ -29,9 +30,14 @@ namespace Sakura
switch (this.Type) {
case DialogueType.Confirm:
case DialogueType.ConfirmNegative:
modifiers.push('confirm');
buttons.push(DialogueButton.No);
buttons.push(DialogueButton.Yes);
if (this.Type === DialogueType.ConfirmNegative) {
buttons = buttons.reverse();
}
break;
default:
@ -40,9 +46,15 @@ namespace Sakura
}
var container: HTMLDivElement = <HTMLDivElement>DOM.Create('div', DOM.BEM('dialogue', null, modifiers)),
title: HTMLDivElement = <HTMLDivElement>DOM.Create('div', DOM.BEM('dialogue', 'title')),
text: HTMLDivElement = <HTMLDivElement>DOM.Create('div', DOM.BEM('dialogue', 'text')),
buttonCont: HTMLDivElement = <HTMLDivElement>DOM.Create('div', DOM.BEM('dialogue', 'buttons'));
if (this.Title !== null) {
DOM.Append(title, DOM.Text(this.Title));
DOM.Append(container, title);
}
DOM.Append(text, DOM.Text(this.Text));
DOM.Append(container, text);

View file

@ -3,6 +3,7 @@ namespace Sakura
export enum DialogueType
{
Info,
Confirm
Confirm,
ConfirmNegative
}
}

View file

@ -69,6 +69,7 @@
});
deleter.AddCallback(0, function () {
var error = new Sakura.Dialogue;
error.Title = "Error";
error.Text = "Deletion failed!";
error.AddCallback(Sakura.DialogueButton.Ok, function () {
this.Close();

View file

@ -101,6 +101,7 @@
if (result.error) {
var diag = new Sakura.Dialogue;
diag.Title = "Login Error";
diag.Text = result.error;
diag.AddCallback(Sakura.DialogueButton.Ok, function () {
this.Close();
@ -120,7 +121,8 @@
<script>
function yuunoLogout() {
var confirm = new Sakura.Dialogue;
confirm.SetType(Sakura.DialogueType.Confirm);
confirm.SetType(Sakura.DialogueType.ConfirmNegative);
confirm.Title = "Logout";
confirm.Text = "Are you sure?";
confirm.AddCallback(Sakura.DialogueButton.No, function () {
@ -141,6 +143,7 @@
if (result.error) {
var error = new Sakura.Dialogue;
error.Title = "Logout Error";
error.Text = result.error;
error.SetType(Sakura.DialogueType.Info);

View file

@ -13,7 +13,8 @@
<script>
function yuunoDeactivate(form) {
var confirm = new Sakura.Dialogue;
confirm.SetType(Sakura.DialogueType.Confirm);
confirm.SetType(Sakura.DialogueType.ConfirmNegative);
confirm.Title = "Account Deactivation";
confirm.Text = "Are you really sure? You can reactivate your account within 30 days of deactivated, after that it'll be permanently deleted!";
confirm.AddCallback(Sakura.DialogueButton.No, function () {
@ -32,6 +33,7 @@
if (result.error) {
var error = new Sakura.Dialogue;
error.Title = "Account Deactivation";
error.Text = result.error;
error.SetType(Sakura.DialogueType.Info);

View file

@ -22,6 +22,7 @@
updater.SetSend(forms);
updater.AddCallback(0, function () {
var resp = updater.JSON();
dialogue.Title = resp.error ? "Error" : "Information";
dialogue.Text = resp.error || text || 'Updated!';
dialogue.Display();
});
@ -32,6 +33,7 @@
function updateSettingsConfirm(form, action) {
var dialogue = new Sakura.Dialogue;
dialogue.Title = "Confirmation";
dialogue.Text = "Are you sure?";
dialogue.SetType(Sakura.DialogueType.Confirm);
dialogue.AddCallback(Sakura.DialogueButton.No, function () {

View file

@ -153,6 +153,7 @@
if (result.error) {
var diag = new Sakura.Dialogue;
diag.Title = "Error";
diag.Text = result.error;
diag.AddCallback(Sakura.DialogueButton.Ok, function () {
this.Close();

View file

@ -1,6 +1,6 @@
<?php
/*
* mod_rewrite emulator for php's build in server
* mod_rewrite emulator for php's built in server
*/
// Decode and parse the request uri