Skip to content

Commit 4e1a3ad

Browse files
Gourav DwivediGourav Dwivedi
Gourav Dwivedi
authored and
Gourav Dwivedi
committed
Custom alert box added
1 parent ba7a723 commit 4e1a3ad

File tree

15 files changed

+860
-39
lines changed

15 files changed

+860
-39
lines changed

‎Samples/AspDotCore/WebApp/WebApp/Startup.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ public void Configure(IApplicationBuilder app, IHostingEnvironment env)
121121
app.UseAuthentication();
122122

123123
app.UseSignalR(option => {
124-
option.MapHub<SampleHub>(new PathString("/Test/OneHub"));
124+
option.MapHub<SampleHub>(new PathString("/Test/Hub"));
125125
});
126126

127127
//app.UseHttpsRedirection();

‎dist/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content="width=device-width,initial-scale=1"> <meta http-equiv=X-UA-Compatible content="ie=edge"> <title>SignalR Web Client</title> <link rel=icon href=data:,> <link href="main.css" rel="stylesheet"></head> <body> <div class=container> <h1>SignalR Web Client</h1> <src-app></src-app> </div> <script src=./main.js></script> <script type="text/javascript" src="main.js"></script></body> </html>
1+
<!doctype html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content="width=device-width,initial-scale=1"> <meta http-equiv=X-UA-Compatible content="ie=edge"> <title>SignalR Web Client</title> <link rel=stylesheet href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel=icon href=data:,> <link href="main.css" rel="stylesheet"></head> <body> <div class=container> <h1>SignalR Web Client</h1> <src-app></src-app> </div> <script type="text/javascript" src="main.js"></script></body> </html>

‎dist/main.css‎

Lines changed: 327 additions & 0 deletions
Large diffs are not rendered by default.

‎dist/main.js‎

Lines changed: 15 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"@webcomponents/webcomponentsjs": "^2.2.10",
2424
"bootstrap": "^4.3.1",
2525
"jquery": "^3.4.1",
26+
"material-design-lite": "^1.3.0",
2627
"mitt": "^1.1.3",
2728
"popper.js": "^1.15.0"
2829
},

‎src/Index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,14 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
77
<title >SignalR Web Client</title>
8+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
89
<link rel="icon" href="data:,">
910
</head>
1011
<body>
1112
<div class="container">
1213
<h1>SignalR Web Client</h1>
1314
<src-app></src-app>
1415
</div>
15-
<script src="./main.js"></script>
16+
<!-- <script src="./main.js"></script> -->
1617
</body>
1718
</html>

‎src/css/main.css‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
2+
13
h1 {
24
color: rgb(51, 153, 97);
35
}
@@ -114,3 +116,53 @@ ul.nav .nav-link.active:hover {
114116
#app-logs {
115117
word-wrap: break-word;/*Used because long log messages going out of div.*/
116118
}
119+
120+
.scale-in-ver-top {
121+
-webkit-animation: scale-in-ver-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
122+
animation: scale-in-ver-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
123+
}
124+
125+
/* ----------------------------------------------
126+
* Generated by Animista on 2020-4-13 1:55:23
127+
* Licensed under FreeBSD License.
128+
* See http://animista.net/license for more info.
129+
* w: http://animista.net, t: @cssanimista
130+
* ---------------------------------------------- */
131+
132+
/**
133+
* ----------------------------------------
134+
* animation scale-in-ver-top
135+
* ----------------------------------------
136+
*/
137+
@-webkit-keyframes scale-in-ver-top {
138+
0% {
139+
-webkit-transform: scaleY(0);
140+
transform: scaleY(0);
141+
-webkit-transform-origin: 100% 0%;
142+
transform-origin: 100% 0%;
143+
opacity: 1;
144+
}
145+
100% {
146+
-webkit-transform: scaleY(1);
147+
transform: scaleY(1);
148+
-webkit-transform-origin: 100% 0%;
149+
transform-origin: 100% 0%;
150+
opacity: 1;
151+
}
152+
}
153+
@keyframes scale-in-ver-top {
154+
0% {
155+
-webkit-transform: scaleY(0);
156+
transform: scaleY(0);
157+
-webkit-transform-origin: 100% 0%;
158+
transform-origin: 100% 0%;
159+
opacity: 1;
160+
}
161+
100% {
162+
-webkit-transform: scaleY(1);
163+
transform: scaleY(1);
164+
-webkit-transform-origin: 100% 0%;
165+
transform-origin: 100% 0%;
166+
opacity: 1;
167+
}
168+
}

‎src/js/components/custom.alertbox.html‎

Whitespace-only changes.

‎src/js/components/custom.alertbox.js‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
class Dialogbox extends HTMLElement {
2+
constructor() {
3+
super();
4+
}
5+
6+
//connectedCallback is a function that gets invoked when our component in loaded
7+
connectedCallback() {
8+
this.render();
9+
}
10+
11+
render() {
12+
const container = document.createElement("div");
13+
container.innerHTML = `
14+
<style>
15+
.wrapper {
16+
position: fixed;
17+
left: 0;
18+
top: 0;
19+
width: 100%;
20+
height: 100%;
21+
background-color: gray;
22+
opacity: 0;
23+
visibility: hidden;
24+
transform: scale(1.1);
25+
transition: visibility 0s linear .25s,opacity .25s 0s,transform .25s;
26+
z-index: 1;
27+
}
28+
.visible {
29+
opacity: 1;
30+
visibility: visible;
31+
transform: scale(1);
32+
transition: visibility 0s linear 0s,opacity .25s 0s,transform .25s;
33+
}
34+
.modal {
35+
font-family: Helvetica;
36+
font-size: 14px;
37+
padding: 10px 10px 5px 10px;
38+
background-color: #fff;
39+
position: absolute;
40+
top: 50%;
41+
left: 50%;
42+
transform: translate(-50%,-50%);
43+
border-radius: 2px;
44+
min-width: 300px;
45+
}
46+
.title {
47+
font-size: 18px;
48+
}
49+
.button-container {
50+
text-align: right;
51+
}
52+
button {
53+
min-width: 80px;
54+
background-color: #848e97;
55+
border-color: #848e97;
56+
border-style: solid;
57+
border-radius: 2px;
58+
padding: 3px;
59+
color:white;
60+
cursor: pointer;
61+
}
62+
button:hover {
63+
background-color: #6c757d;
64+
border-color: #6c757d;
65+
}
66+
</style>
67+
<div class='wrapper visible'>
68+
<div class='modal'>
69+
<span class='title'>We need to add a title here</span>
70+
<div class='content'>
71+
We need to add some content here
72+
</div>
73+
<div class='button-container'>
74+
<button class='cancel'>Cancel</button>
75+
<button class='ok'>Okay</button>
76+
</div>
77+
</div>
78+
</div>`;
79+
80+
const shadowRoot = this.attachShadow({ mode: "open" });
81+
shadowRoot.appendChild(container);
82+
}
83+
84+
}
85+
86+
// window.customElements.define("dialog-box", Dialogbox);

0 commit comments

Comments
 (0)