Интерфейс v1.1.3: профиль и компактные настройки

web/js/ui/settings.js

@@ -50,13 +50,21 @@ const IMPORT_FAILED = "импорт не удался";
 
 export function renderSettings(root, ctx) {
   root.append(head(ctx));
-  const body = el("div", "body settings");
-  body.append(identity(ctx), notificationsBlock(ctx));
+  const body = el("div", "body settings settings--account");
+  const general = el("div", "settings__column");
+  general.append(notificationsBlock(ctx));
   const install = installBlock();
   if (install !== null) {
-    body.append(install);
+    general.append(install);
   }
-  body.append(devicesBlock(ctx), historyBlock(), passwordBlock(ctx), exitBlock(ctx), deleteBlock(ctx));
+  general.append(devicesBlock(ctx), historyBlock());
+
+  const security = el("div", "settings__column");
+  security.append(passwordBlock(ctx), exitBlock(ctx), deleteBlock(ctx));
+
+  const grid = el("div", "settings__grid");
+  grid.append(general, security);
+  body.append(identity(ctx), grid);
   root.append(body);
 }
 

web/js/ui/shell.js

@@ -47,9 +47,12 @@ function side(ctx, active) {
   const foot = el("div", "foot");
   const me = el("button", "me");
   me.type = "button";
-  const dot = el("i");
-  dot.setAttribute("aria-hidden", "true");
-  me.append(dot, el("span", "me__nick", `ты: @${ctx.me.nick}`));
+  me.setAttribute("aria-label", `настройки: @${ctx.me.nick}`);
+  const profile = el("img", "me__icon");
+  profile.src = "/icons/profile.svg";
+  profile.alt = "";
+  profile.draggable = false;
+  me.append(profile, el("span", "me__nick", `@${ctx.me.nick}`));
   me.addEventListener("click", () => ctx.go("#/settings"));
   foot.append(me);
   const version = build(ctx.config);