Modified style modal window and added close button.

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  -------------------------------->  */
 /* ------------------------------------------------->  */

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';
 		}
 	}

webapp/src/main/webapp/themes/iph/templates/text-lib.ftl

@@ -236,17 +236,21 @@
 </#macro>
 
 <#macro userSettingsModal>
-	<button id="userViewSettings">
+ 	<button id="userViewSettings">
-	  <img onclick="javascript:showUserSettingsModal();" src="${urls.base}/themes/iph/images/print.svg">
+	  <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>