erp5_web_project_ui: front page spinner

b462a5be · Roque · 7adffeec · b462a5be · b462a5be · b462a5be
Commit b462a5be authored Feb 26, 2020 by Roque
3 changed files
--- a/bt5/erp5_web_project_ui/SkinTemplateItem/portal_skins/erp5_web_project/gadget_front_page_info.html.html
+++ b/bt5/erp5_web_project_ui/SkinTemplateItem/portal_skins/erp5_web_project/gadget_front_page_info.html.html
@@ -11,6 +11,7 @@
  </head>

  <body>
+    <div id="js-spinner" class="ui-icon-spinner ui-btn-icon-notext loader"></div>
    <div class="front-project-list">
      <ul id="js-project-list">
      </ul>

--- a/bt5/erp5_web_project_ui/SkinTemplateItem/portal_skins/erp5_web_project/gadget_front_page_info.js.js
+++ b/bt5/erp5_web_project_ui/SkinTemplateItem/portal_skins/erp5_web_project/gadget_front_page_info.js.js
@@ -120,6 +120,7 @@
      project_html_element_list,
      left_line_html,
      ul_list = document.getElementById("js-project-list"),
+      spinner = document.getElementById("js-spinner"),
      url_parameter_list = [],
      project_id,
      project_dict,
@@ -206,6 +207,7 @@
        return gadget.getUrlForList(url_parameter_list);
      })
      .push(function (url_list) {
+        spinner.classList.add("ui-hidden");
        for (i = 0; i < project_list.length; i += 1) {
          project_html_element_list = createProjectHtmlElement(project_list[i].id, project_list[i].value.title, url_list[i]);
          project_html = project_html_element_list[0];

--- a/bt5/erp5_web_project_ui/SkinTemplateItem/portal_skins/erp5_web_project/gadget_project_info.css.css
+++ b/bt5/erp5_web_project_ui/SkinTemplateItem/portal_skins/erp5_web_project/gadget_project_info.css.css
 /* FRONT PAGE */

+.loader {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  font-size: 300%;
+  animation-name: fadein;
+  animation-duration: 0.2s;
+  animation-delay: 0.3s;
+  animation-fill-mode: both;
+  animation-timing-function: ease-in;
+}
+
+.ui-icon-spinner {
+  opacity: 1;
+}
+
+.ui-icon-spinner::before {
+  content: "\f110";
+  animation: spin 0.5s infinite linear;
+}
+
+.ui-icon-spinner.ui-hidden {
+  visibility: hidden;
+}
+
 div[data-gadget-url$="gadget_front_page_info.html"] .front-project-list  {
  margin-top: 10px;
 }