Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature][UX] Add Toast notifications #179

Merged
merged 2 commits into from
Sep 29, 2024
Merged

[Feature][UX] Add Toast notifications #179

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ecc398d
[UI][Feature] Toasts
kishtarn555 Sep 29, 2024
2c7c334
[Toast][UI] Toasts notifications are now event driven
kishtarn555 Sep 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions html/desktop/app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

@@include('./editor.html')
@@include('./karel.html')
@@include('../toasts.html')


</div>
Expand Down
54 changes: 54 additions & 0 deletions html/toasts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<div aria-live="polite" aria-atomic="true" class="position-absolute top-0 start-0 bottom-0 end-0 pe-none"
style="z-index: 100;">
<div class="position-rel w-100 h-100">
<div class="toast-container top-0 end-0 pt-2 pe-4">

<div id="toast-compile-success" class="toast toast-success" role="alert" aria-live="assertive"
aria-atomic="true" data-bs-delay="3200">
<div class="d-flex">
<div class="toast-body">
¡Compilación correcta!
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div id="toast-compile-error" class="toast toast-danger" role="alert" aria-live="assertive" aria-atomic="true"
data-bs-delay="3200">
<div class="d-flex">
<div class="toast-body">
¡Error de compilación!
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div id="toast-runtime-success" class="toast toast-success" role="alert" aria-live="assertive" aria-atomic="true"
data-bs-delay="3200">
<div class="d-flex">
<div class="toast-body">
¡Ejecución terminada correctamente!
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div id="toast-runtime-error" class="toast toast-danger" role="alert" aria-live="assertive" aria-atomic="true"
data-bs-delay="3200">
<div class="d-flex">
<div class="toast-body">
¡Ejecución terminada en error!
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div id="toast-breakpoint" class="toast toast-primary" role="alert" aria-live="assertive" aria-atomic="true"
data-bs-delay="3200">
<div class="d-flex">
<div class="toast-body">
¡Breakpoint!
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>

</div>
</div>
</div>
20 changes: 19 additions & 1 deletion resources/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,4 +298,22 @@ pre.error-popup {
.hidden-mobile {
display: none;
}
}
}



.toast-danger {
color: #fff!important;
background-color: RGBA(var(--bs-danger-rgb), 0.8)!important;
}

.toast-success {
color: #fff!important;
background-color: RGBA(var(--bs-success-rgb), 0.8)!important;
}

.toast-primary {
color: #fff!important;
background-color: RGBA(var(--bs-primary-rgb), 0.85)!important;
}

11 changes: 6 additions & 5 deletions src/desktop/desktop-ui.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { GetCurrentSetting } from '../settings';
import { FocusBar, FocusToolbar } from './focusBar';
import { WorldBar, WorldToolbarData } from './worldToolbar';
import { EvaluateToolbar } from './evaluate';
import { ToastController, ToastUI } from './toast';


type InputModeToolbar = {
Expand All @@ -23,10 +24,6 @@ type InputModeToolbar = {
drag:JQuery
}





interface DesktopElements {
desktopEditor: EditorView
worldContainer: JQuery,
Expand All @@ -42,7 +39,8 @@ interface DesktopElements {
evaluate: EvaluateToolbar,
context: ContextMenuData,
console: ConsoleTab,
callStack: CallStackUI
callStack: CallStackUI,
toast: ToastUI
};

class DesktopController {
Expand Down Expand Up @@ -78,6 +76,8 @@ class DesktopController {
console:KarelConsole
callStack: CallStack

toasts: ToastController

private isControlInPlayMode: boolean
private static _instance: DesktopController

Expand Down Expand Up @@ -124,6 +124,7 @@ class DesktopController {
this.isControlInPlayMode = false;
this.callStack = new CallStack(elements.callStack);
this.controlbar = new ControlBar(elements.controlBar, this.worldController);
this.toasts = new ToastController(elements.toast)

DesktopController._instance = this;

Expand Down
52 changes: 52 additions & 0 deletions src/desktop/toast.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import bootstrap from "bootstrap"
import { KarelController } from "../KarelController"


export type ToastUI = {
compileError:JQuery
compileSuccess:JQuery
breakpoint:JQuery
runtimeError:JQuery
runtimeSuccess: JQuery
}

export class ToastController {
compileSuccess : bootstrap.Toast
compileError : bootstrap.Toast
breakpoint : bootstrap.Toast
runtimeError : bootstrap.Toast
runtimeSuccess : bootstrap.Toast
constructor(ui:ToastUI) {
this.compileSuccess = new bootstrap.Toast(ui.compileSuccess[0]);
this.compileError = new bootstrap.Toast(ui.compileError[0]);
this.breakpoint = new bootstrap.Toast(ui.breakpoint[0]);
this.runtimeError = new bootstrap.Toast(ui.runtimeError[0]);
this.runtimeSuccess = new bootstrap.Toast(ui.runtimeSuccess[0]);
KarelController.GetInstance().RegisterCompileObserver((_, success, __)=> {
try {
if (success) {
this.compileSuccess.show();
} else {
this.compileError.show();
}
} catch(e) {
console.log(e);
}
});
KarelController.GetInstance().RegisterStateChangeObserver((_, state)=> {
try {
if (state !== "finished") {
return;
}
if (KarelController.GetInstance().EndedOnError()) {
this.runtimeError.show();
} else {
this.runtimeSuccess.show();
}
} catch(e) {
console.log(e);
}
});
}

}
7 changes: 7 additions & 0 deletions src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,6 +217,13 @@ let DesktopUI = new DesktopController(
panel : $("#stackPanel"),
lastReturn: $("#lastReturn")
},
toast: {
breakpoint: $("#toast-breakpoint"),
compileError: $("#toast-compile-error"),
compileSuccess: $("#toast-compile-success"),
runtimeError: $("#toast-runtime-error"),
runtimeSuccess: $("#toast-runtime-success"),
}
},
karelController
);
Expand Down
20 changes: 19 additions & 1 deletion webapp/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,4 +298,22 @@ pre.error-popup {
.hidden-mobile {
display: none;
}
}
}



.toast-danger {
color: #fff!important;
background-color: RGBA(var(--bs-danger-rgb), 0.8)!important;
}

.toast-success {
color: #fff!important;
background-color: RGBA(var(--bs-success-rgb), 0.8)!important;
}

.toast-primary {
color: #fff!important;
background-color: RGBA(var(--bs-primary-rgb), 0.85)!important;
}

54 changes: 54 additions & 0 deletions webapp/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -905,6 +905,60 @@ <h5 >Procesando</h5>
</div>
</div>
</div>
<div aria-live="polite" aria-atomic="true" class="position-absolute top-0 start-0 bottom-0 end-0 pe-none"
style="z-index: 100;">
<div class="position-rel w-100 h-100">
<div class="toast-container top-0 end-0 pt-2 pe-4">

<div id="toast-compile-success" class="toast toast-success" role="alert" aria-live="assertive"
aria-atomic="true" data-bs-delay="3200">
<div class="d-flex">
<div class="toast-body">
¡Compilación correcta!
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div id="toast-compile-error" class="toast toast-danger" role="alert" aria-live="assertive" aria-atomic="true"
data-bs-delay="3200">
<div class="d-flex">
<div class="toast-body">
¡Error de compilación!
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div id="toast-runtime-success" class="toast toast-success" role="alert" aria-live="assertive" aria-atomic="true"
data-bs-delay="3200">
<div class="d-flex">
<div class="toast-body">
¡Ejecución terminada correctamente!
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div id="toast-runtime-error" class="toast toast-danger" role="alert" aria-live="assertive" aria-atomic="true"
data-bs-delay="3200">
<div class="d-flex">
<div class="toast-body">
¡Ejecución terminada en error!
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div id="toast-breakpoint" class="toast toast-primary" role="alert" aria-live="assertive" aria-atomic="true"
data-bs-delay="3200">
<div class="d-flex">
<div class="toast-body">
¡Breakpoint!
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>

</div>
</div>
</div>


</div>
Expand Down
47 changes: 47 additions & 0 deletions webapp/js/cindex.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31585,6 +31585,45 @@ var karel = (function (exports, bootstrap) {
}
}

class ToastController {
constructor(ui) {
this.compileSuccess = new bootstrap.Toast(ui.compileSuccess[0]);
this.compileError = new bootstrap.Toast(ui.compileError[0]);
this.breakpoint = new bootstrap.Toast(ui.breakpoint[0]);
this.runtimeError = new bootstrap.Toast(ui.runtimeError[0]);
this.runtimeSuccess = new bootstrap.Toast(ui.runtimeSuccess[0]);
KarelController.GetInstance().RegisterCompileObserver((_, success, __) => {
try {
if (success) {
this.compileSuccess.show();
}
else {
this.compileError.show();
}
}
catch (e) {
console.log(e);
}
});
KarelController.GetInstance().RegisterStateChangeObserver((_, state) => {
try {
if (state !== "finished") {
return;
}
if (KarelController.GetInstance().EndedOnError()) {
this.runtimeError.show();
}
else {
this.runtimeSuccess.show();
}
}
catch (e) {
console.log(e);
}
});
}
}

class DesktopController {
constructor(elements, karelController) {
this.editor = elements.desktopEditor;
Expand All @@ -31610,6 +31649,7 @@ var karel = (function (exports, bootstrap) {
this.isControlInPlayMode = false;
this.callStack = new CallStack(elements.callStack);
this.controlbar = new ControlBar(elements.controlBar, this.worldController);
this.toasts = new ToastController(elements.toast);
DesktopController._instance = this;
}
static GetInstance() {
Expand Down Expand Up @@ -33142,6 +33182,13 @@ var karel = (function (exports, bootstrap) {
panel: $("#stackPanel"),
lastReturn: $("#lastReturn")
},
toast: {
breakpoint: $("#toast-breakpoint"),
compileError: $("#toast-compile-error"),
compileSuccess: $("#toast-compile-success"),
runtimeError: $("#toast-runtime-error"),
runtimeSuccess: $("#toast-runtime-success"),
}
}, karelController);
new MobileUI({
controls: {
Expand Down