Documentation for CRM window component, including headers, sections and footer.
Files
app/styles/modules/_crm_window.scss
Windows
CRM Window is component which will be shown out of the app, as standalone window, containing same elements as app can, including new ones specific for crm window. It consist of .crm-window
wrapper, .crm-window_header
, sections and .crm-window_footer
. Most basic crm window can be created with following HTML code shown bellow.
Note
To create space from all sides in window content use class .crm-window_content-space
.
Headline
Lorem ipsum Cillum eu anim dolor esse occaecat Excepteur tempor dolor mollit nulla commodo est cupidatat ad ex ullamco dolor eiusmod.
<article class="crm-window">
<header class="crm-window_header">
<h3 class="crm-window_header_headline no-mrg text-left">Headline</h3>
</header>
<section class="crm-window_content .crm-window_content-spacecrm-window_content-space">
<p class="no-mrg-bottom">Lorem ipsum In deserunt incididunt.</p>
</section>
<footer class="crm-window_footer">
<p class="text-small no-mrg">Lorem ipsum Sed est aliquip in quis.</p>
</footer>
</article>
Window sizes
There are four sizes of window: small .crm-window-small
, default, large .crm-window-large
and extra large .crm-window-xlarge
.
Small
Lorem ipsum In deserunt incididunt.
Default
Lorem ipsum In deserunt incididunt.
Large
Lorem ipsum In deserunt incididunt.
Extra large
Lorem ipsum In deserunt incididunt.
<!-- small -->
<article class="crm-window crm-window-small crm-window-no-footer">
...
</article>
<!-- default -->
<article class="crm-window crm-window-no-footer">
...
</article>
<!-- large -->
<article class="crm-window crm-window-large crm-window-no-footer">
...
</article>
<!-- extra large -->
<article class="crm-window crm-window-xlarge crm-window-no-footer">
...
</article>
Multiple windows
You can create multiple CRM windows by wrapping them to .crm-window_wrap
container and using .tabs
with additional class .tabs-crm
to control windows.
<div class="crm-window_wrap crm-window_wrap-xlarge">
<article class="crm-window crm-window-xlarge crm-window-no-footer">
<aside class="crm-window_header crm-window_header-tabs">
<section class="crm-window_header_sec-primary">
<ul class="tabs tabs-crm">
<li class="tabs_item"><a class="tabs_link">#01</a></li>
<li class="tabs_item"><a class="tabs_link active">#02</a></li>
<li class="tabs_item"><a class="tabs_link">#03</a></li>
</ul>
</section>
<section class="crm-window_header_sec-secondary no-pad"><a class="btn btn-flat crm-window_header_close pull-right"><i class="icon icon-m">close</i></a></section>
</aside>
<header class="crm-window_header">
<section class="crm-window_header_sec-primary">
<h2 class="no-mrg text-normal">Headline</h2>
</section>
</header>
<section class="crm-window_content crm-window_content-space">
<p class="no-mrg">Lorem ipsum Occaecat ut officia incididunt laboris mollit consectetur ullamco fugiat ea ullamco nisi occaecat in eu.</p>
</section>
</article>
</div>
Header
CRM window header consist main wrapper .crm-window_header
and sections primary, secondary, info and actions .crm-window_header_sec-[primary/secondary/info/actions]
.
Note
There are several different designs for CRM Window headers, any of them can be build by using already existing elements.
Default header
Lorem ipsum Minim fugiat adipisicing ad consectetur voluptate.
<!-- default -->
<article class="crm-window crm-window-no-footer crm-window-small">
<header class="crm-window_header">
<h3 class="crm-window_header_headline no-mrg text-left">Default header</h3>
</header>
...
</article>
Header with close
Header with close action actually does not need sections, it can be created with HTML shown in example below.
Header with close action
closeLorem ipsum Minim fugiat adipisicing ad consectetur voluptate.
<article class="crm-window crm-window-no-footer crm-window-small">
<header class="crm-window_header">
<h3 class="crm-window_header_headline no-mrg text-left">Header with close action</h3>
<a class="btn btn-flat crm-window_header_close">
<i class="icon icon-m">close</i>
</a>
</header>
<section class="crm-window_content crm-window_content-space">
...
</section>
</article>
Header with avatar
Avatar can be added into .crm-window_header_sec-secondary
section. Headline and other info then goes to .crm-window_header_sec-primary
section.
Jaroslava Vojtašáková
- First Great Western Natio..
- +421915431255
<article class="crm-window crm-window-large">
<header class="crm-window_header">
<section class="crm-window_header_sec-secondary">
<img src="/images/app/ringing.gif" alt="ringing">
</section>
<section class="crm-window_header_sec-primary">
<h2 class="no-mrg text-normal">Jaroslava Vojtašáková</h2>
<ul class="list-inline text-small text-color-gray-400 no-mrg">
<li>First Great Western Natio.. </li>
<li>+421915431255</li>
</ul>
</section>
</header>
...
</article>
Header with actions
Action buttons in CRM window header should be added into .crm-window_header_sec-actions
section.
Note
You can combine headers with avatars and actions together.
+421 915 431 255
<article class="crm-window crm-window-xlarge">
<header class="crm-window_header">
<section class="crm-window_header_sec-secondary">
<img src="/images/app/ringing.gif" alt="ringing">
</section>
<section class="crm-window_header_sec-primary">
<h2 class="no-mrg text-normal">+421 915 431 255</h2>
</section>
<section class="crm-window_header_sec-actions">
<div class="btn-line">
<a title="call" class="btn btn-rounded btn-success">
<i class="icon icon-m">call</i>
</a>
<a title="call end" class="btn btn-rounded btn-danger">
<i class="icon icon-m">call_end</i>
</a>
<a title="call forward" class="btn btn-rounded btn-warning">
<i class="icon icon-m">call_forward</i>
</a>
</div>
</section>
</header>
...
</article>
Header with info
Call info in CRM window header should be added into .crm-window_header_sec-info
section.
Note
You can combine headers with avatars and info together, but not actions and info.
Jaroslava Vojtašáková
- First Great Western Natio..
- +421915431255
Call duration
00:00:15
<article class="crm-window crm-window-xlarge">
<header class="crm-window_header">
<section class="crm-window_header_sec-secondary">
<img src="/images/app/ringing.gif" alt="ringing">
</section>
<section class="crm-window_header_sec-primary">
<h2 class="no-mrg text-normal">+421 915 431 255</h2>
</section>
<section class="crm-window_header_sec-actions">
<div class="btn-line">
<a title="call" class="btn btn-rounded btn-success">
<i class="icon icon-m">call</i>
</a>
<a title="call end" class="btn btn-rounded btn-danger">
<i class="icon icon-m">call_end</i>
</a>
<a title="call forward" class="btn btn-rounded btn-warning">
<i class="icon icon-m">call_forward</i>
</a>
</div>
</section>
</header>
...
</article>
Jaroslava Vojtašáková
- First Great Western Natio..
- +421915431255
call_end hovor ukonceny
00:00:15
<article class="crm-window crm-window-large">
<header class="crm-window_header">
<section class="crm-window_header_sec-secondary">
<img src="/images/app/phone.png" alt="finished">
</section>
<section class="crm-window_header_sec-primary">
...
</section>
<section class="crm-window_header_sec-info">
<p class="no-mrg text-note text-color-red">
<i class="icon icon-s crm-window_header_sec-info_icon">call_end
</i>
hovor ukonceny
</p>
<p class="h3 no-mrg">00:00:15</p>
</section>
</header>
...
</article>
Sections
Content of CRM window should be wrapped into sections. There are two types of sections: default .crm-window_content
and secondary .crm-window_content-secondary
. There can be more content sections in one CRM window.
+421 915 431 255
Section secondary: Lorem ipsum Proident.
Section default: Lorem ipsum Non sint ut nulla do in reprehenderit ex tempor consequat tempor do in. Lorem ipsum Dolor aute deserunt occaecat est magna ut deserunt quis adipisicing sunt commodo ut commodo culpa id et.
<article class="crm-window crm-window-small crm-window-no-footer">
...
<section class="crm-window_content-secondary">
...
</section>
<section class="crm-window_content">
...
</section>
</article>