Skip to content

Commit

Permalink
feat: add offline confirm modal component
Browse files Browse the repository at this point in the history
  • Loading branch information
@bastyen
bastyen committed May 31, 2024
1 parent ea0878f commit b4c50f2
Show file tree
Hide file tree
Showing 8 changed files with 314 additions and 288 deletions.
55 changes: 35 additions & 20 deletions src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
* It contains typing information for all components that exist in this project.
*/
import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
import { InformationDesk, OutdoorCourse, OutdoorSite, Poi, SensitiveArea, TouristicContent, TouristicEvent, Trek } from "./types/types";
export { InformationDesk, OutdoorCourse, OutdoorSite, Poi, SensitiveArea, TouristicContent, TouristicEvent, Trek } from "./types/types";
import { InformationDesk, Mode, OutdoorCourse, OutdoorSite, Poi, SensitiveArea, TouristicContent, TouristicEvent, Trek } from "./types/types";
export { InformationDesk, Mode, OutdoorCourse, OutdoorSite, Poi, SensitiveArea, TouristicContent, TouristicEvent, Trek } from "./types/types";
export namespace Components {
interface GrwApp {
"api": string;
Expand Down Expand Up @@ -113,6 +113,9 @@ export namespace Components {
"urlLayer": string;
"useGradient": boolean;
}
interface GrwOfflineConfirmModal {
"mode": Mode;
}
interface GrwOutdoorCourseCard {
"colorOnSecondaryContainer": string;
"colorOnSurface": string;
Expand Down Expand Up @@ -389,10 +392,6 @@ export namespace Components {
"themes": string;
}
}
export interface GrwAppCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLGrwAppElement;
}
export interface GrwFiltersCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLGrwFiltersElement;
Expand All @@ -405,6 +404,10 @@ export interface GrwMapCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLGrwMapElement;
}
export interface GrwOfflineConfirmModalCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLGrwOfflineConfirmModalElement;
}
export interface GrwOutdoorCourseCardCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLGrwOutdoorCourseCardElement;
Expand Down Expand Up @@ -438,19 +441,7 @@ export interface GrwTrekDetailCustomEvent<T> extends CustomEvent<T> {
target: HTMLGrwTrekDetailElement;
}
declare global {
interface HTMLGrwAppElementEventMap {
"downloadPress": number;
"deletePress": number;
}
interface HTMLGrwAppElement extends Components.GrwApp, HTMLStencilElement {
addEventListener<K extends keyof HTMLGrwAppElementEventMap>(type: K, listener: (this: HTMLGrwAppElement, ev: GrwAppCustomEvent<HTMLGrwAppElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener<K extends keyof HTMLGrwAppElementEventMap>(type: K, listener: (this: HTMLGrwAppElement, ev: GrwAppCustomEvent<HTMLGrwAppElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLGrwAppElement: {
prototype: HTMLGrwAppElement;
Expand Down Expand Up @@ -535,6 +526,24 @@ declare global {
prototype: HTMLGrwMapElement;
new (): HTMLGrwMapElement;
};
interface HTMLGrwOfflineConfirmModalElementEventMap {
"downloadPress": number;
"deletePress": number;
}
interface HTMLGrwOfflineConfirmModalElement extends Components.GrwOfflineConfirmModal, HTMLStencilElement {
addEventListener<K extends keyof HTMLGrwOfflineConfirmModalElementEventMap>(type: K, listener: (this: HTMLGrwOfflineConfirmModalElement, ev: GrwOfflineConfirmModalCustomEvent<HTMLGrwOfflineConfirmModalElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener<K extends keyof HTMLGrwOfflineConfirmModalElementEventMap>(type: K, listener: (this: HTMLGrwOfflineConfirmModalElement, ev: GrwOfflineConfirmModalCustomEvent<HTMLGrwOfflineConfirmModalElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLGrwOfflineConfirmModalElement: {
prototype: HTMLGrwOfflineConfirmModalElement;
new (): HTMLGrwOfflineConfirmModalElement;
};
interface HTMLGrwOutdoorCourseCardElementEventMap {
"outdoorCourseCardPress": number;
"cardOutdoorCourseMouseOver": number;
Expand Down Expand Up @@ -845,6 +854,7 @@ declare global {
"grw-information-desk": HTMLGrwInformationDeskElement;
"grw-loader": HTMLGrwLoaderElement;
"grw-map": HTMLGrwMapElement;
"grw-offline-confirm-modal": HTMLGrwOfflineConfirmModalElement;
"grw-outdoor-course-card": HTMLGrwOutdoorCourseCardElement;
"grw-outdoor-course-detail": HTMLGrwOutdoorCourseDetailElement;
"grw-outdoor-course-provider": HTMLGrwOutdoorCourseProviderElement;
Expand Down Expand Up @@ -915,8 +925,6 @@ declare namespace LocalJSX {
"labels"?: string;
"languages"?: string;
"nameLayer"?: string;
"onDeletePress"?: (event: GrwAppCustomEvent<number>) => void;
"onDownloadPress"?: (event: GrwAppCustomEvent<number>) => void;
"outdoor"?: boolean;
"portals"?: string;
"practices"?: string;
Expand Down Expand Up @@ -992,6 +1000,11 @@ declare namespace LocalJSX {
"urlLayer"?: string;
"useGradient"?: boolean;
}
interface GrwOfflineConfirmModal {
"mode"?: Mode;
"onDeletePress"?: (event: GrwOfflineConfirmModalCustomEvent<number>) => void;
"onDownloadPress"?: (event: GrwOfflineConfirmModalCustomEvent<number>) => void;
}
interface GrwOutdoorCourseCard {
"colorOnSecondaryContainer"?: string;
"colorOnSurface"?: string;
Expand Down Expand Up @@ -1317,6 +1330,7 @@ declare namespace LocalJSX {
"grw-information-desk": GrwInformationDesk;
"grw-loader": GrwLoader;
"grw-map": GrwMap;
"grw-offline-confirm-modal": GrwOfflineConfirmModal;
"grw-outdoor-course-card": GrwOutdoorCourseCard;
"grw-outdoor-course-detail": GrwOutdoorCourseDetail;
"grw-outdoor-course-provider": GrwOutdoorCourseProvider;
Expand Down Expand Up @@ -1361,6 +1375,7 @@ declare module "@stencil/core" {
"grw-information-desk": LocalJSX.GrwInformationDesk & JSXBase.HTMLAttributes<HTMLGrwInformationDeskElement>;
"grw-loader": LocalJSX.GrwLoader & JSXBase.HTMLAttributes<HTMLGrwLoaderElement>;
"grw-map": LocalJSX.GrwMap & JSXBase.HTMLAttributes<HTMLGrwMapElement>;
"grw-offline-confirm-modal": LocalJSX.GrwOfflineConfirmModal & JSXBase.HTMLAttributes<HTMLGrwOfflineConfirmModalElement>;
"grw-outdoor-course-card": LocalJSX.GrwOutdoorCourseCard & JSXBase.HTMLAttributes<HTMLGrwOutdoorCourseCardElement>;
"grw-outdoor-course-detail": LocalJSX.GrwOutdoorCourseDetail & JSXBase.HTMLAttributes<HTMLGrwOutdoorCourseDetailElement>;
"grw-outdoor-course-provider": LocalJSX.GrwOutdoorCourseProvider & JSXBase.HTMLAttributes<HTMLGrwOutdoorCourseProviderElement>;
Expand Down
78 changes: 0 additions & 78 deletions src/components/grw-app/grw-app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,84 +199,6 @@ grw-outdoor-site-detail {
}
}

.modal-container {
z-index: 40000;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-family);
top: -64px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);

.modal-content-container {
display: flex;
justify-content: center;
flex-direction: column;
width: 380px;
height: 120px;
padding: 16px;
margin: 0px 16px;
background-color: var(--color-background);
border-radius: var(--border-radius, 8px);
}

.modal-message-container {
display: flex;
align-items: center;
justify-content: center;

.modal-loader {
width: 16px;
height: 16px;
border: 3px solid var(--color-primary-container);
border-bottom-color: var(--color-on-primary-container);
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
margin-right: 16px;
}

@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
}

.modal-buttons-container,
.modal-button-container {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 16px;
.modal-button {
cursor: pointer;
user-select: none;
font-size: 14px;
font-weight: 500;
height: 32px;
box-shadow: var(--elevation-0);
border: none;
-webkit-tap-highlight-color: transparent;
line-height: 20px;
color: var(--color-primary-app);
background-color: transparent;
font-family: var(--font-family);
}
}
.modal-button-container {
justify-content: flex-end;
}
}

.grw-offline-container {
display: flex;
align-items: center;
Expand Down
Loading

0 comments on commit b4c50f2

Please sign in to comment.