User Profile | chattigo-webkit Documentation

.c-tiny-user-card

scss

.c-tiny-user-card {
  background-color: use-color('base', true-white);
  border-radius: 8px;
  box-shadow: $box-shadow-card-lvl-2;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: fit-content;
  justify-content: center;
  padding: 24px;
  position: relative;
  width: 100%;

  @include element('profile-image') {
    border: solid 4px use-color('base', true-white);
    border-radius: 50%;
    box-shadow: $box-shadow-card-lvl-1;
    height: 100px;
    margin: 16px auto;
    width: 100px;
    z-index: use-layer('base');
  }

  @include element('background') {
    background-color: use-color(secondary);
    background-image: use-color(gradients, balanced);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100%;
    border-radius: 8px 8px 0 0;
    height: 97px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
  }

  // override button component
  .c-button {
    height: 48px;
    padding: 12px 24px;
    width: 100%;
    z-index: use-layer('base');
  }
}

El componente c-tiny-user-card esta hecho para mostrar la imagen del usuario y un botón de acción para cambiar la imagen.

Example

html

<div class="u-example-padding"> <!-- this div is just for doc example -->

  <div class="c-tiny-user-card">
    <div class="c-tiny-user-card__background"></div>

    <img class="c-tiny-user-card__profile-image" src="http://cdn.chattigo.com/assets/img/profiles/3_dummy.png" />
  
    <a class="c-button c-button--secondary">
      subir imagen
    </a>
  </div>

</div>

.c-switch-card

scss

.c-switch-card {
  align-items: center;
  background-color: use-color('base', true-white);
  border-radius: 4px;
  box-shadow: 0 0 5px 0 transparentize(use-color('grey'), 0.55);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  margin-right: 12px;
  padding: 16px 8px;
  width: 100%;

  @include element('label') {
    @include use-font('body', 'bold');
    line-height: 12px;

    &::first-letter {
      text-transform: uppercase;
    }
  }

  @include modifier('owner') {
    background-color: use-color('grey', 'light-ii');
    cursor: not-allowed;

    [class^='icon-'] {
      color: use-color('grey', 'light');
      font-size: 28px;
    }

    small {
      @include use-font('caption', 'regular');

      color: use-color('grey', 'light');
      display: block;
      line-height: 12px;
      margin-top: 4px;
    }
  }

  @include media-breakpoint-up('phone-ii') {
    padding: 16px;
  }

  // override c-switch
  .c-switch + label {
    height: 30px;
    width: 50px;

    &::after {
      height: 26px;
      left: 4px;
      top: 4px;
      width: 26px;
    }
  }

  .c-switch:checked + label::after {
    margin-left: 20px;
  }
}

Version del componente .c-switch-card envuelto un una card.

Con clase modificador .c-switch-card--owner para permiso inhabilitado.

Examples

html

<div class="u-example-padding"> <!-- this div is just for doc example -->

  <div class="c-switch-card">
    <label class="c-switch-card__label">
      realizar outbound
    </label>
  
    <input type="checkbox" class="c-switch" id="second">
    <label for="second"></label>
  </div>

</div>

html c-switch-card–owner

<div class="u-example-padding"> <!-- this div is just for doc example -->

<div class="c-switch-card c-switch-card--owner holi">
  <label class="c-switch-card__label">
    Configuración
    <small>
      Can't be switch off (You are the owner).
    </small>
  </label>
  <span class="icon-locked"></span>
</div>

</div>

.c-form-agent

scss

.c-form-agent {
  .c-button {
    margin-bottom: 16px;
    margin-top: 36px;
    padding: 8px;
  }
}

Este formulario esta creado solo para sobreescribir la clase c-button y dar los margenes y paddings adecuados para el formulario de edición del agente.

Example

html

<form class="c-form-agent">
  <button class="c-button c-button--secondary" type="submit">
    Desactivar usuario
  </button>
</form>

.c-user-card

scss

.c-user-card {
  align-items: center;
  background-color: use-color('base', true-white);
  border-radius: 4px;
  box-shadow: $box-shadow-card-lvl-1;
  display: flex;
  flex-flow: wrap;
  flex-direction: column;
  padding: 16px;

  @include media-breakpoint-up('tablet') {
    border-bottom: 1px solid use-color('grey', 'light-i');
    box-shadow: none;
    flex-flow: nowrap;
  }

  @include element('image') {
    border-radius: 50%;
    height: 40px;
    margin-right: 8px;
    min-width: 40px;
    order: 1;
    width: 40px;
  }

  @include element('agent-name') {
    @include use-font('body', 'regular');
    order: 2;

    @include media-breakpoint-up('tablet') {
      margin-right: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 160px;
    }
  }
  
  @include element('agent-nick') {
    @include use-font('body', 'regular');
    margin-left: auto;
    order: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    @include media-breakpoint-up('tablet') {
      margin-left: 0;
      margin-right: 8px;
      width: 200px;
    }
  }

  @include element('action') {
    order: 5;
    width: 100%;

    @include media-breakpoint-up('tablet') {
      margin-left: auto;
      width: 144px;
    }

    .c-button {
      padding: 8px;
    }
  }

  // override dynamic-field
  .c-list {
    margin: 16px 0;
    order: 4;
    width: 100%;

    @include element('dynamic-field') {
      padding: 0 4px;
      text-transform: capitalize;
      width: auto;
    }

    @include media-breakpoint-up('tablet') {
      justify-content: center;
      margin: 0;
      width: 40%;
    }
  }

  &:last-child() {
    border-bottom: 0; 
  }
}

Card que contiene información básica del usuario, junto a un botón para ir al detalle de este.

Depende del componente de lista .c-list.c-list--dynamic-fields para mostrar los roles del usuario.

Example

html

<div class="c-user-card">
  <img class="c-user-card__image" src="http://cdn.chattigo.com/assets/img/profiles/1_dummy.png" alt="User image"/>

  <div class="c-user-card__agent-name">
    Michael Burry
  </div>

  <div class="c-user-card__agent-nick">
    drburry
  </div>

  <ul class="c-list c-list--dynamic-fields">
    <li class="c-list__dynamic-field">Agente</li>
    <li class="c-list__dynamic-field">Supervisor</li>
    <li class="c-list__dynamic-field">Administrador</li>
  </ul>
  
  <div class="c-user-card__action">
    <button class="c-button c-button--secondary">
      Ver detalle
    </button>
  </div>
</div>

<div class="c-user-card">
  <img class="c-user-card__image" src="http://cdn.chattigo.com/assets/img/profiles/1_dummy.png" alt="User image"/>

  <div class="c-user-card__agent-name">
    Porter Collins Porter Collins Porter
  </div>

  <div class="c-user-card__agent-nick">
    portercollinsportercollins
  </div>

  <ul class="c-list c-list--dynamic-fields">
    <li class="c-list__dynamic-field">Agente</li>
    <li class="c-list__dynamic-field">Supervisor</li>
    <li class="c-list__dynamic-field">Mantenedor</li>
  </ul>
  
  <div class="c-user-card__action">
    <button class="c-button c-button--secondary">
      Ver detalle
    </button>
  </div>
</div>

.web-c-filter

scss

.web-c-filter {
  @include element('form') {
    display: grid;
    grid-gap: 8px;
    grid-template-columns: 1fr 1fr 1fr;

    @include media-breakpoint-up('tablet') {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }

  // override app-form--search
  .app-form--search {
    margin: 0;
    margin-bottom: 8px;
    padding: 0;

    &::before {
      top: 8px;
    }
  }

  // override input
  .c-input {
    grid-column: span 3;
    height: initial;
    padding: 8px 8px 8px 32px;
    width: 100%;

    @include media-breakpoint-up('tablet') {
      grid-column: unset;
      height: 40px;
      padding: 4px 8px 4px 32px;
    }
  }

  .c-select {
    margin-bottom: 0;
  }
}

Componente que contiene las opciones de filtro para la lista de usuarios.

Compuesto por el bloque contenedor .web-c-filter y el elemento .web-c-filter__form para su formulario.

Depende de la implementación del componente de busqueda de la aplicación .app-form--search.

Example

html

<div class="web-c-filter">
  <form class="app-form--search web-c-filter__form">
    <input type="text" class="c-input c-input--search" placeholder="Buscar" />

    <select class="c-select">
      <option id="0">
        Roles
      </option>
      <option id="1">Option 1</option>
      <option id="2">Option 2</option>
    </select>

    <select class="c-select">
      <option id="0">
        Campañas
      </option>
      <option id="1">Option 1</option>
      <option id="2">Option 2</option>
    </select>

    <select class="c-select">
      <option id="0">
        Permisos
      </option>
      <option id="1">Option 1</option>
      <option id="2">Option 2</option>
    </select>
  </form>
</div>

.c-permit-tab

scss

.c-permit-tab {
  @include element('nav') {
    background-color: use-color('base', 'true-white');
    border-radius: 4px;
    box-shadow: $box-shadow-card-lvl-1;
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 8px 16px;

    label {
      @include use-font('caption', 'bold');
      
      border-radius: inherit;
      color: use-color('grey', 'light');
      cursor: pointer;
      padding: 4px 8px;
      z-index: use-layer('base');
    }
  }

  [type='radio'] {
    display: none;
  }

  [class^='c-permit-tab-'] {
    left: 0;
    position: absolute;
    top: -26px;
    transform: scale(0);
    z-index: -1;
  }
}

Componente .c-permit-tab para separar permisos de los distintos roles en chattigo.

Example

html

<div class="u-example-padding"> <!-- this div is just for doc example -->

  <div class="c-permit-tab">
    <input type="radio" name="tab" id="c-permit-tab-st" checked></input>
    <input type="radio" name="tab" id="c-permit-tab-nd"></input>
    <input type="radio" name="tab" id="c-permit-tab-rd"></input>
    <nav class="c-permit-tab__nav">
      <label for="c-permit-tab-st">General</label>
      <label for="c-permit-tab-nd">Agente</label>
      <label for="c-permit-tab-rd">Supervisor</label>
    </nav>
    <div class="c-permit-tab-st-content">
      <div class="c-switch-card c-switch-card--owner">
        <label class="c-switch-card__label">
          Configuración
          <small>
            Can't be switch off (You are the owner).
          </small>
        </label>
        <span class="icon-maintainer"></span>
      </div>
      <div class="c-switch-card">
        <label class="c-switch-card__label">
          Compras
        </label>
        <input type="checkbox" class="c-switch" id="permit-buy">
        <label for="permit-buy"></label>
      </div>
    </div>
    <div class="c-permit-tab-nd-content">
      <div class="c-switch-card">
        <label class="c-switch-card__label">
          Outbound
        </label>
        <input type="checkbox" class="c-switch" id="permit-outbound">
        <label for="permit-outbound"></label>
      </div>
      <div class="c-switch-card">
        <label class="c-switch-card__label">
          Ver contactos
        </label>
        <input type="checkbox" class="c-switch" id="permit-contacts">
        <label for="permit-contacts"></label>
      </div>
    </div>
    <div class="c-permit-tab-rd-content">
      <div class="c-switch-card">
        <label class="c-switch-card__label">
          Reportería
        </label>
        <input type="checkbox" class="c-switch" id="permit-report">
        <label for="permit-report"></label>
      </div>
    </div>
  </div>
</div>