Merge branch 'develop' of git.pleroma.social:pleroma/pleroma-fe into develop

CHANGELOG.md

@@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Added quick filters for notifications
 - Implemented user option to change sidebar position to the right side
 - Implemented user option to hide floating shout panel
+- Implemented "edit profile" button if viewing own profile which opens profile settings
 
 ### Fixed
 - Fixed follow request count showing in the wrong location in mobile view

CONTRIBUTORS.md

@@ -3,6 +3,7 @@ Contributors of this project.
 - Constance Variable (lambadalambda@social.heldscal.la): Code
 - Coco Snuss (cocosnuss@social.heldscal.la): Code
 - wakarimasen (wakarimasen@shitposter.club): NSFW hiding image
+- eris (eris@disqordia.space): Code
 - dtluna (dtluna@social.heldscal.la): Code
 - sonyam (sonyam@social.heldscal.la): Background images
 - hakui (hakui@freezepeach.xyz): CSS and styling

src/components/emoji_input/emoji_input.vue

@@ -1,9 +1,9 @@
 <template>
   <div
+    ref="root"
     v-click-outside="onClickOutside"
     class="emoji-input"
     :class="{ 'with-picker': !hideEmojiButton }"
-    ref='root'
   >
     <slot />
     <template v-if="enableEmojiPicker">

src/components/settings_modal/helpers/boolean_setting.js

@@ -16,10 +16,18 @@ export default {
       return [firstSegment + 'DefaultValue', ...rest].join('.')
     },
     state () {
-      return get(this.$parent, this.path)
+      const value = get(this.$parent, this.path)
+      if (value === undefined) {
+        return this.defaultState
+      } else {
+        return value
+      }
+    },
+    defaultState () {
+      return get(this.$parent, this.pathDefault)
     },
     isChanged () {
-      return get(this.$parent, this.path) !== get(this.$parent, this.pathDefault)
+      return this.state !== this.defaultState
     }
   },
   methods: {

src/components/settings_modal/helpers/choice_setting.js

@@ -17,13 +17,18 @@ export default {
       return [firstSegment + 'DefaultValue', ...rest].join('.')
     },
     state () {
-      return get(this.$parent, this.path)
+      const value = get(this.$parent, this.path)
+      if (value === undefined) {
+        return this.defaultState
+      } else {
+        return value
+      }
     },
     defaultState () {
       return get(this.$parent, this.pathDefault)
     },
     isChanged () {
-      return get(this.$parent, this.path) !== get(this.$parent, this.pathDefault)
+      return this.state !== this.defaultState
     }
   },
   methods: {

src/components/settings_modal/tabs/theme_tab/theme_tab.js

@@ -73,7 +73,8 @@ export default {
         getExportedObject: () => this.exportedTheme
       }),
       availableStyles: [],
-      selected: this.$store.getters.mergedConfig.theme,
+      selected: '',
+      selectedTheme: this.$store.getters.mergedConfig.theme,
       themeWarning: undefined,
       tempImportFile: undefined,
       engineVersion: 0,
@@ -207,7 +208,7 @@ export default {
       }
     },
     selectedVersion () {
-      return Array.isArray(this.selected) ? 1 : 2
+      return Array.isArray(this.selectedTheme) ? 1 : 2
     },
     currentColors () {
       return Object.keys(SLOT_INHERITANCE)
@@ -745,6 +746,16 @@ export default {
       }
     },
     selected () {
+      this.selectedTheme = Object.entries(this.availableStyles).find(([k, s]) => {
+        if (Array.isArray(s)) {
+          console.log(s[0] === this.selected, this.selected)
+          return s[0] === this.selected
+        } else {
+          return s.name === this.selected
+        }
+      })[1]
+    },
+    selectedTheme () {
       this.dismissWarning()
       if (Object.prototype.toString.call(this.selected) === '[object String]') {
         this.selected = JSON.parse(this.selected)
@@ -765,17 +776,17 @@ export default {
         if (!this.keepColor) {
           this.clearV1()
 
-          this.bgColorLocal = this.selected[1]
+          this.bgColorLocal = this.selectedTheme[1]
-          this.fgColorLocal = this.selected[2]
+          this.fgColorLocal = this.selectedTheme[2]
-          this.textColorLocal = this.selected[3]
+          this.textColorLocal = this.selectedTheme[3]
-          this.linkColorLocal = this.selected[4]
+          this.linkColorLocal = this.selectedTheme[4]
-          this.cRedColorLocal = this.selected[5]
+          this.cRedColorLocal = this.selectedTheme[5]
-          this.cGreenColorLocal = this.selected[6]
+          this.cGreenColorLocal = this.selectedTheme[6]
-          this.cBlueColorLocal = this.selected[7]
+          this.cBlueColorLocal = this.selectedTheme[7]
-          this.cOrangeColorLocal = this.selected[8]
+          this.cOrangeColorLocal = this.selectedTheme[8]
         }
       } else if (this.selectedVersion >= 2) {
-        this.normalizeLocalState(this.selected.theme, 2, this.selected.source)
+        this.normalizeLocalState(this.selectedTheme.theme, 2, this.selectedTheme.source)
       }
     }
   }

src/components/user_card/user_card.js

@@ -12,14 +12,16 @@ import {
   faBell,
   faRss,
   faSearchPlus,
-  faExternalLinkAlt
+  faExternalLinkAlt,
+  faEdit
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
   faRss,
   faBell,
   faSearchPlus,
-  faExternalLinkAlt
+  faExternalLinkAlt,
+  faEdit
 )
 
 export default {
@@ -164,6 +166,9 @@ export default {
         this.$store.state.instance.restrictedNicknames
       )
     },
+    openProfileTab () {
+      this.$store.dispatch('openSettingsModalTab', 'profile')
+    },
     zoomAvatar () {
       const attachment = {
         url: this.user.profile_image_url_original,

src/components/user_card/user_card.vue

@@ -53,6 +53,18 @@
               >
                 {{ user.name }}
               </div>
+              <button
+                v-if="!isOtherUser && user.is_local"
+                class="button-unstyled edit-profile-button"
+                @click.stop="openProfileTab"
+              >
+                <FAIcon
+                  fixed-width
+                  class="icon"
+                  icon="edit"
+                  :title="$t('user_card.edit_profile')"
+                />
+              </button>
               <button
                 v-if="isOtherUser && !user.is_local"
                 :href="user.statusnet_profile_url"
@@ -442,7 +454,7 @@
     }
   }
 
-  .external-link-button {
+  .external-link-button, .edit-profile-button {
     cursor: pointer;
     width: 2.5em;
     text-align: center;
@@ -594,6 +606,10 @@
   }
 }
 
+.sidebar .edit-profile-button {
+  display: none;
+}
+
 .user-counts {
   display: flex;
   line-height:16px;

src/i18n/en.json

@@ -726,6 +726,7 @@
     "block": "Block",
     "blocked": "Blocked!",
     "deny": "Deny",
+    "edit_profile": "Edit profile",
     "favorites": "Favorites",
     "follow": "Follow",
     "follow_sent": "Request sent!",

src/modules/config.js

@@ -95,7 +95,8 @@ const config = {
       const { defaultConfig } = rootGetters
       return {
         ...defaultConfig,
-        ...state
+        // Do not override with undefined
+        ...Object.fromEntries(Object.entries(state).filter(([k, v]) => v !== undefined))
       }
     }
   },

static/styles.json

@@ -13,7 +13,6 @@
   "breezy-dark": "/static/themes/breezy-dark.json",
   "breezy-light": "/static/themes/breezy-light.json",
   "ihatebeingalive": "/static/themes/ihatebeingalive.json",
-  "mammal": "/static/themes/mammal.json",
   "paper": "/static/themes/paper.json",
   "thekanata": "/static/themes/thekanata.json"
 }

static/themes/ihatebeingalive.json

@@ -1,7 +1,313 @@
 {
   "_pleroma_theme_version": 2,
-  "name": "ihatebeingalive",
+  "name": "ihatebeinga.live",
   "theme": {
+    "themeEngineVersion": 3,
+    "shadows": {
+      "panel": [
+        {
+          "color": "#000000",
+          "x": "1",
+          "y": "2",
+          "blur": "6",
+          "spread": 0,
+          "alpha": 0.6
+        }
+      ],
+      "topBar": [
+        {
+          "x": 0,
+          "y": 0,
+          "blur": 4,
+          "spread": 0,
+          "color": "#000000",
+          "alpha": 0.6
+        }
+      ],
+      "popup": [
+        {
+          "x": 2,
+          "y": 2,
+          "blur": 3,
+          "spread": 0,
+          "color": "#000000",
+          "alpha": 0.5
+        }
+      ],
+      "avatar": [
+        {
+          "x": 0,
+          "y": 1,
+          "blur": 8,
+          "spread": 0,
+          "color": "#000000",
+          "alpha": 0.7
+        }
+      ],
+      "avatarStatus": [],
+      "panelHeader": [
+        {
+          "color": "#ffffff",
+          "x": 0,
+          "y": "40",
+          "blur": "40",
+          "spread": "-40",
+          "inset": true,
+          "alpha": "0.1"
+        }
+      ],
+      "button": [
+        {
+          "color": "#ffffff",
+          "x": 0,
+          "y": "0",
+          "blur": "0",
+          "spread": "1",
+          "alpha": "0.15",
+          "inset": true
+        },
+        {
+          "color": "#000000",
+          "x": "1",
+          "y": "1",
+          "blur": "1",
+          "spread": 0,
+          "alpha": "0.3",
+          "inset": false
+        }
+      ],
+      "buttonHover": [
+        {
+          "color": "#3daee9",
+          "x": 0,
+          "y": "0",
+          "blur": 0,
+          "spread": "1",
+          "alpha": 1,
+          "inset": true
+        },
+        {
+          "color": "#000000",
+          "x": "1",
+          "y": "1",
+          "blur": "1",
+          "spread": 0,
+          "alpha": "0.3",
+          "inset": false
+        }
+      ],
+      "buttonPressed": [
+        {
+          "color": "#bebebe",
+          "x": 0,
+          "y": 0,
+          "blur": "0",
+          "spread": "50",
+          "alpha": 0.5,
+          "inset": true
+        },
+        {
+          "color": "#ffffff",
+          "x": 0,
+          "y": "0",
+          "blur": 0,
+          "spread": "1",
+          "alpha": 0.2,
+          "inset": true
+        },
+        {
+          "color": "#000000",
+          "x": "1",
+          "y": "1",
+          "blur": 0,
+          "spread": 0,
+          "alpha": "0.3",
+          "inset": false
+        }
+      ],
+      "input": [
+        {
+          "color": "#FFFFFF",
+          "x": 0,
+          "y": "0",
+          "blur": 0,
+          "spread": "1",
+          "alpha": "0.2",
+          "inset": true
+        }
+      ]
+    },
+    "colors": {
+      "underlay": "#000000",
+      "bg": "#070e1b",
+      "fg": "#31363b",
+      "cRed": "#c42d38",
+      "cGreen": "#22b325",
+      "cOrange": "#d7d720",
+      "cBlue": "#ffffff",
+      "accent": "#3daee9",
+      "link": "#3daee9",
+      "text": "#bebebe",
+      "chatBg": "#070e1b",
+      "chatMessageIncomingBg": "#070e1b",
+      "chatMessageOutgoingBg": "#0d1930",
+      "chatMessageOutgoingBorder": "#0f1d38",
+      "chatMessageOutgoingLink": "#3daee9",
+      "chatMessageOutgoingText": "#bebebe",
+      "border": "#363c41",
+      "chatMessageIncomingBorder": "#3b4247",
+      "chatMessageIncomingLink": "#3daee9",
+      "chatMessageIncomingText": "#bebebe",
+      "badgeNotification": "#024297",
+      "badgeNotificationText": "#ffffff",
+      "alertNeutral": "#bebebe",
+      "alertNeutralText": "#ffffff",
+      "alertPopupNeutral": "#bebebe",
+      "alertPopupNeutralText": "#000000",
+      "alertSuccess": "#22b325",
+      "alertSuccessText": "#ffffff",
+      "alertPopupSuccess": "#22b325",
+      "alertPopupSuccessText": "#000000",
+      "alertWarning": "#d7d720",
+      "alertWarningText": "#ffffff",
+      "alertPopupWarning": "#d7d720",
+      "alertPopupWarningText": "#000000",
+      "alertError": "#ff090f",
+      "alertErrorText": "#bebebe",
+      "alertPopupError": "#ff090f",
+      "alertPopupErrorText": "#ffffff",
+      "panel": "#0d1a31",
+      "panelText": "#bebebe",
+      "alertNeutralPanelText": "#ffffff",
+      "alertSuccessPanelText": "#ffffff",
+      "alertWarningPanelText": "#ffffff",
+      "alertErrorPanelText": "#bebebe",
+      "fgText": "#bebebe",
+      "topBar": "#0d1a31",
+      "topBarText": "#bebebe",
+      "input": "#1b1d1f",
+      "inputTopbarText": "#bebebe",
+      "inputPanelText": "#bebebe",
+      "inputText": "#bebebe",
+      "btn": "#1b1d1f",
+      "btnText": "#bebebe",
+      "btnTopBarText": "#bebebe",
+      "btnDisabled": "#0c121c",
+      "btnDisabledTopBarText": "#393d45",
+      "btnPanelText": "#bebebe",
+      "btnDisabledPanelText": "#393d45",
+      "btnDisabledText": "#393d45",
+      "btnToggled": "#1b1d1f",
+      "btnToggledTopBarText": "#bebebe",
+      "btnToggledPanelText": "#bebebe",
+      "btnToggledText": "#bebebe",
+      "btnPressed": "#1b1d1f",
+      "btnPressedTopBarText": "#bebebe",
+      "btnPressedTopBar": "#1b1d1f",
+      "btnPressedPanelText": "#bebebe",
+      "btnPressedPanel": "#1b1d1f",
+      "btnPressedText": "#bebebe",
+      "tabActiveText": "#bebebe",
+      "tabText": "#bebebe",
+      "tab": "#1b1d1f",
+      "fgLink": "#543fe7",
+      "topBarLink": "#bebebe",
+      "panelLink": "#38a5ed",
+      "panelFaint": "#bebebe",
+      "icon": "#63666d",
+      "poll": "#1d4f6e",
+      "pollText": "#bebebe",
+      "postGreentext": "#22b325",
+      "postLink": "#3daee9",
+      "lightText": "#f2f2f2",
+      "popover": "#070e1b",
+      "selectedMenuPopover": "#0d1930",
+      "highlight": "#0d1930",
+      "highlightText": "#bebebe",
+      "selectedMenu": "#0d1930",
+      "selectedMenuText": "#bebebe",
+      "selectedMenuPopoverIcon": "#666c77",
+      "highlightLink": "#3daee9",
+      "selectedMenuLink": "#3daee9",
+      "selectedMenuPopoverLink": "#3daee9",
+      "selectedMenuPopoverText": "#bebebe",
+      "faintLink": "#3daee9",
+      "highlightFaintLink": "#3daee9",
+      "selectedMenuFaintLink": "#3daee9",
+      "selectedMenuPopoverFaintLink": "#3daee9",
+      "faint": "#bebebe",
+      "highlightFaintText": "#bebebe",
+      "selectedMenuFaintText": "#bebebe",
+      "selectedMenuPopoverFaintText": "#bebebe",
+      "highlightLightText": "#f2f2f2",
+      "selectedMenuLightText": "#f2f2f2",
+      "selectedMenuPopoverLightText": "#f2f2f2",
+      "selectedMenuIcon": "#666c77",
+      "selectedPost": "#0d1930",
+      "selectedPostText": "#bebebe",
+      "selectedPostIcon": "#666c77",
+      "selectedPostLink": "#3daee9",
+      "selectedPostFaintLink": "#3daee9",
+      "highlightPostLink": "#3daee9",
+      "selectedPostPostLink": "#3daee9",
+      "selectedPostLightText": "#f2f2f2",
+      "selectedPostFaintText": "#bebebe",
+      "popoverText": "#bebebe",
+      "popoverIcon": "#63666d",
+      "popoverLink": "#3daee9",
+      "postFaintLink": "#3daee9",
+      "popoverPostFaintLink": "#3daee9",
+      "popoverFaintLink": "#3daee9",
+      "popoverFaintText": "#bebebe",
+      "popoverPostLink": "#3daee9",
+      "popoverLightText": "#f2f2f2",
+      "highlightIcon": "#666c77",
+      "highlightPostFaintLink": "#3daee9",
+      "profileTint": "#070e1b",
+      "profileBg": "#03070f",
+      "wallpaper": "#050a13"
+    },
+    "opacity": {
+      "underlay": 0.15,
+      "bg": 0.99,
+      "border": 0.55,
+      "alert": 0.5,
+      "alertPopup": 0.95,
+      "panel": 0.75,
+      "input": 0.9,
+      "btn": 0.9,
+      "faint": 0.5,
+      "popover": 1,
+      "profileTint": 0.5
+    },
+    "radii": {
+      "btn": "4",
+      "input": "4",
+      "checkbox": "1",
+      "panel": "9",
+      "avatar": "3",
+      "avatarAlt": "4",
+      "tooltip": "7",
+      "attachment": "3",
+      "chatMessage": "9"
+    },
+    "fonts": {
+      "interface": {
+        "family": "Tiresias PCFont"
+      },
+      "input": {
+        "family": "inherit"
+      },
+      "post": {
+        "family": "inherit"
+      },
+      "postCode": {
+        "family": "monospace"
+      }
+    }
+  },
+  "source": {
+    "themeEngineVersion": 3,
     "fonts": {
       "interface": {
         "family": "Tiresias PCFont"
@@ -56,7 +362,7 @@
           "blur": 0,
           "spread": "1",
           "color": "--link",
-          "alpha": "0.3",
+          "alpha": 1,
           "inset": true
         },
         {
@@ -76,7 +382,7 @@
           "blur": "0",
           "spread": "50",
           "color": "--faint",
-          "alpha": 1,
+          "alpha": 0.5,
           "inset": true
         },
         {
@@ -112,30 +418,116 @@
     },
     "opacity": {
       "bg": "0.99",
-      "btn": "0.9",
+      "border": "0.55",
-      "input": "0.9",
       "panel": "0.75",
-      "border": "0.55"
+      "btn": "0.9",
+      "input": "0.9"
     },
     "colors": {
       "bg": "#070e1b",
-      "text": "#bebebe",
-      "link": "#3daee9",
       "fg": "#31363b",
-      "fgLink": "#543fe7",
+      "text": "#bebebe",
-      "panelLink": "#38a5ed",
+      "underlay": "#000000",
-      "input": "#1b1d1f",
+      "link": "#3daee9",
-      "topBar": "#0d1a31",
+      "accent": "#3daee9",
-      "topBarLink": "#bebebe",
+      "faint": "#bebebe",
-      "btn": "#1b1d1f",
+      "faintLink": "#3daee9",
-      "panel": "#0d1a31",
+      "postFaintLink": "#3daee9",
-      "alertError": "#ff090f",
-      "badgeNotification": "#024297",
-      "border": "#363c41",
-      "cRed": "#c42d38",
       "cBlue": "#ffffff",
+      "cRed": "#c42d38",
       "cGreen": "#22b325",
-      "cOrange": "#d7d720"
+      "cOrange": "#d7d720",
+      "highlight": "#0d1930",
+      "highlightLightText": "#f2f2f2",
+      "highlightPostLink": "#3daee9",
+      "highlightFaintText": "#bebebe",
+      "highlightFaintLink": "#3daee9",
+      "highlightPostFaintLink": "#3daee9",
+      "highlightText": "#bebebe",
+      "highlightLink": "#3daee9",
+      "highlightIcon": "#666c77",
+      "popover": "#070e1b",
+      "popoverLightText": "#f2f2f2",
+      "popoverPostLink": "#3daee9",
+      "popoverFaintText": "#bebebe",
+      "popoverFaintLink": "#3daee9",
+      "popoverPostFaintLink": "#3daee9",
+      "popoverText": "#bebebe",
+      "popoverLink": "#3daee9",
+      "popoverIcon": "#63666d",
+      "selectedPost": "#0d1930",
+      "selectedPostFaintText": "#bebebe",
+      "selectedPostLightText": "#f2f2f2",
+      "selectedPostPostLink": "#3daee9",
+      "selectedPostFaintLink": "#3daee9",
+      "selectedPostText": "#bebebe",
+      "selectedPostLink": "#3daee9",
+      "selectedPostIcon": "#666c77",
+      "selectedMenu": "#0d1930",
+      "selectedMenuLightText": "#f2f2f2",
+      "selectedMenuFaintText": "#bebebe",
+      "selectedMenuFaintLink": "#3daee9",
+      "selectedMenuText": "#bebebe",
+      "selectedMenuLink": "#3daee9",
+      "selectedMenuIcon": "#666c77",
+      "selectedMenuPopover": "#0d1930",
+      "selectedMenuPopoverLightText": "#f2f2f2",
+      "selectedMenuPopoverFaintText": "#bebebe",
+      "selectedMenuPopoverFaintLink": "#3daee9",
+      "selectedMenuPopoverText": "#bebebe",
+      "selectedMenuPopoverLink": "#3daee9",
+      "selectedMenuPopoverIcon": "#666c77",
+      "lightText": "#f2f2f2",
+      "postLink": "#3daee9",
+      "border": "#363c41",
+      "poll": "#1d4f6e",
+      "pollText": "#bebebe",
+      "icon": "#63666d",
+      "fgText": "#bebebe",
+      "fgLink": "#543fe7",
+      "panel": "#0d1a31",
+      "panelText": "#bebebe",
+      "panelFaint": "#bebebe",
+      "panelLink": "#38a5ed",
+      "topBar": "#0d1a31",
+      "topBarText": "#bebebe",
+      "topBarLink": "#bebebe",
+      "tab": "#1b1d1f",
+      "tabText": "#bebebe",
+      "tabActiveText": "#bebebe",
+      "btn": "#1b1d1f",
+      "btnText": "#bebebe",
+      "btnPanelText": "#bebebe",
+      "btnTopBarText": "#bebebe",
+      "btnPressed": "#1b1d1f",
+      "btnPressedText": "#bebebe",
+      "btnPressedPanel": "#1b1d1f",
+      "btnPressedPanelText": "#bebebe",
+      "btnPressedTopBar": "#1b1d1f",
+      "btnPressedTopBarText": "#bebebe",
+      "btnToggled": "#1b1d1f",
+      "btnToggledText": "#bebebe",
+      "btnToggledPanelText": "#bebebe",
+      "btnToggledTopBarText": "#bebebe",
+      "btnDisabled": "#0c121c",
+      "btnDisabledText": "#393d45",
+      "btnDisabledPanelText": "#393d45",
+      "btnDisabledTopBarText": "#393d45",
+      "input": "#1b1d1f",
+      "inputText": "#bebebe",
+      "inputPanelText": "#bebebe",
+      "inputTopbarText": "#bebebe",
+      "alertError": "#ff090f",
+      "alertErrorText": "#bebebe",
+      "alertErrorPanelText": "#bebebe",
+      "alertWarning": "#d7d720",
+      "alertWarningText": "#ffffff",
+      "alertWarningPanelText": "#ffffff",
+      "alertNeutral": "#bebebe",
+      "alertNeutralText": "#ffffff",
+      "alertNeutralPanelText": "#ffffff",
+      "badgeNotification": "#024297",
+      "badgeNotificationText": "#ffffff"
     },
     "radii": {
       "btn": "4",

static/themes/mammal.json

@@ -1,57 +0,0 @@
-{
-  "_pleroma_theme_version": 2,
-  "name": "Mammal",
-  "theme": {
-    "shadows": {
-      "button": [],
-      "buttonHover": [
-        {
-          "x": "0",
-          "y": "0",
-          "blur": "0",
-          "spread": 1024,
-          "color": "#56a7e1",
-          "alpha": "1",
-          "inset": true
-        }
-      ],
-      "buttonPressed": [
-        {
-          "x": "0",
-          "y": "0",
-          "blur": "0",
-          "spread": 1024,
-          "color": "#56a7e1",
-          "alpha": "1",
-          "inset": true
-        }
-      ],
-      "panel": [],
-      "panelHeader": [],
-      "topBar": []
-    },
-    "opacity": { "input": "1" },
-    "colors": {
-      "bg": "#282c37",
-      "text": "#f8f8f8",
-      "link": "#9bacc8",
-      "fg": "#444b5d",
-      "input": "#FFFFFF",
-      "inputText": "#282c37",
-      "btn": "#2b90d9",
-      "btnText": "#FFFFFF",
-      "cRed": "#7f3142",
-      "cBlue": "#2b90d9",
-      "cGreen": "#2bd850",
-      "cOrange": "#ca8f04"
-    },
-    "radii": {
-      "btn": 4,
-      "input": 4,
-      "panel": "0",
-      "avatar": "4",
-      "avatarAlt": "4",
-      "attachment": "4"
-    }
-  }
-}