Metaobject fields

by Rozina Szogyenyi

HTML

<html>
<head>

</head>
<body>

  <div class="page">
    <div class="title">
      Add metaobject definition
    </div>
    
    <!-- BASIC INFO CARD -->
    <div class="card padding-bottom-16">
      <div class="top">
        <h2>
          Basic info
        </h2>
      </div>
      <div class="border">
          <div class="table">
              <div class="row">
                <div class="th">
                  Name
                </div>
                <div class="td">
                
                  <div class="name">
                    <div class="select">
                        <div class="selected_option">
                          <svg viewBox="0 0 20 20" class="Icon_Icon__uZZKy" style="width: 20px; height: 20px;"><path fill-rule="evenodd" d="M5 3a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-2Zm-.5 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2Z"></path><path fill-rule="evenodd" d="M5 11a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-2Zm-.5 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2Z"></path><path d="M10 4.75a.75.75 0 0 1 .75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1-.75-.75Z"></path><path d="M10.75 6.5a.75.75 0 0 0 0 1.5h4.5a.75.75 0 0 0 0-1.5h-4.5Z"></path><path d="M10 12.75a.75.75 0 0 1 .75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1-.75-.75Z"></path><path d="M10.75 14.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5h-3.5Z"></path></svg>
                        </div>
                        <div class="icon">
                        <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"><path d="M10.884 4.323a1.25 1.25 0 0 0-1.768 0l-2.646 2.647a.75.75 0 0 0 1.06 1.06l2.47-2.47 2.47 2.47a.75.75 0 1 0 1.06-1.06l-2.646-2.647Z"></path><path d="m13.53 13.03-2.646 2.647a1.25 1.25 0 0 1-1.768 0l-2.646-2.647a.75.75 0 0 1 1.06-1.06l2.47 2.47 2.47-2.47a.75.75 0 0 1 1.06 1.06Z"></path></svg>
                       ...

CSS

body {  
  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
  background: rgba(241, 241, 241, 1); padding: 20px 0; margin: 0;
  font-size: 0.8125rem;
  color: rgb(48, 48, 48);
  }

.page { width: 680px; margin: auto;} 
.title {
  font-size: 20px;
  font-style: normal;
  font-weight: 650;
  line-height: 24px;
  letter-spacing: -0.2px;
  margin-bottom: 20px;
}

.card {
  box-sizing: border-box;
  background: rgb(255, 255, 255);
  margin-bottom: 16px;
  border-radius: 12px;
  box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.13) inset, -1px 0px 0px 0px rgba(0, 0, 0, 0.13) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.17) inset, 0px 1px 0px 0px rgba(204, 204, 204, 0.50) inset, 0px 1px 0px 0px rgba(26, 26, 26, 0.07);
}

.card .top {
  padding: 12px 16px 12px 16px;  
}
.card .top .description { 
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-style: normal;
  font-weight: 350;
  line-height: 20px;
  color: rgba(97, 97, 97, 1);
}

.card h2 {
  font-size: 13px;
  font-style: normal;
  font-weight: 650;
  line-height: 20px;
  margin: 0;
  padding: 0;
}

.card .top .top_actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card .top .top_actions button.icon {
  margin-top: -4px;
  margin-right: -2px;
  margin-bottom: -4px;
}

.card .top .top_actions button.icon svg {
  fill: rgba(138, 138, 138, 1);
}

.card .top .top_actions button.icon:hover svg {
  fill: rgba(97, 97, 97, 1);
}



.card.padding-bottom-16 {padding-bottom: 16px;}

.card .footer {
  background: rgba(241, 241, 241, 1);
  padding: 12px 16px;
  margin: 0 1px 3px 1px;
  border-radius: 0 0 12px 12px;
}

.card .bottom {
  padding: 8px;
}

.border {
  border: 1px solid #E3E3E3;
  border-radius: 8px;
  margin: 0 16px 0 16px;
}
.border.margin-bottom-16 {margin-bottom: 16px;}

.table {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content min-content;
}

.table .row {
  display: grid;
 ...

JavaScript

var d = document

// Icons storage
const iconSet = {
  textIcon:
    '<svg viewBox="0 0 20 20" class="Icon_Icon__uZZKy" style="width: 20px; height: 20px;"><path fill-rule="evenodd" d="m7.077 12.5-.978 2.5h.401a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1 0-1.5h.488l4.314-11.023a.75.75 0 0 1 .814-.468 1 1 0 0 1 1.06.613l4.45 10.878h.874a.75.75 0 0 1 0 1.5h-3.5a.75.75 0 0 1 0-1.5h.465l-1.023-2.5h-4.865Zm.587-1.5 1.792-4.578 1.873 4.578h-3.665Z"></path></svg>',

  checkIcon:
    '<svg viewBox="0 0 20 20" class="Icon_Icon__uZZKy" style="width: 20px; height: 20px;"><path fill-rule="evenodd" d="M15.78 5.97a.75.75 0 0 1 0 1.06l-6.5 6.5a.75.75 0 0 1-1.06 0l-3.25-3.25a.75.75 0 1 1 1.06-1.06l2.72 2.72 5.97-5.97a.75.75 0 0 1 1.06 0Z"></path></svg>',

  textListIcon:
    '<svg viewBox="0 0 20 20" class="Icon_Icon__uZZKy" style="width: 20px; height: 20px;"><path fill-rule="evenodd" d="m5.564 13.968.88-2.5h4.379l.148.403c.132.358.474.597.857.597.634 0 1.075-.632.856-1.228l-3.001-8.15c-.159-.431-.557-.673-.954-.613-.306-.054-.615.134-.733.468l-3.882 11.023h-.439c-.373 0-.675.336-.675.75s.302.75.675.75h2.25c.373 0 .675-.336.675-.75s-.302-.75-.675-.75h-.361Zm3.021-8.578-1.612 4.578h3.298l-1.686-4.578Z"></path><path d="M9.543 17.25c0-.414.335-.75.75-.75h5.5c.414 0 .75.336.75.75s-.336.75-.75.75h-5.5c-.415 0-.75-.336-.75-.75Z"></path><path d="M9.543 14.25c0-.414.335-.75.75-.75h5.5c.414 0 .75.336.75.75s-.336.75-.75.75h-5.5c-.415 0-.75-.336-.75-.75Z"></path></svg>',

  longTextIcon:
    '<svg viewBox="0 0 20 20" class="Icon_Icon__uZZKy" style="width: 20px; height: 20px;"><path d="M7.25 6.5a.75.75 0 0 0 0 1.5h5.5a.75.75 0 0 0 0-1.5h-5.5Z"></path><path d="M6.5 10a.75.75 0 0 1 .75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1-.75-.75Z"></path><path d="M7.25 12a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5h-3.5Z"></path><path fill-rule="evenodd" d="M7.25 3.5a3.75 3.75 0 0 0-3.75 3.75v5.5a3.75 3.75 0 0 0 3.75 3.75h5.5a3.75 3.75 0 0 0 3.75-3.75v-5.5a3.75 3.75 0 0 0-3.75-3.75h-5.5Zm-2.25 3.75a2.25 2.25 0...