From a93063a5173805bd53adc026865219c2f673305c Mon Sep 17 00:00:00 2001
From: Svetlana Rastegina <rasteginas@yandex.ru>
Date: Tue, 27 Apr 2021 15:30:55 +0200
Subject: [PATCH] Modified style modal window and added close button.

---
 webapp/src/main/webapp/themes/iph/css/iph.css | 84 ++++++++++++++++++-
 .../themes/iph/js/collapsible_elements.js     |  4 +-
 .../webapp/themes/iph/templates/text-lib.ftl  | 12 ++-
 3 files changed, 91 insertions(+), 9 deletions(-)

diff --git a/webapp/src/main/webapp/themes/iph/css/iph.css b/webapp/src/main/webapp/themes/iph/css/iph.css
index 61a636b0..66a0f6f3 100644
--- a/webapp/src/main/webapp/themes/iph/css/iph.css
+++ b/webapp/src/main/webapp/themes/iph/css/iph.css
@@ -3429,12 +3429,88 @@ label.switch >.collapseTextControl >img {
 .modal-content {
   background-color: #fefefe;
   margin: auto;
-  padding: 20px;
+  padding: 30px 30px 15px 30px;
   border: 1px solid #888;
-  width: 80%;
+  width: 60%;
+}
+.modal-content >label {
+	display: flex;
+	flex-direction: row;
+	font-size: 1.2rem;
+	font-family: "Roboto";
+	align-items: baseline;
+	margin-bottom: 15px;
+}
+#expandSettingsCB {
+	-moz-appearance: none;
+}
+#expandSettingsCB[type="checkbox"] {
+	border: 1px solid #8B4513;
+	width: 14px;
+	height: 14px;
+	margin-left: 8px;
+}
+#expandSettingsCB[type="checkbox"]:checked {
+	background-color: #EAD6A2;
+	background-image: url(../images/check-icon.svg);
+	background-repeat: no-repeat;
+	background-position: center center;
+	outline: none;
+	background-size: 12px 12px;
+}
+#metadataExpandSettingsCB {
+	-moz-appearance: none;
+}
+#metadataExpandSettingsCB[type="checkbox"] {
+	border: 1px solid #8B4513;
+	width: 14px;
+	height: 14px;
+	margin-left: 8px;
+}
+#metadataExpandSettingsCB[type="checkbox"]:checked {
+	background-color: #EAD6A2;
+	background-image: url(../images/check-icon.svg);
+	background-repeat: no-repeat;
+	background-position: center center;
+	outline: none;
+	background-size: 12px 12px;
+}
+#titleSettings {
+	font-size: 1.4rem;
+	font-family: "Roboto";
+	padding-bottom: 8px;
+	width: 80%;
+}
+#userViewSettings {
+	border: none;
+	cursor: pointer;
+	background: none;
+	padding-top: 3px;
+	padding-right: 0px;
+	padding-left: 4px;
+}
+.modalWrapper {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	width: 100%;
+	border-bottom: 1px solid #8B4513;
+	margin-bottom: 15px;
+	justify-content: space-between;
+}
+#closeModalWindow {
+  color: #8B4513;
+  width: 20%;
+  text-align: right;
+  font-size: 3rem;
+  font-family: "IPH Astra Serif";
+}
+#closeModalWindow:hover,
+#closeModalWindow:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
 }
-
-
 /* ------------------------------------------------->  */
 /* FONTS  -------------------------------->  */
 /* ------------------------------------------------->  */
diff --git a/webapp/src/main/webapp/themes/iph/js/collapsible_elements.js b/webapp/src/main/webapp/themes/iph/js/collapsible_elements.js
index f818e215..9cca3c92 100644
--- a/webapp/src/main/webapp/themes/iph/js/collapsible_elements.js
+++ b/webapp/src/main/webapp/themes/iph/js/collapsible_elements.js
@@ -8,10 +8,12 @@ function showUserSettingsModal() {
 		modalElement.style.display = 'block';
 	}
 }
+
 function hideUserSettingsModal() {
 	window.onclick = function(event) {
 		var modalElement = document.getElementById("userSettingsModal");
-		if (event.target == modalElement) {
+		var closeElement = document.getElementById("closeModalWindow");
+		if (event.target == modalElement || event.target == closeElement) {
 			modalElement.style.display = 'none';
 		}
 	}
diff --git a/webapp/src/main/webapp/themes/iph/templates/text-lib.ftl b/webapp/src/main/webapp/themes/iph/templates/text-lib.ftl
index 4ad626f4..f0f58064 100644
--- a/webapp/src/main/webapp/themes/iph/templates/text-lib.ftl
+++ b/webapp/src/main/webapp/themes/iph/templates/text-lib.ftl
@@ -236,17 +236,21 @@
 </#macro>
 
 <#macro userSettingsModal>
-	<button id="userViewSettings">
-	  <img onclick="javascript:showUserSettingsModal();" src="${urls.base}/themes/iph/images/print.svg">
+ 	<button id="userViewSettings">
+	  <img onclick="javascript:showUserSettingsModal();" src="${urls.base}/themes/iph/images/settings.svg">
 	</button>
 	<div id="userSettingsModal" class="modal" style="display:none;">
 	  <div class="modal-content">
+	  	<div class="modalWrapper">
+		  <div id="titleSettings">Выберите настройки:</div>
+		  <span id="closeModalWindow">&times;</span>
+		</div>
 		<label>
-		  <div>раскрывать документ</div>
+		  <div>Всегда раскрывать документ при открытии</div>
           <input id="expandSettingsCB" type="checkbox" onclick="switchExpandSettings('expandSettingsCB','switchExpand');">
 		</label>
 		<label>
-		  <div>раскрывать метаданные</div>
+		  <div>Всегда раскрывать метаданные при открытии</div>
           <input id="metadataExpandSettingsCB" type="checkbox" onclick="switchExpandSettings('metadataExpandSettingsCB','metadataExpandSetting');">
         </label>
       </div>