Overview
Comment:Better design of dialog close button, allow documentfragments as dialogs
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | trunk | stable
Files: files | file ages | folders
SHA1: c5e6e62dc5786dc563f0d6ec788f3778c396f975
User & Date: bohwaz on 2020-12-10 01:47:27
Other Links: manifest | tags
Context
2020-12-10
02:16
Don't hide print button on mobile check-in: 6aa5d87f22 user: bohwaz tags: trunk, stable
01:47
Better design of dialog close button, allow documentfragments as dialogs check-in: c5e6e62dc5 user: bohwaz tags: trunk, stable
00:39
Off course it doesn't work with images... check-in: fb370909d1 user: bohwaz tags: trunk
Changes

Modified src/www/admin/static/scripts/global.js from [054e0148e7] to [a4e04fc8bc].

102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120




121
122
123


124
125
126
127
128
129
130
131


132
133
134
135
136
137
138
		}

		g.dialog = document.createElement('dialog');
		g.dialog.id = 'dialog';
		g.dialog.open = true;

		var btn = document.createElement('button');
		btn.className = 'icn-btn';
		btn.setAttribute('data-icon', '✘');
		btn.type = 'button';
		btn.innerHTML = 'Fermer';
		btn.onclick = g.closeDialog;
		g.dialog.appendChild(btn);

		if (typeof content == 'string') {
			var container = document.createElement('div');
			container.innerHTML = content;
			content = container;
		}





		content.style.opacity = g.dialog.style.opacity = 0;
		g.dialog.appendChild(content);


		g.dialog.onclick = (e) => { if (e.target == g.dialog) g.closeDialog(); };
		window.onkeyup = (e) => { if (e.key == 'Escape') g.closeDialog(); };

		document.body.appendChild(g.dialog);

		// Restore CSS defaults
		window.setTimeout(() => { g.dialog.style.opacity = ''; }, 50);
		window.setTimeout(() => { content.style.opacity = ''; }, 100);


	}

	g.openFrameDialog = function (url) {
		var iframe = document.createElement('iframe');
		iframe.src = url;
		iframe.name = 'dialog';
		iframe.frameborder = '0';







|











>
>
>
>
|
|

>
>








>
>







102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
		}

		g.dialog = document.createElement('dialog');
		g.dialog.id = 'dialog';
		g.dialog.open = true;

		var btn = document.createElement('button');
		btn.className = 'icn-btn closeBtn';
		btn.setAttribute('data-icon', '✘');
		btn.type = 'button';
		btn.innerHTML = 'Fermer';
		btn.onclick = g.closeDialog;
		g.dialog.appendChild(btn);

		if (typeof content == 'string') {
			var container = document.createElement('div');
			container.innerHTML = content;
			content = container;
		}
		else if (content instanceof DocumentFragment) {
			var container = document.createElement('div');
			container.appendChild(content.cloneNode(true));
			content = container;
		}

		g.dialog.appendChild(content);

		content.style.opacity = g.dialog.style.opacity = 0;
		g.dialog.onclick = (e) => { if (e.target == g.dialog) g.closeDialog(); };
		window.onkeyup = (e) => { if (e.key == 'Escape') g.closeDialog(); };

		document.body.appendChild(g.dialog);

		// Restore CSS defaults
		window.setTimeout(() => { g.dialog.style.opacity = ''; }, 50);
		window.setTimeout(() => { content.style.opacity = ''; }, 100);

		return content;
	}

	g.openFrameDialog = function (url) {
		var iframe = document.createElement('iframe');
		iframe.src = url;
		iframe.name = 'dialog';
		iframe.frameborder = '0';

Modified src/www/admin/static/styles/04-dialogs.css from [9ca4a3ffe3] to [9ade8c8089].

40
41
42
43
44
45
46
47
48


49
50
51
52
53




54
55
56
57
58
59
60
#dialog > iframe {
    width: 90%;
    height: 90%;
    border: none;
    box-shadow: 0px 0px 5px #000;
}

#dialog button {
    background: rgb(var(--gMainColor));


    color: #fff;
    font-size: 1.3em;
    display: block;
    width: 90%;
}





.loader {
    width: 100%;
    min-height: 32px;
    display: block;
    position: relative;
}







|
|
>
>





>
>
>
>







40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
#dialog > iframe {
    width: 90%;
    height: 90%;
    border: none;
    box-shadow: 0px 0px 5px #000;
}

#dialog > button.closeBtn {
    background: unset;
    border: unset;
    box-shadow: unset;
    color: #fff;
    font-size: 1.3em;
    display: block;
    width: 90%;
}

#dialog > button.closeBtn:hover {
    color: #999 !important;
}

.loader {
    width: 100%;
    min-height: 32px;
    display: block;
    position: relative;
}