Basic implementation for notes app

web-container/src/main/resources/config/application.properties

@@ -9,7 +9,7 @@ info.build.group=@project.groupId@
 info.build.artifact=@project.artifactId@
 info.build.version=@project.version@
 
-spring.messages.basename=i18n/container_messages,i18n/files_messages,i18n/dashboard_messages
+spring.messages.basename=i18n/container_messages,i18n/files_messages,i18n/dashboard_messages,i18n/notes_messages
 
 spring.servlet.multipart.max-file-size=-1
 spring.servlet.multipart.max-request-size=-1

web-container/src/main/resources/static/css/darkModeColors.css

@@ -3,6 +3,7 @@
     --error-color: #D30000;
     --text-color: #7f7f7f;
     --background-color: #1d1f21;
+    --background-color-highlight: #1d2121;
     --link-color: #87ab63;
     --hover-color: #1f1f2f;
     --border-color: #7f7f7f;

web-container/src/main/resources/static/css/lightModeColors.css

@@ -3,6 +3,7 @@
     --error-color: #D30000;
     --text-color: #000000;
     --background-color: #FFFFFF;
+    --background-color-highlight: darkgrey;
     --link-color: #0000EE;
     --hover-color: lightgrey;
     --border-color: #ddd;

web-container/src/main/resources/static/css/main.css

@@ -92,4 +92,107 @@ tr:hover {
         display: inline;
         padding-right: 1em;
     }
+}
+
+#menu-container {
+    padding-top: 2em;
+    margin-left: 3em;
+}
+
+.menu-icon {
+    background: none !important;
+    border: none;
+    padding: 0 !important;
+    color: var(--text-color);
+    cursor: pointer;
+    font-size: 2em;
+}
+
+.menu-container > details > summary {
+    list-style-type: none;
+}
+
+.menu-container > details[open] > summary {
+    list-style-type: none;
+}
+
+.menu-icon:hover {
+    color: var(--link-color);
+}
+
+.menu-spacer {
+    width: 2em;
+}
+
+@media only screen and (max-width: 450px) {
+    #menu-container {
+        padding-top: 1em;
+        margin-left: 1em;
+    }
+
+    .menu-spacer {
+        width: 1em;
+    }
+}
+
+#menu-container > div {
+    display: inline-block !important;
+}
+
+#content-container {
+    padding-top: 2em;
+}
+
+.display-none {
+    display: none;
+}
+
+.messageContainer {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.message {
+    margin-top: 2em;
+    border: 1px;
+    border-style: solid;
+    border-radius: 0.3em;
+    padding: 1em;
+    display: inline-block;
+}
+
+.shareMessage {
+    border-color: var(--good-color) !important;
+}
+
+.infoMessage {
+    border-color: var(--good-color) !important;
+}
+
+.errorMessage {
+    border-color: var(--error-color) !important;
+}
+
+.menu-modal-content {
+    padding: 0.5em;
+    pointer-events: all;
+    display: inline;
+}
+
+.menu-modal {
+    background: var(--background-color);
+    filter: brightness(var(--background-brightness));
+    border-radius: 0.3em;
+    left: auto;
+    top: auto;
+    right: auto;
+    bottom: auto;
+    padding: 0;
+    pointer-events: none;
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    z-index: 100;
 }

web-container/src/main/resources/templates/includes/messages.html

@@ -0,0 +1,18 @@
+<div id="messages-container" th:fragment="messages">
+  <div class="messageContainer" th:each="shareInfo : ${shareInfo}">
+    <div th:if="${!shareInfo.isEmpty()}" class="shareMessage message">
+      <span th:text="#{'nbscloud.files.share-message'}"/>
+      <a th:href="@{${shareInfo}}" th:text="${shareInfo}"/>
+    </div>
+  </div>
+  <div class="messageContainer" th:each="error : ${errors}">
+    <div th:if="${!errors.isEmpty()}" class="errorMessage message">
+      <span th:text="${error}"/>
+    </div>
+  </div>
+  <div class="messageContainer" th:each="infoMessage : ${infoMessages}">
+    <div th:if="${!infoMessages.isEmpty()}" class="infoMessage message">
+      <span th:text="#{${infoMessage}}"/>
+    </div>
+  </div>
+</div>