diff --git a/resources/assets/less/yuuno/bem/dialogue.less b/resources/assets/less/yuuno/bem/dialogue.less index 516aa1b..8e404b5 100644 --- a/resources/assets/less/yuuno/bem/dialogue.less +++ b/resources/assets/less/yuuno/bem/dialogue.less @@ -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; + } } diff --git a/resources/assets/less/yuuno/bem/news.less b/resources/assets/less/yuuno/bem/news.less index b2891bd..8275e79 100644 --- a/resources/assets/less/yuuno/bem/news.less +++ b/resources/assets/less/yuuno/bem/news.less @@ -2,7 +2,7 @@ &__head { margin: -1px -2px; padding: 4px; - background: #C2AFFE; + background: #c2affe; color: inherit !important; font-weight: 700; display: block; diff --git a/resources/assets/typescript/Sakura/Dialogue.ts b/resources/assets/typescript/Sakura/Dialogue.ts index f4dbf9f..a554c39 100644 --- a/resources/assets/typescript/Sakura/Dialogue.ts +++ b/resources/assets/typescript/Sakura/Dialogue.ts @@ -2,6 +2,7 @@ namespace Sakura { export class Dialogue { + public Title: string = null; public Text: string; private Type: DialogueType = DialogueType.Info; private Callbacks: Dictionary = new Dictionary(); @@ -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 = DOM.Create('div', DOM.BEM('dialogue', null, modifiers)), + title: HTMLDivElement = DOM.Create('div', DOM.BEM('dialogue', 'title')), text: HTMLDivElement = DOM.Create('div', DOM.BEM('dialogue', 'text')), buttonCont: 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); diff --git a/resources/assets/typescript/Sakura/DialogueType.ts b/resources/assets/typescript/Sakura/DialogueType.ts index f292faf..d6e6813 100644 --- a/resources/assets/typescript/Sakura/DialogueType.ts +++ b/resources/assets/typescript/Sakura/DialogueType.ts @@ -3,6 +3,7 @@ namespace Sakura export enum DialogueType { Info, - Confirm + Confirm, + ConfirmNegative } } diff --git a/resources/views/yuuno/forum/topic.twig b/resources/views/yuuno/forum/topic.twig index d2ffb28..ddf94f4 100644 --- a/resources/views/yuuno/forum/topic.twig +++ b/resources/views/yuuno/forum/topic.twig @@ -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(); diff --git a/resources/views/yuuno/master.twig b/resources/views/yuuno/master.twig index dc6e806..0e58336 100644 --- a/resources/views/yuuno/master.twig +++ b/resources/views/yuuno/master.twig @@ -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 @@