[Libreoffice-commits] online.git: loleaflet/css loleaflet/images loleaflet/src

[Szymon KÅ‚os (via logerrit)]

 loleaflet/css/notebookbar.css                    |   35 +++++++++++++++++++++++
 loleaflet/images/lc_down.svg                     |    1 
 loleaflet/images/lc_up.svg                       |    1 
 loleaflet/src/control/Control.JSDialogBuilder.js |    8 ++++-
 4 files changed, 44 insertions(+), 1 deletion(-)

New commits:
commit e794414e94bc7af37259bcedaa14ae52304b1425
Author:     Szymon Kłos <szymon.klos at collabora.com>
AuthorDate: Tue Jun 16 15:54:05 2020 +0200
Commit:     Szymon Kłos <szymon.klos at collabora.com>
CommitDate: Fri Jun 19 11:37:43 2020 +0200

    notebookbar: loading spinner for styles
    
    Change-Id: If9c5094847d00e7148387cfd200166e20c1ed53f
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/96686
    Tested-by: Jenkins
    Reviewed-by: Szymon Kłos <szymon.klos at collabora.com>

diff --git a/loleaflet/css/notebookbar.css b/loleaflet/css/notebookbar.css
index 6f9675180..e9d084e6d 100644
--- a/loleaflet/css/notebookbar.css
+++ b/loleaflet/css/notebookbar.css
@@ -402,4 +402,39 @@ div[id*='Row'].notebookbar, div[id*='Column'].notebookbar, #SendToBack.notebookb
 #table-Table-Section-Layout #table-SectionBottom57.notebookbar
 {
 	margin-top: 10px;
+}
+
+/* other */
+
+.ui-drawing-area-container
+{
+	position: relative;
+}
+
+.ui-drawing-area-loader
+{
+	border: 5px solid #f3f3f3;
+	border-top: 5px solid #3498db;
+	border-radius: 50%;
+	width: 20px;
+	height: 20px;
+	animation: spin 2s linear infinite;
+	margin-left: auto;
+	margin-right: auto;
+	position: relative;
+	top: 25%;
+}
+
+.ui-drawing-area-loader-container
+{
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+}
+
+ at keyframes spin {
+	0% { transform: rotate(0deg); }
+	100% { transform: rotate(360deg); }
 }
\ No newline at end of file
diff --git a/loleaflet/images/lc_down.svg b/loleaflet/images/lc_down.svg
new file mode 100644
index 000000000..f6c1ad057
--- /dev/null
+++ b/loleaflet/images/lc_down.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m7.4937745 21.50616 9.0172775-9.50616-9.0172775-9.5061599" fill="none" stroke="#808080" stroke-linecap="round" stroke-linejoin="round" stroke-width=".978"/></svg>
\ No newline at end of file
diff --git a/loleaflet/images/lc_up.svg b/loleaflet/images/lc_up.svg
new file mode 100644
index 000000000..3e6b6f298
--- /dev/null
+++ b/loleaflet/images/lc_up.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m16.506225 21.50616-9.0172773-9.50616 9.0172773-9.5061597" fill="none" stroke="#808080" stroke-linecap="round" stroke-linejoin="round" stroke-width=".978"/></svg>
\ No newline at end of file
diff --git a/loleaflet/src/control/Control.JSDialogBuilder.js b/loleaflet/src/control/Control.JSDialogBuilder.js
index 0c91dedc2..b3bd9cfcd 100644
--- a/loleaflet/src/control/Control.JSDialogBuilder.js
+++ b/loleaflet/src/control/Control.JSDialogBuilder.js
@@ -1546,10 +1546,16 @@ L.Control.JSDialogBuilder = L.Control.extend({
 
 	_drawingAreaControl: function(parentContainer, data, builder) {
 		if (data.image) {
-			var image = L.DomUtil.create('img', builder.options.cssClass + ' ui-drawing-area', parentContainer);
+			var container = L.DomUtil.create('div', builder.options.cssClass + ' ui-drawing-area-container', parentContainer);
+			var image = L.DomUtil.create('img', builder.options.cssClass + ' ui-drawing-area', container);
 			image.src = data.image.replace('\\', '');
 			image.id = data.id;
 
+			if (data.loading && data.loading === 'true') {
+				var loaderContainer = L.DomUtil.create('div', 'ui-drawing-area-loader-container', container);
+				L.DomUtil.create('div', 'ui-drawing-area-loader', loaderContainer);
+			}
+
 			$(image).click(function () {
 				builder.callback('drawingarea', 'click', image, null, builder);
 			});