Skip to content

Commit 1b70a7c

Browse files
committed
feat(message): Added global positioning support
1 parent e7eaf13 commit 1b70a7c

File tree

5 files changed

+91
-8
lines changed

5 files changed

+91
-8
lines changed
Lines changed: 81 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,92 @@
11

2-
import { Component } from "@angular/core";
2+
import { Component, HostListener } from "@angular/core";
33
import { MessageController } from "./message-controller";
44
import { SuiMessageService } from "./message-service";
5+
import { IDynamicClasslist } from "../util/interfaces";
6+
import { getDocumentFontSize } from "../util/util";
7+
8+
export type MessagePosition = "top" | "top-left" | "top-right" |
9+
"bottom" | "bottom-left" | "bottom-right";
10+
11+
export const MessagePosition = {
12+
Top: "top" as MessagePosition,
13+
TopLeft: "top-left" as MessagePosition,
14+
TopRight: "top-right" as MessagePosition,
15+
Bottom: "bottom" as MessagePosition,
16+
BottomLeft: "bottom-left" as MessagePosition,
17+
BottomRight: "bottom-right" as MessagePosition
18+
};
519

620
@Component({
721
selector: "sui-message-global-container",
8-
template: `<sui-message-container [controller]="controller"></sui-message-container>`
22+
template: `
23+
<div class="global container" [ngClass]="dynamicClasses" [style.width.px]="dynamicWidth">
24+
<sui-message-container [controller]="controller"></sui-message-container>
25+
</div>
26+
`,
27+
styles: [`
28+
.global.container {
29+
display: block;
30+
position: fixed;
31+
}
32+
33+
.global.container.top {
34+
top: 1rem;
35+
}
36+
37+
.global.container.bottom {
38+
bottom: 1rem;
39+
}
40+
41+
.global.container.left {
42+
left: 1rem;
43+
}
44+
45+
.global.container.right {
46+
right: 1rem;
47+
}
48+
49+
.global.container:not(.left):not(.right) {
50+
left: 1rem;
51+
}
52+
`]
953
})
1054
export class SuiMessageGlobalContainer {
1155
public controller:MessageController;
1256

13-
57+
public position:MessagePosition;
58+
59+
public width:number;
60+
61+
public get dynamicClasses():IDynamicClasslist {
62+
const classes:IDynamicClasslist = {};
63+
64+
this.position
65+
.split("-")
66+
.forEach(p => classes[p] = true);
67+
68+
return classes;
69+
}
70+
71+
public get dynamicWidth():number {
72+
const margin = getDocumentFontSize();
73+
let width = this.width;
74+
75+
if (this.position === MessagePosition.Top ||
76+
this.position === MessagePosition.Bottom ||
77+
window.innerWidth < width + margin * 2) {
78+
79+
width = window.innerWidth - margin * 2;
80+
}
81+
82+
return width;
83+
}
84+
85+
constructor() {
86+
this.position = MessagePosition.Top;
87+
this.width = 480;
88+
}
89+
90+
@HostListener("window:resize")
91+
public onDocumentResize():void {}
1492
}

components/modal/modal.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
} from "@angular/core";
55
import { TransitionController } from "../transition/transition-controller";
66
import { Transition, TransitionDirection } from "../transition/transition";
7-
import { KeyCode, parseBooleanAttribute } from "../util/util";
7+
import { KeyCode, parseBooleanAttribute, getDocumentFontSize } from "../util/util";
88
import { ModalControls, ModalResult } from "./modal-controls";
99
import { ModalConfig, ModalSize } from "./modal-config";
1010

@@ -219,8 +219,7 @@ export class SuiModal<T, U> implements OnInit, AfterViewInit {
219219
// Decides whether the modal needs to reposition to allow scrolling.
220220
private updateScroll():void {
221221
// Semantic UI modal margin is 3.5rem, which is relative to the global font size, so for compatibility:
222-
const fontSize = parseFloat(window.getComputedStyle(document.documentElement, null).getPropertyValue("font-size"));
223-
const margin = fontSize * 3.5;
222+
const margin = getDocumentFontSize() * 3.5;
224223

225224
// _mustAlwaysScroll works by stopping _mustScroll from being automatically updated, so it stays `true`.
226225
if (!this._mustAlwaysScroll && this._modalElement) {

components/util/util.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,3 +56,9 @@ export function parseBooleanAttribute(attributeValue:boolean):boolean {
5656

5757
return value;
5858
}
59+
60+
export function getDocumentFontSize():number {
61+
return parseFloat(window
62+
.getComputedStyle(document.documentElement, null)
63+
.getPropertyValue("font-size"));
64+
}

demo/src/app/components/page-content/page-content.component.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
}
2424
}
2525

26-
@media only screen and (max-width: 425px) {
26+
@media only screen and (max-width: 480px) {
2727
:host.ui.main.container {
2828
margin-left: 1em !important;
2929
margin-right: 1em !important;

demo/src/app/components/page-title/page-title.component.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
}
2727
}
2828

29-
@media only screen and (max-width: 425px) {
29+
@media only screen and (max-width: 480px) {
3030
:host.ui.masthead.segment {
3131
margin-bottom: 1em;
3232
padding: 1em;

0 commit comments

Comments
 (0)