make dialogues more "appealing"
This commit is contained in:
parent
5e8c640cc9
commit
7876b95a41
10 changed files with 67 additions and 11 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
&__head {
|
||||
margin: -1px -2px;
|
||||
padding: 4px;
|
||||
background: #C2AFFE;
|
||||
background: #c2affe;
|
||||
color: inherit !important;
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
|
@ -3,6 +3,7 @@ namespace Sakura
|
|||
export enum DialogueType
|
||||
{
|
||||
Info,
|
||||
Confirm
|
||||
Confirm,
|
||||
ConfirmNegative
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
|
@ -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 () {
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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
|
||||
|
|
Reference in a new issue