Современный NanoUI (#2411)

SierraBay · Jun 29, 2024 · e92a8d3 · e92a8d3
1 parent bb84bb5
commit e92a8d3
Show file tree

Hide file tree

Showing 9 changed files with 386 additions and 0 deletions.
diff --git a/maps/sierra/sierra.dm b/maps/sierra/sierra.dm
@@ -200,6 +200,7 @@
 	#include "../../mods/wyccbay_optimization/_wyccbay_optimization.dme"
 	#include "../../mods/contraband_vending/_contraband_vending.dme"
 	#include "../../mods/telecomms/_telecomms.dme"
+	#include "../../mods/modernUI/_modernUI.dme"
 
 	// UNUSED MODS
 	// Keep them in ascending alphabetical order too, please

diff --git a/mods/modernUI/README.md b/mods/modernUI/README.md
@@ -0,0 +1,83 @@
+
+#### Список PRов:
+
+- https://github.com/SierraBay/SierraBay12/pull/2411
+<!--
+  Ссылки на PRы, связанные с модом:
+  - Создание
+  - Большие изменения
+-->
+
+<!-- Название мода. Не важно на русском или на английском. -->
+## Мод-пример
+
+ID мода: MODPACK_MODERNUI
+<!--
+  Название модпака прописными буквами, СОЕДИНЁННЫМИ_ПОДЧЁРКИВАНИЕМ,
+  которое ты будешь использовать для обозначения файлов.
+-->
+
+### Описание мода
+
+Этот мод изменяет стили NanoUI на такие, чтобы он был похож на [TGUI](https://github.com/tgstation/tgstation/tree/master/tgui). Для этого был изменён `layout_default` (теперь он называется `layout_modern`) и переписаны стили (`modern.css`) поверх основного файла со стилями NanoUI (`shared.css`), а также был убран заголовок (header) NanoUI (`layout_default_header`)
+
+<!--
+  Что он делает, что добавляет: что, куда, зачем и почему - всё здесь.
+  А также любая полезная информация.
+-->
+
+### Изменения *кор кода*
+
+- Отсутствуют
+<!--
+  Если вы редактировали какие-либо процедуры или переменные в кор коде,
+  они должны быть указаны здесь.
+  Нужно указать и файл, и процедуры/переменные.
+
+  Изменений нет - напиши "Отсутствуют"
+-->
+
+### Оверрайды
+
+- `mods\modernUI\code\override.dm`: `/datum/nanoui/add_common_assets()`, `/datum/nanoui/layout_header_key`, `/datum/nanoui/layout_key`
+
+<!--
+  Если ты добавлял новый модульный оверрайд, его нужно указать здесь.
+  Здесь указываются оверрайды в твоём моде и папке `_master_files`
+
+  Изменений нет - напиши "Отсутствуют"
+-->
+
+### Дефайны
+
+- Отсутствуют
+<!--
+  Если требовалось добавить какие-либо дефайны, укажи файлы,
+  в которые ты их добавил, а также перечисли имена.
+  И то же самое, если ты используешь дефайны, определённые другим модом.
+
+  Не используешь - напиши "Отсутствуют"
+-->
+
+### Используемые файлы, не содержащиеся в модпаке
+
+- `nano\css\modern.css`
+- `nano\css\layout_modern.css`
+- `nano\templates\layout_modern.tmpl`
+- `nano\images\nt-logo.png`
+<!--
+  Будь то немодульный файл или модульный файл, который не содержится в папке,
+  принадлежащей этому конкретному моду, он должен быть упомянут здесь.
+  Хорошими примерами являются иконки или звуки, которые используются одновременно
+  несколькими модулями, или что-либо подобное.
+-->
+
+### Авторы:
+
+FeudeyTF
+[tgstation](https://github.com/tgstation/tgstation)
+<!--
+  Здесь находится твой никнейм
+  Если работал совместно - никнеймы тех, кто помогал.
+  В случае порта чего-либо должна быть ссылка на источник.
+-->
diff --git a/mods/modernUI/_modernUI.dm b/mods/modernUI/_modernUI.dm
@@ -0,0 +1,4 @@
+/singleton/modpack/example
+	name = "Современный NanoUI"
+	desc = "Изменение стилей для NanoUI"
+	author = "FeudeyTF"
diff --git a/mods/modernUI/_modernUI.dme b/mods/modernUI/_modernUI.dme
@@ -0,0 +1,8 @@
+#ifndef MODPACK_MODERNUI
+#define MODPACK_MODERNUI
+
+#include "_modernUI.dm"
+
+#include "code/override.dm"
+
+#endif
diff --git a/mods/modernUI/code/override.dm b/mods/modernUI/code/override.dm
@@ -0,0 +1,7 @@
+/datum/nanoui/layout_key = "modern"
+
+/datum/nanoui/layout_header_key = null
+
+/datum/nanoui/add_common_assets()
+	. = ..()
+	add_stylesheet("modern.css")
diff --git a/nano/css/layout_modern.css b/nano/css/layout_modern.css
@@ -0,0 +1,134 @@
+body {
+    background: no-repeat center/75% url(nt-logo.png);
+    background-color: #262626;
+    width: 100%;
+    height: 100vh;
+}
+
+#uiWrapper {
+    background-color: #262626;
+    padding-top: 30px;
+    width: 100%;
+    height: 100vh;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+#uiTitleWrapper {
+    position: relative;
+    height: 30px;
+    background-color: #353535;
+    border-bottom: 1px solid #141414;
+}
+
+#uiTitleText {
+    position: absolute;
+    top: 6px;
+    left: 44px;
+    width: 66%;
+    overflow: hidden;
+    color: #eaeaea;
+    font-size: 16px;
+}
+
+#uiTitle.icon {
+    padding: 6px 8px 6px 42px;
+    background-position: 2px 50%;
+    background-repeat: no-repeat;
+}
+
+#uiStatusIcon {
+    position: absolute;
+    top: 4px;
+    left: 12px;
+    width: 24px;
+    height: 24px;
+}
+
+#uiMapWrapper {
+    clear: both;
+    padding: 8px;
+}
+
+#uiMapHeader {
+    position: relative;
+    clear: both;
+}
+
+#uiMapContainer {
+    position: relative;
+    width: 100%;
+    height: 600px;
+    overflow: hidden;
+    border: 1px solid #40628a;
+    background: url(nanomapBackground.png);
+}
+
+#uiMap {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -512px 0 0 -512px;
+    width: 256px;
+    height: 256px;
+    overflow: hidden;
+    zoom: 4;
+}
+
+#uiMapImage {
+    position: absolute;
+    bottom: 1px;
+    left: 1px;
+    width: 256px;
+    height: 256px;
+}
+
+#uiMapContent {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    width: 256px;
+    height: 256px;
+}
+
+#uiMapFooter {
+    position: relative;
+    clear: both;
+}
+
+#uiContent {
+    clear: both;
+    padding: 8px;
+}
+
+#uiMapTooltip {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    border: 1px solid #40628a;
+    background-color: #272727;
+    padding: 8px;
+    display: none;
+    z-index: 9999;
+}
+
+#uiLoadingNotice {
+    position: relative;
+    background: url(uiNoticeBackground.jpg) 50% 50%;
+    color: #000000;
+    font-size: 14px;
+    font-style: italic;
+    font-weight: bold;
+    padding: 3px 4px 3px 4px;
+    margin: 4px 0 4px 0;
+}
+
+#computerButtons {
+    height: 30px;
+    float: right;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    margin-right: 5px;
+}
diff --git a/nano/css/modern.css b/nano/css/modern.css
@@ -0,0 +1,68 @@
+.link, .linkOn, .linkOff, .selected, .disabled, .yellowButton, .redButton, a, .zoomLink, .linkActive {
+    border: none;
+    border-radius: 0.16em;
+    transition: 0.2s;
+    padding: 0 4px 4px 4px;
+}
+
+a, .zoomLink, .linkActive {
+    float: left;
+    min-width: 15px;
+    min-height: 16px;
+    text-align: center;
+    color: #ffffff;
+    text-decoration: none;
+    margin: 0 2px 2px 0;
+    cursor: default;
+    background: #4972a1;
+}
+
+.linkDanger, a.linkDanger:link, a.linkDanger:visited, a.linkDanger:active {
+    background-color: #db2828;
+}
+
+.linkDanger:hover {
+    background-color: #e04747;
+}
+
+a.linkDanger:hover {
+    background-color: #e04747;
+}
+
+.redButton:hover {
+    background: #ff6666;
+}
+
+.yellowButton:hover {
+    background: #f7d515;
+}
+
+.itemLabelNarrow, .itemLabel, .itemLabelWide, .itemLabelWider, .itemLabelWidest {
+    color: #aaa;
+}
+
+.linkOn, .linkOn:link, .linkOn:visited, .linkOn:active, .linkOn:hover, .selected, .selected:link, .selected:visited, .selected:active, .selected:hover {
+    background: #2f943c;
+}
+
+.linkOff, .linkOff:link, .linkOff:visited, .linkOff:active, .linkOff:hover, .disabled, .disabled:link, .disabled:visited, .disabled:active, .disabled:hover {
+    background: #999999;
+}
+
+.linkDanger, .linkDanger:link, .linkDanger:visited, .linkDanger:active {
+    background-color: #db2828;
+}
+
+.redButton {
+    background: #db2828;
+}
+
+.yellowButton {
+    background: #f7d515;
+}
+
+.displayBar {
+    height: 21px;
+    border: none;
+    border-radius: 0.16em;
+}
diff --git a/nano/images/nt-logo.png b/nano/images/nt-logo.png
diff --git a/nano/templates/layout_modern.tmpl b/nano/templates/layout_modern.tmpl
@@ -0,0 +1,81 @@
+<div id='uiHeaderContent' unselectable="on">
+	<!-- Add a template with the key "headerContent" to have it rendered here -->
+</div>
+
+<div id='uiTitleWrapper' unselectable="on">
+    <div id='uiStatusIcon' class='icon24 uiStatusGood' unselectable="on"></div>
+    <div id='uiTitleText' unselectable="on">{{:config.title}}</div>
+</div>
+
+{{if data.PC_hasheader}}
+<div style="background-color: #353535;">
+	<div style="float: left;">
+		<div class='item'>
+			<table><tr>
+			{{if data.PC_batteryicon && data.PC_showbatteryicon}}
+				<td><img src='{{:data.PC_batteryicon}}'>
+			{{/if}}
+			{{if data.PC_batterypercent && data.PC_showbatteryicon}}
+				<td><b>{{:data.PC_batterypercent}}</b>
+			{{/if}}
+			{{if data.PC_ntneticon}}
+				<td><img src='{{:data.PC_ntneticon}}'>
+			{{/if}}
+			{{if data.PC_apclinkicon}}
+				<td><img src='{{:data.PC_apclinkicon}}'>
+			{{/if}}
+			{{if data.PC_stationtime}}
+				<td><b>{{:data.PC_stationtime}}<b>
+			{{/if}}
+			{{for data.PC_programheaders}}
+				<td><img src='{{:value.icon}}'>
+			{{/for}}
+			</table>
+		</div>
+	</div>
+	<div id="computerButtons">
+		{{if data.PC_showexitprogram}}
+			{{:helper.link('', 'minusthick', {'PC_minimize' : 1})}}
+			{{:helper.link('', 'closethick', {'PC_exit' : 1})}}
+		{{/if}}
+		{{:helper.link('', 'power', {'PC_shutdown' : 1})}}
+	</div>
+</div>
+{{/if}}
+
+<div id='uiMapWrapper' class="hidden" unselectable="on">
+    <div id='uiMapHeader' unselectable="on">
+        {{:helper.link('Hide Map', 'close', {'showMap' : 0})}}
+		<div style="float: right; width: 240px;">
+			<span style="float: left;">Z Level:&nbsp;</span>
+			{{for config.mapZLevels :zValue:zIndex}}
+				{{:helper.link(zValue, 'close', {'mapZLevel' : zValue}, null, config.mapZLevel == zValue ? 'selected' : null)}}
+			{{/for}}
+		</div>
+
+        <div style="float: right; width: 240px;">
+            <span style="float: left;">Zoom Level:&nbsp;</span>
+            <div unselectable="on" class="link zoomLink" data-zoom-level="4">x1.0</div>
+            <div unselectable="on" class="link zoomLink" data-zoom-level="6">x1.5</div>
+            <div unselectable="on" class="link zoomLink" data-zoom-level="8">x2.0</div>
+            <div unselectable="on" class="link zoomLink" data-zoom-level="12">x2.5</div>
+        </div>
+        <!-- Add a template with the key "mapHeader" to have it rendered here -->
+    </div>
+    <div id='uiMapContainer' unselectable="on">
+        <div id='uiMap' unselectable="on">
+            <img id="uiMapImage" src="{{:config.mapName}}-{{:config.mapZLevel}}.png" width="256" height="256" unselectable="on" />
+            <div id='uiMapContent' unselectable="on">
+                <!-- Add a template with the key "mapContent" to have it rendered here (on the map) -->
+                <!-- Having a "mapContent" template enables the map functionality -->
+            </div>
+        </div>
+        <div id="uiMapTooltip"></div>
+    </div>
+    <div id='uiMapFooter' unselectable="on">
+        <!-- Add a template with the key "mapFooter" to have it rendered here -->
+    </div>
+</div>
+<div id='uiContent' unselectable="on">
+	<div id='uiLoadingNotice'>Initiating...</div>
+</div>