Tables

Documentation for tables and table components in callcentrum.

Files

app/styles/modules/_callcentrum.scss

Table

Callcentrum table .callcntr-table.

Example:code
Meno (linka) Stav Fronta
Jane
VIP2 (0330)

Prohlásený

Hovorí

Jane
CRTM (0334)

Prohlásený

Hovorí
04:30:25

Jane
Lukáš Karásek (0330)

Prohlásený

Hovorí
(Dôležitá záležitosť) 16:16:40

Jane
Alexandra Jonášová (0330)

Prohlásený

Voľný

Jane
VIP3 (0110)

Prohlásený

Pauza
(DND) 16:20:14

Code: 
<table class="callcntr-table">
  <thead class="callcntr-table_head">
    <tr>
      <th class="callcntr-table_head-item">Table header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="callcntr-table_item">Table cell</td>
    </tr>
  </tbody>
</table>

Modifiers

Modify default callcentrum table with .callcntr-table--condensed and .callcntr-table--noborder modifiers.

Example:code
circle_circles circle_empty circle circle_pause circle_phone circle_clock circle_exclamation
129 325 48 12 89 24 439
129 325 48 12 89 24 439
129 325 48 12 89 24 439
129 325 48 12 89 24 439
Code: 
<table class="callcntr-table callcntr-table--condensed callcntr-table--noborder">
  <tbody>
    <tr>
      <td class="callcntr-table_item">Table cell</td>
      <td class="callcntr-table_item">Table cell</td>
      <td class="callcntr-table_item">Table cell</td>
    </tr>
  </tbody>
</table>

Table with gray header

Callcentrum table can have gray themed header with additional class .callcntr-table_head-gray on .callcntr-table_head element.

Example:code
Meno (linka) Stav Fronta
Jane
VIP2 (0330)

Prohlásený

Hovorí

Jane
CRTM (0334)

Prohlásený

Hovorí
04:30:25

Code: 
<table class="callcntr-table">
  <thead class="callcntr-table_head callcntr-table_head-gray">
    <tr>
      <th class="callcntr-table_head-item">Table header</th>
    </tr>
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Table items

Table specific items can contain specific components such as text with state, avatar or actions.

Table item

Component similar to .list_item, but adjusted to usage in table as .table_item.

Note

Check List item for more information.
Example:code

Alexandra Jonášová (2)
14:22:16
Code: 
<div class="table_item">
  <div class="table_item_sec-primary">
    <div class="table_item_sec-primary">
      <p class="no-mrg">
        <span>Alexandra Jonášová</span> <span>(2)</span><br><span>14:22:16</span>
      </p>
    </div>
  </div>
</div>

Table item with state

Component similar to .list_item_sec-state but adjusted to usage in table as .table_item_sec-state.

Note

State icon can be created by using class .table_state-[success/warning/danger/inactive] on element inside table item section state (similar to list item).

Note

Check List item with state for more information.
Example:code
Stav

Hovorí
(Dôležitá záležitosť) 16:16:40

Hovorí
Code: 
<div class="table_item">
  <div class="table_item_sec-state">
    <i class="table_state-success"></i>
  </div>
  <div class="table_item_sec-primary">
    <p class="no-mrg">
      <span class="text-color-black">Hovorí </span>
      <br>
      <span class="text-small">16:16:40</span></p>
  </div>
</div>

Table item with avatar

Component similar to .list_item-avatar, but adjusted to usage in table as .table_item-avatar.

Note

Check List item with avatar for more information.
Example:code
Meno (linka)
Jane
VIP2 (0330)

Prohlásený
Code: 
<div class="table_item table_item-avatar">
  <div class="table_item_sec-secondary">
    <figure class="avatar avatar-state avatar-state-green"><img src="/images/content/people/jane.jpg" alt="Jane" class="img-fluid img-circle"></figure>
  </div>
  <div class="table_item_sec-primary">
    <div class="text-color-black">VIP2 (0330)</div>
    <p class="no-mrg text-small">Prohlásený</p>
  </div>
</div>

Table actions

Table row can have multiple actions .callcntr-table-actions typicaly situated in end of table row. Action .callcntr-table-action can contain simple icon, or icon with dropdown menu. Special type of action is .callcntr-table-action-check with green full edge background.

Example:code
volume_up
message
more
volume_up
message
more
check
Code: 
<div class="callcntr-table-actions">
  <div class="callcntr-table-action">
    <i class="icon icon-m">volume_up</i>
  </div>
  <div class="callcntr-table-action btn-dropdown">
    <div data-target="parent" data-toggle="dropdown" data-toggle-icon="" class="js-toggle"> 
      <i class="icon icon-m">more</i>
    </div>
    <ul class="dropdown-list dropdown-list-to-left">
      <li><a class="dropdown-list_item">Označ ako vyriešené</a></li>
      <li><a class="dropdown-list_item">Lorem ipsum</a></li>
    </ul>
  </div>
  <div class="callcntr-table-action callcntr-table-action-check">
    <i class="icon icon-m">check</i>
  </div>
</div>

List table

Callcentrum list table is special kind of table which resembles list. Table rown can have multiple state such as .active to highlight row and .disabled to gray out row elements.

Example:code
chevrondown

Alexandra Jonášová (2)
14:22:16
!
Fronta #02
timer25m 12s
call
message
more
chevrondown

Alexandra Jonášová (2)
14:22:16
!
Fronta #02
timer25m 12s
call
message
more
check
waitchevrondown

Alexandra Jonášová (2)
14:22:16
!
Fronta #02
timer25m 12s
chevrondown

Alexandra Jonášová (2)
14:22:16
Fronta #02
timer25m 12s
call
message
more
waitchevrondown

Alexandra Jonášová (2)
14:22:16
Fronta #02
timer25m 12s
chevrondown

Alexandra Jonášová (2)
14:22:16
Fronta #02
timer25m 12s
call
message
more
checkchevrondown

Alexandra Jonášová (2)
14:22:16
Fronta #02
timer25m 12s
Code: 
<table class="callcntr-list-table">
  <tbody>
    <tr class="callcntr-list-table-row">
      <td class="callcntr-list-table-column">
        ...
      </td>
    </tr>
    <tr class="callcntr-list-table-row active">
      <td class="callcntr-list-table-column">
        ...
      </td>
    </tr>
    <tr class="callcntr-list-table-row disabled">
      <td class="callcntr-list-table-column">
        ...
      </td>
    </tr>
  </tbody>
</table>

List table items

Callcentrum list table have special items such as custom dropdown button with icon or checkbox or column with information about front.

List table button dropdown

Special type of button dropdown named as .btn-dropdown with icon or checkbox inside that button.

Example:code
chevrondown
waitchevrondown
Code: 
<table class="callcntr-list-table">
  <tbody>
    <tr class="callcntr-list-table-row">
      <td class="callcntr-list-table-column callcntr-list-table-column-dropdown">
        <div class="btn-dropdown">
          <div type="button" data-target="parent" data-toggle="dropdown" data-toggle-icon="" class="btn btn-flat js-toggle">
            <div class="checkbox checkbox-cross">
              <input type="checkbox" id="" name="" class="checkbox-input">
              <label for="" class="checkbox-custom"></label>
            </div>
            <i class="icon icon-m icon-dropdown">chevrondown</i>
          </div>
          <ul class="dropdown-list">
            <li><a class="dropdown-list_item">Označ ako nevyriešené</a></li>
            <li><a class="dropdown-list_item">Priradiť operátorovi</a></li>
          </ul>
        </div>
      </td>
      <td class="callcntr-list-table-column callcntr-list-table-column-dropdown">
        <div class="btn-dropdown">
          <div type="button" data-target="parent" data-toggle="dropdown" data-toggle-icon="" class="btn btn-flat js-toggle"><i class="icon icon-m">wait</i><i class="icon icon-m icon-dropdown">chevrondown</i></div>
          <ul class="dropdown-list">
              <li><a class="dropdown-list_item">Označ ako nevyriešené</a></li>
              <li><a class="dropdown-list_item">Priradiť operátorovi</a></li>
          </ul>
        </div>
      </td>
    </tr>
  </tbody>
</table>

List table front column

Front column uses .callcntr-status component to display information about row (name and color). It also uses .callcntr-front-time to display time with icon.

Note

Color of status should by inlined to style attribute of .callcntr-status-type as CSS background-color to unlimted color variations.
Example:code
Fronta #02
timer25m 12s
Code: 
<div class="table_item">
  <div class="table_item_sec-primary">
    <div class="callcntr-status">
      <div style="background-color: #79c842;" class="callcntr-status-type"></div>
      <div class="callcntr-status-content">
        <div class="callcntr-status-content-line">Fronta #02</div>
      </div>
    </div>
    <div class="callcntr-front-time text-color-gray-400">
      <i class="icon icon-s">timer</i><span>25m 12s</span>
    </div>
  </div>
</div>