mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-22 00:06:06 +08:00
add personal level indicators example package
This commit is contained in:
dillon
parent
696c3dc097
commit
7e57ae817f
9
examples/N1-Personal-Level-Indicators/README.md
Normal file
9
examples/N1-Personal-Level-Indicators/README.md
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
# Personal Level Icon
|
||||||
|
|
||||||
|
## What?
|
||||||
|
|
||||||
|
An icon to indicate whether an email was sent to either just you, or you and other recipients, or a mailing list that you were on.
|
||||||
|
|
||||||
|
## Who?
|
||||||
|
|
||||||
|
This package is annotated for developers who have no experience with React, Flux, Electron, or N1.
|
||||||
518
examples/N1-Personal-Level-Indicators/docs/docco.css
Normal file
518
examples/N1-Personal-Level-Indicators/docs/docco.css
Normal file
|
|
@ -0,0 +1,518 @@
|
||||||
|
/*--------------------- Typography ----------------------------*/
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'aller-light';
|
||||||
|
src: url('public/fonts/aller-light.eot');
|
||||||
|
src: url('public/fonts/aller-light.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('public/fonts/aller-light.woff') format('woff'),
|
||||||
|
url('public/fonts/aller-light.ttf') format('truetype');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'aller-bold';
|
||||||
|
src: url('public/fonts/aller-bold.eot');
|
||||||
|
src: url('public/fonts/aller-bold.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('public/fonts/aller-bold.woff') format('woff'),
|
||||||
|
url('public/fonts/aller-bold.ttf') format('truetype');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'roboto-black';
|
||||||
|
src: url('public/fonts/roboto-black.eot');
|
||||||
|
src: url('public/fonts/roboto-black.eot?#iefix') format('embedded-opentype'),
|
||||||
|
url('public/fonts/roboto-black.woff') format('woff'),
|
||||||
|
url('public/fonts/roboto-black.ttf') format('truetype');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------------- Layout ----------------------------*/
|
||||||
|
html { height: 100%; }
|
||||||
|
body {
|
||||||
|
font-family: "aller-light";
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 18px;
|
||||||
|
color: #30404f;
|
||||||
|
margin: 0; padding: 0;
|
||||||
|
height:100%;
|
||||||
|
}
|
||||||
|
#container { min-height: 100%; }
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
b, strong {
|
||||||
|
font-weight: normal;
|
||||||
|
font-family: "aller-bold";
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 15px 0 0px;
|
||||||
|
}
|
||||||
|
.annotation ul, .annotation ol {
|
||||||
|
margin: 25px 0;
|
||||||
|
}
|
||||||
|
.annotation ul li, .annotation ol li {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 18px;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
color: #112233;
|
||||||
|
line-height: 1em;
|
||||||
|
font-weight: normal;
|
||||||
|
font-family: "roboto-black";
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin: 30px 0 15px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 1.26em;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border: 0;
|
||||||
|
background: 1px #ddd;
|
||||||
|
height: 1px;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre, tt, code {
|
||||||
|
font-size: 12px; line-height: 16px;
|
||||||
|
font-family: Menlo, Monaco, Consolas, "Lucida Console", monospace;
|
||||||
|
margin: 0; padding: 0;
|
||||||
|
}
|
||||||
|
.annotation pre {
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
padding: 7px 10px;
|
||||||
|
background: #fcfcfc;
|
||||||
|
-moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
|
||||||
|
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
|
||||||
|
box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
.annotation pre code {
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
border-left: 5px solid #ccc;
|
||||||
|
margin: 0;
|
||||||
|
padding: 1px 0 1px 1em;
|
||||||
|
}
|
||||||
|
.sections blockquote p {
|
||||||
|
font-family: Menlo, Consolas, Monaco, monospace;
|
||||||
|
font-size: 12px; line-height: 16px;
|
||||||
|
color: #999;
|
||||||
|
margin: 10px 0 0;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.sections {
|
||||||
|
list-style: none;
|
||||||
|
padding:0 0 5px 0;;
|
||||||
|
margin:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Force border-box so that % widths fit the parent
|
||||||
|
container without overlap because of margin/padding.
|
||||||
|
|
||||||
|
More Info : http://www.quirksmode.org/css/box.html
|
||||||
|
*/
|
||||||
|
ul.sections > li > div {
|
||||||
|
-moz-box-sizing: border-box; /* firefox */
|
||||||
|
-ms-box-sizing: border-box; /* ie */
|
||||||
|
-webkit-box-sizing: border-box; /* webkit */
|
||||||
|
-khtml-box-sizing: border-box; /* konqueror */
|
||||||
|
box-sizing: border-box; /* css3 */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*---------------------- Jump Page -----------------------------*/
|
||||||
|
#jump_to, #jump_page {
|
||||||
|
margin: 0;
|
||||||
|
background: white;
|
||||||
|
-webkit-box-shadow: 0 0 25px #777; -moz-box-shadow: 0 0 25px #777;
|
||||||
|
-webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px;
|
||||||
|
font: 16px Arial;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: right;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#jump_to a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#jump_to a.large {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#jump_to a.small {
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #676767;
|
||||||
|
}
|
||||||
|
|
||||||
|
#jump_to, #jump_wrapper {
|
||||||
|
position: fixed;
|
||||||
|
right: 0; top: 0;
|
||||||
|
padding: 10px 15px;
|
||||||
|
margin:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#jump_wrapper {
|
||||||
|
display: none;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#jump_to:hover #jump_wrapper {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#jump_page_wrapper{
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#jump_page {
|
||||||
|
padding: 5px 0 3px;
|
||||||
|
margin: 0 0 25px 25px;
|
||||||
|
max-height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#jump_page .source {
|
||||||
|
display: block;
|
||||||
|
padding: 15px;
|
||||||
|
text-decoration: none;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
#jump_page .source:hover {
|
||||||
|
background: #f5f5ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
#jump_page .source:first-child {
|
||||||
|
}
|
||||||
|
|
||||||
|
/*---------------------- Low resolutions (> 320px) ---------------------*/
|
||||||
|
@media only screen and (min-width: 320px) {
|
||||||
|
.pilwrap { display: none; }
|
||||||
|
|
||||||
|
ul.sections > li > div {
|
||||||
|
display: block;
|
||||||
|
padding:5px 10px 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.sections > li > div.annotation ul, ul.sections > li > div.annotation ol {
|
||||||
|
padding-left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.sections > li > div.content {
|
||||||
|
overflow-x:auto;
|
||||||
|
-webkit-box-shadow: inset 0 0 5px #e5e5ee;
|
||||||
|
box-shadow: inset 0 0 5px #e5e5ee;
|
||||||
|
border: 1px solid #dedede;
|
||||||
|
margin:5px 10px 5px 10px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.sections > li > div.annotation pre {
|
||||||
|
margin: 7px 0 7px;
|
||||||
|
padding-left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.sections > li > div.annotation p tt, .annotation code {
|
||||||
|
background: #f8f8ff;
|
||||||
|
border: 1px solid #dedede;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 0 0.2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*---------------------- (> 481px) ---------------------*/
|
||||||
|
@media only screen and (min-width: 481px) {
|
||||||
|
#container {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background-color: #F5F5FF;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 21px;
|
||||||
|
}
|
||||||
|
pre, tt, code {
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
p, ul, ol {
|
||||||
|
margin: 0 0 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#jump_to {
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
#jump_wrapper {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
#jump_to, #jump_page {
|
||||||
|
font: 10px Arial;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
#jump_page .source {
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
#jump_to a.large {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
#jump_to a.small {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#background {
|
||||||
|
position: absolute;
|
||||||
|
top: 0; bottom: 0;
|
||||||
|
width: 350px;
|
||||||
|
background: #fff;
|
||||||
|
border-right: 1px solid #e5e5ee;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.sections > li > div.annotation ul, ul.sections > li > div.annotation ol {
|
||||||
|
padding-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.sections > li {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.sections > li > div {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.sections > li > div.annotation {
|
||||||
|
max-width: 350px;
|
||||||
|
min-width: 350px;
|
||||||
|
min-height: 5px;
|
||||||
|
padding: 13px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
white-space: normal;
|
||||||
|
vertical-align: top;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
ul.sections > li > div.annotation pre {
|
||||||
|
margin: 15px 0 15px;
|
||||||
|
padding-left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.sections > li > div.content {
|
||||||
|
padding: 13px;
|
||||||
|
vertical-align: top;
|
||||||
|
border: none;
|
||||||
|
-webkit-box-shadow: none;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pilwrap {
|
||||||
|
position: relative;
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pilcrow {
|
||||||
|
font: 12px Arial;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #454545;
|
||||||
|
position: absolute;
|
||||||
|
top: 3px; left: -20px;
|
||||||
|
padding: 1px 2px;
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transition: opacity 0.2s linear;
|
||||||
|
}
|
||||||
|
.for-h1 .pilcrow {
|
||||||
|
top: 47px;
|
||||||
|
}
|
||||||
|
.for-h2 .pilcrow, .for-h3 .pilcrow, .for-h4 .pilcrow {
|
||||||
|
top: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.sections > li > div.annotation:hover .pilcrow {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*---------------------- (> 1025px) ---------------------*/
|
||||||
|
@media only screen and (min-width: 1025px) {
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#background {
|
||||||
|
width: 525px;
|
||||||
|
}
|
||||||
|
ul.sections > li > div.annotation {
|
||||||
|
max-width: 525px;
|
||||||
|
min-width: 525px;
|
||||||
|
padding: 10px 25px 1px 50px;
|
||||||
|
}
|
||||||
|
ul.sections > li > div.content {
|
||||||
|
padding: 9px 15px 16px 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*---------------------- Syntax Highlighting -----------------------------*/
|
||||||
|
|
||||||
|
td.linenos { background-color: #f0f0f0; padding-right: 10px; }
|
||||||
|
span.lineno { background-color: #f0f0f0; padding: 0 5px 0 5px; }
|
||||||
|
/*
|
||||||
|
|
||||||
|
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
pre code {
|
||||||
|
display: block; padding: 0.5em;
|
||||||
|
color: #000;
|
||||||
|
background: #f8f8ff
|
||||||
|
}
|
||||||
|
|
||||||
|
pre .hljs-comment,
|
||||||
|
pre .hljs-template_comment,
|
||||||
|
pre .hljs-diff .hljs-header,
|
||||||
|
pre .hljs-javadoc {
|
||||||
|
color: #408080;
|
||||||
|
font-style: italic
|
||||||
|
}
|
||||||
|
|
||||||
|
pre .hljs-keyword,
|
||||||
|
pre .hljs-assignment,
|
||||||
|
pre .hljs-literal,
|
||||||
|
pre .hljs-css .hljs-rule .hljs-keyword,
|
||||||
|
pre .hljs-winutils,
|
||||||
|
pre .hljs-javascript .hljs-title,
|
||||||
|
pre .hljs-lisp .hljs-title,
|
||||||
|
pre .hljs-subst {
|
||||||
|
color: #954121;
|
||||||
|
/*font-weight: bold*/
|
||||||
|
}
|
||||||
|
|
||||||
|
pre .hljs-number,
|
||||||
|
pre .hljs-hexcolor {
|
||||||
|
color: #40a070
|
||||||
|
}
|
||||||
|
|
||||||
|
pre .hljs-string,
|
||||||
|
pre .hljs-tag .hljs-value,
|
||||||
|
pre .hljs-phpdoc,
|
||||||
|
pre .hljs-tex .hljs-formula {
|
||||||
|
color: #219161;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre .hljs-title,
|
||||||
|
pre .hljs-id {
|
||||||
|
color: #19469D;
|
||||||
|
}
|
||||||
|
pre .hljs-params {
|
||||||
|
color: #00F;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre .hljs-javascript .hljs-title,
|
||||||
|
pre .hljs-lisp .hljs-title,
|
||||||
|
pre .hljs-subst {
|
||||||
|
font-weight: normal
|
||||||
|
}
|
||||||
|
|
||||||
|
pre .hljs-class .hljs-title,
|
||||||
|
pre .hljs-haskell .hljs-label,
|
||||||
|
pre .hljs-tex .hljs-command {
|
||||||
|
color: #458;
|
||||||
|
font-weight: bold
|
||||||
|
}
|
||||||
|
|
||||||
|
pre .hljs-tag,
|
||||||
|
pre .hljs-tag .hljs-title,
|
||||||
|
pre .hljs-rules .hljs-property,
|
||||||
|
pre .hljs-django .hljs-tag .hljs-keyword {
|
||||||
|
color: #000080;
|
||||||
|
font-weight: normal
|
||||||
|
}
|
||||||
|
|
||||||
|
pre .hljs-attribute,
|
||||||
|
pre .hljs-variable,
|
||||||
|
pre .hljs-instancevar,
|
||||||
|
pre .hljs-lisp .hljs-body {
|
||||||
|
color: #008080
|
||||||
|
}
|
||||||
|
|
||||||
|
pre .hljs-regexp {
|
||||||
|
color: #B68
|
||||||
|
}
|
||||||
|
|
||||||
|
pre .hljs-class {
|
||||||
|
color: #458;
|
||||||
|
font-weight: bold
|
||||||
|
}
|
||||||
|
|
||||||
|
pre .hljs-symbol,
|
||||||
|
pre .hljs-ruby .hljs-symbol .hljs-string,
|
||||||
|
pre .hljs-ruby .hljs-symbol .hljs-keyword,
|
||||||
|
pre .hljs-ruby .hljs-symbol .hljs-keymethods,
|
||||||
|
pre .hljs-lisp .hljs-keyword,
|
||||||
|
pre .hljs-tex .hljs-special,
|
||||||
|
pre .hljs-input_number {
|
||||||
|
color: #990073
|
||||||
|
}
|
||||||
|
|
||||||
|
pre .hljs-builtin,
|
||||||
|
pre .hljs-constructor,
|
||||||
|
pre .hljs-built_in,
|
||||||
|
pre .hljs-lisp .hljs-title {
|
||||||
|
color: #0086b3
|
||||||
|
}
|
||||||
|
|
||||||
|
pre .hljs-preprocessor,
|
||||||
|
pre .hljs-pi,
|
||||||
|
pre .hljs-doctype,
|
||||||
|
pre .hljs-shebang,
|
||||||
|
pre .hljs-cdata {
|
||||||
|
color: #999;
|
||||||
|
font-weight: bold
|
||||||
|
}
|
||||||
|
|
||||||
|
pre .hljs-deletion {
|
||||||
|
background: #fdd
|
||||||
|
}
|
||||||
|
|
||||||
|
pre .hljs-addition {
|
||||||
|
background: #dfd
|
||||||
|
}
|
||||||
|
|
||||||
|
pre .hljs-diff .hljs-change {
|
||||||
|
background: #0086b3
|
||||||
|
}
|
||||||
|
|
||||||
|
pre .hljs-chunk {
|
||||||
|
color: #aaa
|
||||||
|
}
|
||||||
|
|
||||||
|
pre .hljs-tex .hljs-formula {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,171 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Personal Level Icon</title>
|
||||||
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
|
||||||
|
<link rel="stylesheet" media="all" href="docco.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="container">
|
||||||
|
<div id="background"></div>
|
||||||
|
|
||||||
|
<ul class="sections">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<li id="section-1">
|
||||||
|
<div class="annotation">
|
||||||
|
|
||||||
|
<div class="pilwrap ">
|
||||||
|
<a class="pilcrow" href="#section-1">¶</a>
|
||||||
|
</div>
|
||||||
|
<h1 id="personal-level-icon">Personal Level Icon</h1>
|
||||||
|
<p>Show an icon for each thread to indicate whether you’re the only recipient,
|
||||||
|
one of many recipients, or a member of a mailing list.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li id="section-2">
|
||||||
|
<div class="annotation">
|
||||||
|
|
||||||
|
<div class="pilwrap ">
|
||||||
|
<a class="pilcrow" href="#section-2">¶</a>
|
||||||
|
</div>
|
||||||
|
<p>Access core components by requiring <code>nylas-exports</code>.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content"><div class='highlight'><pre>{Utils, DraftStore, React} = <span class="hljs-built_in">require</span> <span class="hljs-string">'nylas-exports'</span></pre></div></div>
|
||||||
|
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li id="section-3">
|
||||||
|
<div class="annotation">
|
||||||
|
|
||||||
|
<div class="pilwrap ">
|
||||||
|
<a class="pilcrow" href="#section-3">¶</a>
|
||||||
|
</div>
|
||||||
|
<p>Access N1 React components by requiring <code>nylas-component-kit</code>.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content"><div class='highlight'><pre>{RetinaImg} = <span class="hljs-built_in">require</span> <span class="hljs-string">'nylas-component-kit'</span>
|
||||||
|
|
||||||
|
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">PersonalLevelIcon</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span></pre></div></div>
|
||||||
|
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li id="section-4">
|
||||||
|
<div class="annotation">
|
||||||
|
|
||||||
|
<div class="pilwrap ">
|
||||||
|
<a class="pilcrow" href="#section-4">¶</a>
|
||||||
|
</div>
|
||||||
|
<p>Note: You should assign a new displayName to avoid naming
|
||||||
|
conflicts when injecting your item</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content"><div class='highlight'><pre> <span class="hljs-property">@displayName</span>: <span class="hljs-string">'PersonalLevelIcon'</span></pre></div></div>
|
||||||
|
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li id="section-5">
|
||||||
|
<div class="annotation">
|
||||||
|
|
||||||
|
<div class="pilwrap ">
|
||||||
|
<a class="pilcrow" href="#section-5">¶</a>
|
||||||
|
</div>
|
||||||
|
<p>In the constructor, we’re setting the component’s initial state.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content"><div class='highlight'><pre> <span class="hljs-attribute">constructor</span>: <span class="hljs-function"><span class="hljs-params">(<span class="hljs-property">@props</span>)</span> -></span>
|
||||||
|
<span class="hljs-property">@state</span> =
|
||||||
|
<span class="hljs-attribute">level</span>: <span class="hljs-property">@_calculateLevel</span>(<span class="hljs-property">@props</span>.thread)</pre></div></div>
|
||||||
|
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li id="section-6">
|
||||||
|
<div class="annotation">
|
||||||
|
|
||||||
|
<div class="pilwrap ">
|
||||||
|
<a class="pilcrow" href="#section-6">¶</a>
|
||||||
|
</div>
|
||||||
|
<p>React components’ <code>render</code> methods return a virtual DOM element to render.
|
||||||
|
The returned DOM fragment is a result of the component’s <code>state</code> and
|
||||||
|
<code>props</code>. In that sense, <code>render</code> methods are deterministic.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content"><div class='highlight'><pre> <span class="hljs-attribute">render</span>: <span class="hljs-function">=></span>
|
||||||
|
React.createElement(<span class="hljs-string">"div"</span>, {<span class="hljs-string">"className"</span>: <span class="hljs-string">"personal-level-icon"</span>},
|
||||||
|
(<span class="hljs-property">@_renderIcon</span>())
|
||||||
|
)</pre></div></div>
|
||||||
|
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li id="section-7">
|
||||||
|
<div class="annotation">
|
||||||
|
|
||||||
|
<div class="pilwrap ">
|
||||||
|
<a class="pilcrow" href="#section-7">¶</a>
|
||||||
|
</div>
|
||||||
|
<p>Some application logic which is specific to this package to decide which
|
||||||
|
character to render.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content"><div class='highlight'><pre> <span class="hljs-attribute">_renderIcon</span>: <span class="hljs-function">=></span>
|
||||||
|
<span class="hljs-keyword">switch</span> <span class="hljs-property">@state</span>.level
|
||||||
|
<span class="hljs-keyword">when</span> <span class="hljs-number">0</span> <span class="hljs-keyword">then</span> <span class="hljs-string">""</span>
|
||||||
|
<span class="hljs-keyword">when</span> <span class="hljs-number">1</span> <span class="hljs-keyword">then</span> <span class="hljs-string">"\u3009"</span>
|
||||||
|
<span class="hljs-keyword">when</span> <span class="hljs-number">2</span> <span class="hljs-keyword">then</span> <span class="hljs-string">"\u300b"</span>
|
||||||
|
<span class="hljs-keyword">when</span> <span class="hljs-number">3</span> <span class="hljs-keyword">then</span> <span class="hljs-string">"\u21ba"</span></pre></div></div>
|
||||||
|
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li id="section-8">
|
||||||
|
<div class="annotation">
|
||||||
|
|
||||||
|
<div class="pilwrap ">
|
||||||
|
<a class="pilcrow" href="#section-8">¶</a>
|
||||||
|
</div>
|
||||||
|
<p>Some more application logic which is specific to this package to decide
|
||||||
|
what level of personalness is related to the <code>thread</code>.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content"><div class='highlight'><pre> <span class="hljs-attribute">_calculateLevel</span>: <span class="hljs-function"><span class="hljs-params">(thread)</span> =></span>
|
||||||
|
<span class="hljs-function"> <span class="hljs-title">hasMe</span> = <span class="hljs-params">(thread.participants.filter (p) -> p.isMe())</span>.<span class="hljs-title">length</span> > 0
|
||||||
|
<span class="hljs-title">numOthers</span> = <span class="hljs-title">thread</span>.<span class="hljs-title">participants</span>.<span class="hljs-title">length</span> - <span class="hljs-title">hasMe</span>
|
||||||
|
<span class="hljs-title">if</span> <span class="hljs-title">not</span> <span class="hljs-title">hasMe</span>
|
||||||
|
<span class="hljs-title">return</span> 0
|
||||||
|
<span class="hljs-title">if</span> <span class="hljs-title">numOthers</span> > 1
|
||||||
|
<span class="hljs-title">return</span> 1
|
||||||
|
<span class="hljs-title">if</span> <span class="hljs-title">numOthers</span> <span class="hljs-title">is</span> 1
|
||||||
|
<span class="hljs-title">return</span> 2
|
||||||
|
<span class="hljs-title">else</span>
|
||||||
|
<span class="hljs-title">return</span> 3
|
||||||
|
|
||||||
|
<span class="hljs-title">module</span>.<span class="hljs-title">exports</span> = <span class="hljs-title">PersonalLevelIcon</span>
|
||||||
|
|
||||||
|
</span></pre></div></div>
|
||||||
|
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
examples/N1-Personal-Level-Indicators/docs/public/fonts/roboto-black.eot
Executable file
BIN
examples/N1-Personal-Level-Indicators/docs/public/fonts/roboto-black.eot
Executable file
Binary file not shown.
BIN
examples/N1-Personal-Level-Indicators/docs/public/fonts/roboto-black.ttf
Executable file
BIN
examples/N1-Personal-Level-Indicators/docs/public/fonts/roboto-black.ttf
Executable file
Binary file not shown.
BIN
examples/N1-Personal-Level-Indicators/docs/public/fonts/roboto-black.woff
Executable file
BIN
examples/N1-Personal-Level-Indicators/docs/public/fonts/roboto-black.woff
Executable file
Binary file not shown.
375
examples/N1-Personal-Level-Indicators/docs/public/stylesheets/normalize.css
vendored
Normal file
375
examples/N1-Personal-Level-Indicators/docs/public/stylesheets/normalize.css
vendored
Normal file
|
|
@ -0,0 +1,375 @@
|
||||||
|
/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
HTML5 display definitions
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Corrects `block` display not defined in IE 8/9.
|
||||||
|
*/
|
||||||
|
|
||||||
|
article,
|
||||||
|
aside,
|
||||||
|
details,
|
||||||
|
figcaption,
|
||||||
|
figure,
|
||||||
|
footer,
|
||||||
|
header,
|
||||||
|
hgroup,
|
||||||
|
nav,
|
||||||
|
section,
|
||||||
|
summary {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Corrects `inline-block` display not defined in IE 8/9.
|
||||||
|
*/
|
||||||
|
|
||||||
|
audio,
|
||||||
|
canvas,
|
||||||
|
video {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Prevents modern browsers from displaying `audio` without controls.
|
||||||
|
* Remove excess height in iOS 5 devices.
|
||||||
|
*/
|
||||||
|
|
||||||
|
audio:not([controls]) {
|
||||||
|
display: none;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Addresses styling for `hidden` attribute not present in IE 8/9.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Base
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 1. Sets default font family to sans-serif.
|
||||||
|
* 2. Prevents iOS text size adjust after orientation change, without disabling
|
||||||
|
* user zoom.
|
||||||
|
*/
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-family: sans-serif; /* 1 */
|
||||||
|
-webkit-text-size-adjust: 100%; /* 2 */
|
||||||
|
-ms-text-size-adjust: 100%; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Removes default margin.
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Links
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Addresses `outline` inconsistency between Chrome and other browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
a:focus {
|
||||||
|
outline: thin dotted;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Improves readability when focused and also mouse hovered in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
a:active,
|
||||||
|
a:hover {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Typography
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
|
||||||
|
* Safari 5, and Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Addresses styling not present in IE 8/9, Safari 5, and Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
border-bottom: 1px dotted;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Addresses styling not present in Safari 5 and Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
dfn {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Addresses styling not present in IE 8/9.
|
||||||
|
*/
|
||||||
|
|
||||||
|
mark {
|
||||||
|
background: #ff0;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Corrects font family set oddly in Safari 5 and Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
pre,
|
||||||
|
samp {
|
||||||
|
font-family: monospace, serif;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Improves readability of pre-formatted text in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
pre {
|
||||||
|
white-space: pre;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Sets consistent quote types.
|
||||||
|
*/
|
||||||
|
|
||||||
|
q {
|
||||||
|
quotes: "\201C" "\201D" "\2018" "\2019";
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Addresses inconsistent and variable font size in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Prevents `sub` and `sup` affecting `line-height` in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Embedded content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Removes border when inside `a` element in IE 8/9.
|
||||||
|
*/
|
||||||
|
|
||||||
|
img {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Corrects overflow displayed oddly in IE 9.
|
||||||
|
*/
|
||||||
|
|
||||||
|
svg:not(:root) {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Figures
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Addresses margin not present in IE 8/9 and Safari 5.
|
||||||
|
*/
|
||||||
|
|
||||||
|
figure {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Forms
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Define consistent border, margin, and padding.
|
||||||
|
*/
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
border: 1px solid #c0c0c0;
|
||||||
|
margin: 0 2px;
|
||||||
|
padding: 0.35em 0.625em 0.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 1. Corrects color not being inherited in IE 8/9.
|
||||||
|
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||||
|
*/
|
||||||
|
|
||||||
|
legend {
|
||||||
|
border: 0; /* 1 */
|
||||||
|
padding: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 1. Corrects font family not being inherited in all browsers.
|
||||||
|
* 2. Corrects font size not being inherited in all browsers.
|
||||||
|
* 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font-family: inherit; /* 1 */
|
||||||
|
font-size: 100%; /* 2 */
|
||||||
|
margin: 0; /* 3 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||||
|
* the UA stylesheet.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input {
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||||
|
* and `video` controls.
|
||||||
|
* 2. Corrects inability to style clickable `input` types in iOS.
|
||||||
|
* 3. Improves usability and consistency of cursor style between image-type
|
||||||
|
* `input` and others.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
html input[type="button"], /* 1 */
|
||||||
|
input[type="reset"],
|
||||||
|
input[type="submit"] {
|
||||||
|
-webkit-appearance: button; /* 2 */
|
||||||
|
cursor: pointer; /* 3 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Re-set default cursor for disabled elements.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button[disabled],
|
||||||
|
input[disabled] {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 1. Addresses box sizing set to `content-box` in IE 8/9.
|
||||||
|
* 2. Removes excess padding in IE 8/9.
|
||||||
|
*/
|
||||||
|
|
||||||
|
input[type="checkbox"],
|
||||||
|
input[type="radio"] {
|
||||||
|
box-sizing: border-box; /* 1 */
|
||||||
|
padding: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||||
|
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||||
|
* (include `-moz` to future-proof).
|
||||||
|
*/
|
||||||
|
|
||||||
|
input[type="search"] {
|
||||||
|
-webkit-appearance: textfield; /* 1 */
|
||||||
|
-moz-box-sizing: content-box;
|
||||||
|
-webkit-box-sizing: content-box; /* 2 */
|
||||||
|
box-sizing: content-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Removes inner padding and search cancel button in Safari 5 and Chrome
|
||||||
|
* on OS X.
|
||||||
|
*/
|
||||||
|
|
||||||
|
input[type="search"]::-webkit-search-cancel-button,
|
||||||
|
input[type="search"]::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Removes inner padding and border in Firefox 4+.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button::-moz-focus-inner,
|
||||||
|
input::-moz-focus-inner {
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 1. Removes default vertical scrollbar in IE 8/9.
|
||||||
|
* 2. Improves readability and alignment in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
overflow: auto; /* 1 */
|
||||||
|
vertical-align: top; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Tables
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Remove most spacing between table cells.
|
||||||
|
*/
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
22
examples/N1-Personal-Level-Indicators/lib/main.cjsx
Normal file
22
examples/N1-Personal-Level-Indicators/lib/main.cjsx
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
# The `ComponentRegistry` allows you to add and remove React components.
|
||||||
|
{ComponentRegistry} = require 'nylas-exports'
|
||||||
|
|
||||||
|
PersonalLevelIcon = require './personal-level-icon'
|
||||||
|
|
||||||
|
# The `main.coffee` file (sometimes `main.cjsx`) is the file that initializes
|
||||||
|
# the entire package. It should export an object with some package life cycle
|
||||||
|
# methods.
|
||||||
|
module.exports =
|
||||||
|
# This gets called on the package's initiation. This is the time to register
|
||||||
|
# your React components to the `ComponentRegistry`.
|
||||||
|
activate: (@state) ->
|
||||||
|
# The `role` tells the `ComponentRegistry` where to put the React component.
|
||||||
|
ComponentRegistry.register PersonalLevelIcon,
|
||||||
|
role: 'ThreadListIcon'
|
||||||
|
|
||||||
|
# This **optional** method is called when the window is shutting down,
|
||||||
|
# or when your package is being updated or disabled. If your package is
|
||||||
|
# watching any files, holding external resources, providing commands or
|
||||||
|
# subscribing to events, release them here.
|
||||||
|
deactivate: ->
|
||||||
|
ComponentRegistry.unregister(PersonalLevelIcon)
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
# # Personal Level Icon
|
||||||
|
#
|
||||||
|
# Show an icon for each thread to indicate whether you're the only recipient,
|
||||||
|
# one of many recipients, or a member of a mailing list.
|
||||||
|
|
||||||
|
# Access core components by requiring `nylas-exports`.
|
||||||
|
{Utils, DraftStore, React} = require 'nylas-exports'
|
||||||
|
# Access N1 React components by requiring `nylas-component-kit`.
|
||||||
|
{RetinaImg} = require 'nylas-component-kit'
|
||||||
|
|
||||||
|
class PersonalLevelIcon extends React.Component
|
||||||
|
|
||||||
|
# Note: You should assign a new displayName to avoid naming
|
||||||
|
# conflicts when injecting your item
|
||||||
|
@displayName: 'PersonalLevelIcon'
|
||||||
|
|
||||||
|
|
||||||
|
# In the constructor, we're setting the component's initial state.
|
||||||
|
constructor: (@props) ->
|
||||||
|
@state =
|
||||||
|
level: @_calculateLevel(@props.thread)
|
||||||
|
|
||||||
|
# React components' `render` methods return a virtual DOM element to render.
|
||||||
|
# The returned DOM fragment is a result of the component's `state` and
|
||||||
|
# `props`. In that sense, `render` methods are deterministic.
|
||||||
|
render: =>
|
||||||
|
<div className="personal-level-icon">
|
||||||
|
{@_renderIcon()}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
# Some application logic which is specific to this package to decide which
|
||||||
|
# character to render.
|
||||||
|
_renderIcon: =>
|
||||||
|
switch @state.level
|
||||||
|
when 0 then ""
|
||||||
|
when 1 then "\u3009"
|
||||||
|
when 2 then "\u300b"
|
||||||
|
when 3 then "\u21ba"
|
||||||
|
|
||||||
|
# Some more application logic which is specific to this package to decide
|
||||||
|
# what level of personalness is related to the `thread`.
|
||||||
|
_calculateLevel: (thread) =>
|
||||||
|
hasMe = (thread.participants.filter (p) -> p.isMe()).length > 0
|
||||||
|
numOthers = thread.participants.length - hasMe
|
||||||
|
if not hasMe
|
||||||
|
return 0
|
||||||
|
if numOthers > 1
|
||||||
|
return 1
|
||||||
|
if numOthers is 1
|
||||||
|
return 2
|
||||||
|
else
|
||||||
|
return 3
|
||||||
|
|
||||||
|
module.exports = PersonalLevelIcon
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
# # Personal Level Icon
|
||||||
|
#
|
||||||
|
# Show an icon for each thread to indicate whether you're the only recipient,
|
||||||
|
# one of many recipients, or a member of a mailing list.
|
||||||
|
|
||||||
|
# Access core components by requiring `nylas-exports`.
|
||||||
|
{Utils, DraftStore, React} = require 'nylas-exports'
|
||||||
|
# Access N1 React components by requiring `nylas-component-kit`.
|
||||||
|
{RetinaImg} = require 'nylas-component-kit'
|
||||||
|
|
||||||
|
class PersonalLevelIcon extends React.Component
|
||||||
|
|
||||||
|
# Note: You should assign a new displayName to avoid naming
|
||||||
|
# conflicts when injecting your item
|
||||||
|
@displayName: 'PersonalLevelIcon'
|
||||||
|
|
||||||
|
|
||||||
|
# In the constructor, we're setting the component's initial state.
|
||||||
|
constructor: (@props) ->
|
||||||
|
@state =
|
||||||
|
level: @_calculateLevel(@props.thread)
|
||||||
|
|
||||||
|
# React components' `render` methods return a virtual DOM element to render.
|
||||||
|
# The returned DOM fragment is a result of the component's `state` and
|
||||||
|
# `props`. In that sense, `render` methods are deterministic.
|
||||||
|
render: =>
|
||||||
|
React.createElement("div", {"className": "personal-level-icon"},
|
||||||
|
(@_renderIcon())
|
||||||
|
)
|
||||||
|
|
||||||
|
# Some application logic which is specific to this package to decide which
|
||||||
|
# character to render.
|
||||||
|
_renderIcon: =>
|
||||||
|
switch @state.level
|
||||||
|
when 0 then ""
|
||||||
|
when 1 then "\u3009"
|
||||||
|
when 2 then "\u300b"
|
||||||
|
when 3 then "\u21ba"
|
||||||
|
|
||||||
|
# Some more application logic which is specific to this package to decide
|
||||||
|
# what level of personalness is related to the `thread`.
|
||||||
|
_calculateLevel: (thread) =>
|
||||||
|
hasMe = (thread.participants.filter (p) -> p.isMe()).length > 0
|
||||||
|
numOthers = thread.participants.length - hasMe
|
||||||
|
if not hasMe
|
||||||
|
return 0
|
||||||
|
if numOthers > 1
|
||||||
|
return 1
|
||||||
|
if numOthers is 1
|
||||||
|
return 2
|
||||||
|
else
|
||||||
|
return 3
|
||||||
|
|
||||||
|
module.exports = PersonalLevelIcon
|
||||||
15
examples/N1-Personal-Level-Indicators/package.json
Normal file
15
examples/N1-Personal-Level-Indicators/package.json
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
{
|
||||||
|
"name": "PersonalLevelIndicators",
|
||||||
|
"main": "./lib/main",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": ""
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"atom": ">=0.3.5"
|
||||||
|
},
|
||||||
|
"description": "Enter a description of your package!",
|
||||||
|
"dependencies": [],
|
||||||
|
"license": "MIT"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
@import "ui-variables";
|
||||||
|
@import "ui-mixins";
|
||||||
|
|
||||||
|
div.personal-level-icon {
|
||||||
|
width: 15px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue