Add translations and improve style for new settings infos

gramps-project · Nov 26, 2024 · 67d4065 · 67d4065
1 parent 06f7439
commit 67d4065
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 11 deletions.
diff --git a/lang/en.json b/lang/en.json
@@ -184,5 +184,8 @@
   "Contributor and above": "Contributor and above",
   "Member and above": "Member and above",
   "Everybody": "Everybody",
-  "Nobody": "Nobody"
+  "Nobody": "Nobody",
+  "User group": "User group",
+  "User Information": "User Information",
+  "Tree Information": "Tree Information"
 }
diff --git a/src/SharedStyles.js b/src/SharedStyles.js
@@ -340,6 +340,16 @@ export const sharedStyles = css`
     background-color: rgba(2, 119, 189, 0.2);
   }
 
+  .monospace {
+    font-family: 'Commit Mono';
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 5px;
+    background-color: rgba(0, 0, 0, 0.05);
+    padding: 0.3em;
+    font-size: 0.9em;
+    color: rgb(125, 0, 0, 0.8);
+  }
+
   @media (max-width: 768px) {
     :host {
       font-size: 16px;

diff --git a/src/components/GrampsjsSysinfo.js b/src/components/GrampsjsSysinfo.js
@@ -31,14 +31,12 @@ export class GrampsjsSysinfo extends GrampsjsTranslateMixin(LitElement) {
   static get properties() {
     return {
       data: {type: Object},
-      tree: {type: String},
     }
   }
 
   constructor() {
     super()
     this.data = {}
-    this.tree = ''
   }
 
   render() {
@@ -66,8 +64,6 @@ export class GrampsjsSysinfo extends GrampsjsTranslateMixin(LitElement) {
           chat: ${this.data?.server?.chat}<br />
         </span>
       </div>
-      <hr />
-      <div class="copy">Tree: ${this.tree}</div>
     `
   }
 

diff --git a/src/views/GrampsjsViewSettings.js b/src/views/GrampsjsViewSettings.js
@@ -37,6 +37,11 @@ export class GrampsjsViewSettings extends GrampsjsViewSettingsOnboarding {
         mwc-tab-bar {
           margin-bottom: 30px;
         }
+
+        .medium {
+          font-weight: 500;
+          color: rgb(0.05, 0.05, 0.05);
+        }
       `,
     ]
   }
@@ -137,12 +142,21 @@ export class GrampsjsViewSettings extends GrampsjsViewSettingsOnboarding {
 
   renderUserSettings() {
     return html`
-      <h3>
-        ${this._('Username: ')} ${this._userInfo?.name} ${this._('Role')}:
-        ${this._(userRoles[this._userInfo?.role])}
-      </h3>
       ${renderLogoutButton()}
 
+      <h3>${this._('User Information')}</h3>
+      <dl>
+        <div>
+          <dt><span>${this._('Username: ').replace(':', '')}</span></dt>
+          <dd>${this._userInfo?.name}</dd>
+        </div>
+        <div>
+          <dt><span>${this._('User group')}</span></dt>
+          <dd>${this._(userRoles[this._userInfo?.role])}</dd>
+        </div>
+      </dl>
+      <div style="clear: both;"></div>
+
       <h3>${this._('Select language')}</h3>
 
       ${this.renderLangSelect()}
@@ -169,9 +183,11 @@ export class GrampsjsViewSettings extends GrampsjsViewSettingsOnboarding {
         .data="${this.dbInfo}"
         .strings="${this.strings}"
         .userInfo="${this._userInfo}"
-        .tree="${getTreeId()}"
       ></grampsjs-sysinfo>
-    `
+      <h3>${this._('Tree Information')}</h3>
+      <p class="small">ID: <span class="monospace">${getTreeId()}</a></p>
+
+      `
   }
 
   renderChangeEmail() {