initial pass at a react.js chat
This commit is contained in:
Gene S
+57
@@ -0,0 +1,57 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
version="1.1"
|
||||
id="Layer_1"
|
||||
x="0px"
|
||||
y="0px"
|
||||
width="212px"
|
||||
height="212px"
|
||||
viewBox="0 0 212 212"
|
||||
enable-background="new 0 0 212 212"
|
||||
xml:space="preserve"
|
||||
inkscape:version="0.91 r13725"
|
||||
sodipodi:docname="avatar.svg"><metadata
|
||||
id="metadata4232"><rdf:RDF><cc:Work
|
||||
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
|
||||
id="defs4230" /><sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1855"
|
||||
inkscape:window-height="1176"
|
||||
id="namedview4228"
|
||||
showgrid="false"
|
||||
inkscape:zoom="4.9009434"
|
||||
inkscape:cx="106"
|
||||
inkscape:cy="106"
|
||||
inkscape:window-x="65"
|
||||
inkscape:window-y="24"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="g4222" /><path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
fill="#DFE5E7"
|
||||
d="M105.946,0.25C164.318,0.25,211.64,47.596,211.64,106 c0,58.404-47.322,105.75-105.695,105.75C47.571,211.75,0.25,164.404,0.25,106C0.25,47.596,47.571,0.25,105.946,0.25z"
|
||||
id="path4220"
|
||||
style="fill:#cccccc" /><g
|
||||
id="g4222"><path
|
||||
fill="#FFFFFF"
|
||||
d="M173.561,171.615c-0.601-0.915-1.287-1.907-2.065-2.955c-0.777-1.049-1.645-2.155-2.608-3.299 c-0.964-1.144-2.024-2.326-3.184-3.527c-1.741-1.802-3.71-3.646-5.924-5.47c-2.952-2.431-6.339-4.824-10.204-7.026 c-1.877-1.07-3.873-2.092-5.98-3.055c-0.062-0.028-0.118-0.059-0.18-0.087c-9.792-4.44-22.106-7.529-37.416-7.529 c-15.31,0-27.624,3.089-37.416,7.529c-0.338,0.153-0.653,0.318-0.985,0.474c-1.431,0.674-2.806,1.376-4.128,2.101 c-0.716,0.393-1.417,0.792-2.101,1.197c-3.421,2.027-6.475,4.191-9.15,6.395c-2.213,1.823-4.182,3.668-5.924,5.47 c-1.161,1.201-2.22,2.384-3.184,3.527c-0.964,1.144-1.832,2.25-2.609,3.299c-0.778,1.049-1.464,2.04-2.065,2.955 c-0.557,0.848-1.033,1.622-1.447,2.324c-0.033,0.056-0.073,0.119-0.104,0.174c-0.435,0.744-0.79,1.392-1.07,1.926 c-0.559,1.068-0.818,1.678-0.818,1.678v0.398c18.285,17.927,43.322,28.985,70.945,28.985c27.678,0,52.761-11.103,71.055-29.095 v-0.289c0,0-0.619-1.45-1.992-3.778C174.594,173.238,174.117,172.463,173.561,171.615z"
|
||||
id="path4224" /><path
|
||||
d="m 106.002,127.5 c 2.645,0 5.212,-0.253 7.68,-0.737 1.234,-0.242 2.443,-0.542 3.624,-0.896 1.772,-0.532 3.482,-1.188 5.12,-1.958 2.184,-1.027 4.242,-2.258 6.15,-3.67 2.863,-2.119 5.39,-4.646 7.509,-7.509 0.706,-0.954 1.367,-1.945 1.98,-2.971 0.919,-1.539 1.729,-3.155 2.422,-4.84 0.462,-1.123 0.872,-2.277 1.226,-3.458 0.177,-0.591 0.341,-1.188 0.49,-1.792 0.299,-1.208 0.542,-2.443 0.725,-3.701 0.275,-1.887 0.417,-3.827 0.417,-5.811 0,-1.984 -0.142,-3.925 -0.417,-5.811 -0.184,-1.258 -0.426,-2.493 -0.725,-3.701 -0.15,-0.604 -0.313,-1.202 -0.49,-1.793 -0.354,-1.181 -0.764,-2.335 -1.226,-3.458 -0.693,-1.685 -1.504,-3.301 -2.422,-4.84 -0.613,-1.026 -1.274,-2.017 -1.98,-2.971 -2.119,-2.863 -4.646,-5.39 -7.509,-7.509 -1.909,-1.412 -3.966,-2.643 -6.15,-3.67 -1.638,-0.77 -3.348,-1.426 -5.12,-1.958 -1.181,-0.355 -2.39,-0.655 -3.624,-0.896 -2.468,-0.484 -5.035,-0.737 -7.68,-0.737 -21.162,0 -37.345,16.183 -37.345,37.345 0,21.159 16.183,37.342 37.345,37.342 z"
|
||||
id="path4226"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#ffffff" /></g></svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
+118
@@ -0,0 +1,118 @@
|
||||
.avatar {
|
||||
width: 32pt;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
.navbar .avatar {
|
||||
margin-left: 4pt;
|
||||
margin-right: 4pt;
|
||||
margin-top: 8pt;
|
||||
}
|
||||
|
||||
.label-as-badge {
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
.contactList {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.contactList li {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.contactList li:hover {
|
||||
background-color: #EEE;
|
||||
}
|
||||
|
||||
.chatBox {
|
||||
list-style: none;
|
||||
padding: 1.5em 0 1.5em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chatBox > li {
|
||||
margin-bottom: 1em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chatBox > li:before,
|
||||
.chatBox > li:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.chatBox > li:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.chatBox > li > .chatBox-panel {
|
||||
max-width: 90%;
|
||||
float: right;
|
||||
background-color: #EFE;
|
||||
border: 1px solid #CCC;
|
||||
border-radius: 2px;
|
||||
padding: 1em;
|
||||
position: relative;
|
||||
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.chatBox > li > .chatBox-panel:before {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
right: -12px;
|
||||
display: inline-block;
|
||||
border-top: 12px solid transparent;
|
||||
border-left: 12px solid #CCC;
|
||||
border-right: 0px solid #CCC;
|
||||
border-bottom: 12px solid transparent;
|
||||
content: " ";
|
||||
}
|
||||
|
||||
.chatBox > li > .chatBox-panel:after {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: -11px;
|
||||
display: inline-block;
|
||||
border-top: 11px solid transparent;
|
||||
border-left: 11px solid #EFE;
|
||||
border-right: 0 solid #EEF;
|
||||
border-bottom: 11px solid transparent;
|
||||
content: " ";
|
||||
}
|
||||
|
||||
.chatBox > li.chatBox-inverted > .chatBox-panel {
|
||||
background-color: #EEF;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.chatBox > li.chatBox-inverted > .chatBox-panel:before {
|
||||
border-left-width: 0;
|
||||
border-right-width: 12px;
|
||||
left: -12px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.chatBox > li.chatBox-inverted > .chatBox-panel:after {
|
||||
border-left-width: 0;
|
||||
border-right-width: 11px;
|
||||
left: -11px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.chatBox .timestamp {
|
||||
padding-left: 3em;
|
||||
}
|
||||
|
||||
.chatBox-body > p,
|
||||
.chatBox-body > ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.chatBox-body > p + p {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
Vendored
+7519
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,82 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
version="1.1"
|
||||
id="Layer_1"
|
||||
x="0px"
|
||||
y="0px"
|
||||
width="212px"
|
||||
height="212px"
|
||||
viewBox="0 0 212 212"
|
||||
enable-background="new 0 0 212 212"
|
||||
xml:space="preserve"
|
||||
inkscape:version="0.91 r13725"
|
||||
sodipodi:docname="group.svg"><metadata
|
||||
id="metadata4232"><rdf:RDF><cc:Work
|
||||
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
|
||||
id="defs4230" /><sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1855"
|
||||
inkscape:window-height="1176"
|
||||
id="namedview4228"
|
||||
showgrid="false"
|
||||
inkscape:zoom="1.1381696"
|
||||
inkscape:cx="107.157"
|
||||
inkscape:cy="113.05746"
|
||||
inkscape:window-x="65"
|
||||
inkscape:window-y="24"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="g4222" /><path
|
||||
style="fill:#ffffff;fill-opacity:1"
|
||||
d="M 204.70898 143.4043 C 203.2495 142.20496 201.6903 141.01352 200.01367 139.85156 C 198.3148 138.67419 196.50086 137.52483 194.56836 136.42383 C 192.69136 135.35383 190.69489 134.33214 188.58789 133.36914 C 188.52589 133.34114 188.4702 133.30925 188.4082 133.28125 C 185.9602 132.17125 183.35464 131.14639 180.58398 130.23242 C 177.81333 129.31845 174.87766 128.51714 171.76953 127.85352 C 168.66141 127.18989 165.38033 126.66366 161.91992 126.30469 C 158.45952 125.94572 154.81969 125.75391 150.99219 125.75391 C 147.16469 125.75391 143.52486 125.94572 140.06445 126.30469 C 136.60405 126.66366 133.32297 127.18989 130.21484 127.85352 C 127.10672 128.51714 124.17105 129.31845 121.40039 130.23242 C 118.62973 131.14639 116.02417 132.17125 113.57617 133.28125 C 113.23817 133.43425 112.9238 133.59986 112.5918 133.75586 C 111.1608 134.42986 109.78489 135.13242 108.46289 135.85742 C 107.74689 136.25042 107.04728 136.64969 106.36328 137.05469 C 102.94228 139.08169 99.887891 141.24522 97.212891 143.44922 C 94.999891 145.27222 93.031062 147.11792 91.289062 148.91992 C 90.128062 150.12092 89.067516 151.30231 88.103516 152.44531 C 87.139516 153.58931 86.273094 154.69709 85.496094 155.74609 C 84.718094 156.79509 84.030687 157.78617 83.429688 158.70117 C 82.872687 159.54917 82.396422 160.32144 81.982422 161.02344 C 81.949422 161.07944 81.909906 161.14227 81.878906 161.19727 C 81.443906 161.94127 81.088594 162.591 80.808594 163.125 C 80.249594 164.193 79.992187 164.80273 79.992188 164.80273 L 79.992188 165.20117 C 82.277812 167.44205 84.667762 169.57376 87.15625 171.5918 C 89.644738 173.60983 92.231172 175.51413 94.90625 177.29297 C 97.581328 179.0718 100.34601 180.72673 103.19141 182.25 C 106.0368 183.77327 108.96345 185.16467 111.96289 186.41602 C 114.96233 187.66736 118.03467 188.77718 121.17188 189.74023 C 124.30908 190.70329 127.51083 191.51934 130.76953 192.17773 C 134.02823 192.83613 137.34311 193.3384 140.70703 193.67578 C 144.07096 194.01316 147.48267 194.18555 150.93555 194.18555 C 154.3953 194.18555 157.81508 194.01257 161.18555 193.67383 C 162.82843 193.50871 164.42028 193.18409 166.03906 192.94141 C 183.50104 180.83535 197.06574 163.58943 204.70898 143.4043 z "
|
||||
id="path4858" /><path
|
||||
style="fill:#cccccc"
|
||||
d="M 106.02344 183.5957 C 104.36142 184.40083 102.73062 185.26111 101.01953 185.97656 C 98.015219 187.23275 94.937668 188.34762 91.794922 189.31445 C 88.652176 190.28129 85.444484 191.1007 82.179688 191.76172 C 78.914891 192.42273 75.593121 192.92689 72.222656 193.26562 C 68.852192 193.60436 65.434359 193.77734 61.974609 193.77734 C 58.521734 193.77734 55.108066 193.60496 51.744141 193.26758 C 49.430082 193.03549 47.173671 192.62153 44.908203 192.23633 C 62.158314 204.48151 83.184446 211.75 105.94531 211.75 C 128.28353 211.75 148.97024 204.7749 166.03906 192.94141 C 164.42028 193.18409 162.82843 193.50871 161.18555 193.67383 C 157.81508 194.01257 154.3953 194.18555 150.93555 194.18555 C 147.48267 194.18555 144.07096 194.01316 140.70703 193.67578 C 137.34311 193.3384 134.02823 192.83613 130.76953 192.17773 C 127.51083 191.51934 124.30907 190.70329 121.17188 189.74023 C 118.03467 188.77718 114.96233 187.66736 111.96289 186.41602 C 109.93196 185.56872 107.985 184.56888 106.02344 183.5957 z "
|
||||
id="path4863" /><path
|
||||
style="fill:#ffffff;fill-opacity:1"
|
||||
d="M 106.83203 136.78711 C 106.40889 136.53454 106.04067 136.26357 105.60547 136.01562 C 103.72847 134.94563 101.732 133.92394 99.625 132.96094 C 99.563 132.93294 99.507313 132.903 99.445312 132.875 C 96.997312 131.765 94.39175 130.73819 91.621094 129.82422 C 88.850437 128.91025 85.914766 128.10894 82.806641 127.44531 C 79.698516 126.78169 76.419391 126.25545 72.958984 125.89648 C 69.498578 125.53752 65.856797 125.3457 62.029297 125.3457 C 58.201797 125.3457 54.561969 125.53752 51.101562 125.89648 C 47.641156 126.25545 44.360078 126.78169 41.251953 127.44531 C 38.143828 128.10894 35.208156 128.91025 32.4375 129.82422 C 29.666844 130.73819 27.061281 131.765 24.613281 132.875 C 24.275281 133.028 23.960906 133.19166 23.628906 133.34766 C 22.197906 134.02166 20.822 134.72422 19.5 135.44922 C 18.784 135.84222 18.084391 136.24148 17.400391 136.64648 C 13.979391 138.67348 10.925 140.83702 8.25 143.04102 C 7.9142976 143.31756 7.6760946 143.59377 7.3515625 143.87109 C 14.884339 163.48433 28.040974 180.26294 44.908203 192.23633 C 47.173671 192.62153 49.430082 193.03549 51.744141 193.26758 C 55.108066 193.60496 58.521734 193.77734 61.974609 193.77734 C 65.434359 193.77734 68.852192 193.60436 72.222656 193.26562 C 75.593121 192.92689 78.914891 192.42273 82.179688 191.76172 C 85.444484 191.1007 88.652176 190.28129 91.794922 189.31445 C 94.937668 188.34762 98.015219 187.23275 101.01953 185.97656 C 102.73062 185.26111 104.36142 184.40083 106.02344 183.5957 C 105.08801 183.13162 104.11017 182.74186 103.19141 182.25 C 100.34601 180.72673 97.581328 179.0718 94.90625 177.29297 C 92.231172 175.51413 89.644738 173.60983 87.15625 171.5918 C 84.667762 169.57376 82.277812 167.44205 79.992188 165.20117 L 79.992188 164.80273 C 79.992187 164.80273 80.249594 164.193 80.808594 163.125 C 81.088594 162.591 81.443906 161.94127 81.878906 161.19727 C 81.909906 161.14227 81.949422 161.07944 81.982422 161.02344 C 82.396422 160.32144 82.872687 159.54917 83.429688 158.70117 C 84.030687 157.78617 84.718094 156.79509 85.496094 155.74609 C 86.273094 154.69709 87.139516 153.58931 88.103516 152.44531 C 89.067516 151.30231 90.128062 150.12092 91.289062 148.91992 C 93.031063 147.11792 94.999891 145.27222 97.212891 143.44922 C 99.887891 141.24522 102.94228 139.08169 106.36328 137.05469 C 106.51603 136.96425 106.67772 136.87697 106.83203 136.78711 z "
|
||||
id="path4861" /><path
|
||||
style="fill:#cccccc"
|
||||
d="M 105.94531 0.25 C 47.570315 0.25 0.25 47.596 0.25 106 C 0.25 119.36433 2.8305219 132.09957 7.3515625 143.87109 C 7.6760946 143.59377 7.9142976 143.31756 8.25 143.04102 C 10.925 140.83702 13.979391 138.67348 17.400391 136.64648 C 18.084391 136.24148 18.784 135.84222 19.5 135.44922 C 20.822 134.72422 22.197906 134.02166 23.628906 133.34766 C 23.960906 133.19166 24.275281 133.028 24.613281 132.875 C 27.061281 131.765 29.666844 130.73819 32.4375 129.82422 C 35.208156 128.91025 38.143828 128.10894 41.251953 127.44531 C 44.360078 126.78169 47.641156 126.25545 51.101562 125.89648 C 54.561969 125.53752 58.201797 125.3457 62.029297 125.3457 C 65.856797 125.3457 69.498578 125.53752 72.958984 125.89648 C 76.419391 126.25545 79.698516 126.78169 82.806641 127.44531 C 85.914766 128.10894 88.850437 128.91025 91.621094 129.82422 C 94.39175 130.73819 96.997312 131.765 99.445312 132.875 C 99.507313 132.903 99.563 132.93294 99.625 132.96094 C 101.732 133.92394 103.72847 134.94563 105.60547 136.01562 C 106.04067 136.26357 106.40889 136.53454 106.83203 136.78711 C 107.36873 136.47456 107.90678 136.16266 108.46289 135.85742 C 109.78489 135.13242 111.1608 134.42986 112.5918 133.75586 C 112.9238 133.59986 113.23817 133.43425 113.57617 133.28125 C 116.02417 132.17125 118.62973 131.14639 121.40039 130.23242 C 124.17105 129.31845 127.10672 128.51714 130.21484 127.85352 C 133.32297 127.18989 136.60405 126.66366 140.06445 126.30469 C 143.52486 125.94572 147.16469 125.75391 150.99219 125.75391 C 154.81969 125.75391 158.45952 125.94572 161.91992 126.30469 C 165.38033 126.66366 168.66141 127.18989 171.76953 127.85352 C 174.87766 128.51714 177.81333 129.31845 180.58398 130.23242 C 183.35464 131.14639 185.9602 132.17125 188.4082 133.28125 C 188.4702 133.30925 188.52589 133.34114 188.58789 133.36914 C 190.69489 134.33214 192.69136 135.35383 194.56836 136.42383 C 196.50086 137.52483 198.3148 138.67419 200.01367 139.85156 C 201.6903 141.01352 203.2495 142.20496 204.70898 143.4043 C 209.1178 131.761 211.64062 119.18904 211.64062 106 C 211.64062 47.596 164.31731 0.25 105.94531 0.25 z "
|
||||
id="path4220" /><g
|
||||
id="g4222"><path
|
||||
inkscape:connector-curvature="0"
|
||||
d="m 173.31804,169.33368 c -0.601,-0.915 -1.287,-1.907 -2.065,-2.955 -0.777,-1.049 -1.645,-2.155 -2.608,-3.299 -0.964,-1.144 -2.024,-2.326 -3.184,-3.527 -1.741,-1.802 -3.71,-3.646 -5.924,-5.47 -2.952,-2.431 -6.339,-4.824 -10.204,-7.026 -1.877,-1.07 -3.873,-2.092 -5.98,-3.055 -0.062,-0.028 -0.118,-0.059 -0.18,-0.087 -9.792,-4.44 -22.106,-7.529 -37.416,-7.529 -15.31,0 -27.624005,3.089 -37.416005,7.529 -0.338,0.153 -0.653,0.318 -0.985,0.474 -1.431,0.674 -2.806,1.376 -4.128,2.101 -0.716,0.393 -1.417,0.792 -2.101,1.197 -3.421,2.027 -6.475,4.191 -9.15,6.395 -2.213,1.823 -4.182,3.668 -5.924,5.47 -1.161,1.201 -2.22,2.384 -3.184,3.527 -0.964,1.144 -1.832,2.25 -2.609,3.299 -0.778,1.049 -1.464,2.04 -2.065,2.955 -0.557,0.848 -1.033,1.622 -1.447,2.324 -0.033,0.056 -0.073,0.119 -0.104,0.174 -0.435,0.744 -0.79,1.392 -1.07,1.926 -0.559,1.068 -0.818,1.678 -0.818,1.678 l 0,0.398 c 18.285,17.927 43.322,28.985 70.945005,28.985 27.678,0 52.761,-11.103 71.055,-29.095 l 0,-0.289 c 0,0 -0.619,-1.45 -1.992,-3.778 -0.413,-0.699 -0.89,-1.474 -1.446,-2.322 z"
|
||||
id="path4224-7"
|
||||
style="fill:#ffffff;stroke:#cccccc;stroke-width:12;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /><path
|
||||
d="m 173.31821,169.22198 c -0.601,-0.915 -1.287,-1.907 -2.065,-2.955 -0.777,-1.049 -1.645,-2.155 -2.608,-3.299 -0.964,-1.144 -2.024,-2.326 -3.184,-3.527 -1.741,-1.802 -3.71,-3.646 -5.924,-5.47 -2.952,-2.431 -6.339,-4.824 -10.204,-7.026 -1.877,-1.07 -3.873,-2.092 -5.98,-3.055 -0.062,-0.028 -0.118,-0.059 -0.18,-0.087 -9.792,-4.44 -22.106,-7.529 -37.416,-7.529 -15.309998,0 -27.623998,3.089 -37.415998,7.529 -0.338,0.153 -0.653,0.318 -0.985,0.474 -1.431,0.674 -2.806,1.376 -4.128,2.101 -0.716,0.393 -1.417,0.792 -2.101,1.197 -3.421,2.027 -6.475,4.191 -9.150005,6.395 -2.213,1.823 -4.182,3.668 -5.924,5.47 -1.161,1.201 -2.22,2.384 -3.184,3.527 -0.964,1.144 -1.832,2.25 -2.609,3.299 -0.778,1.049 -1.464,2.04 -2.065,2.955 -0.557,0.848 -1.033,1.622 -1.447,2.324 -0.033,0.056 -0.073,0.119 -0.104,0.174 -0.435,0.744 -0.79,1.392 -1.07,1.926 -0.559,1.068 -0.818,1.678 -0.818,1.678 l 0,0.398 c 18.285,17.927 43.322005,28.985 70.945003,28.985 27.678,0 52.761,-11.103 71.055,-29.095 l 0,-0.289 c 0,0 -0.619,-1.45 -1.992,-3.778 -0.413,-0.699 -0.89,-1.474 -1.446,-2.322 z"
|
||||
id="path4224"
|
||||
style="fill:#ffffff;stroke:#cccccc;stroke-width:0.2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
inkscape:connector-curvature="0" /><path
|
||||
d="m 153.81621,112.87959 c 2.645,0 5.212,-0.253 7.68,-0.737 1.234,-0.242 2.443,-0.542 3.624,-0.896 1.772,-0.532 3.482,-1.188 5.12,-1.958 2.184,-1.027 4.242,-2.258 6.15,-3.67 2.863,-2.119 5.39,-4.646 7.509,-7.509 0.706,-0.953998 1.367,-1.944998 1.98,-2.970998 0.919,-1.539 1.729,-3.155 2.422,-4.84 0.462,-1.123 0.872,-2.277 1.226,-3.458 0.177,-0.591 0.341,-1.188 0.49,-1.792 0.299,-1.208 0.542,-2.443 0.725,-3.701 0.275,-1.887 0.417,-3.827 0.417,-5.811 0,-1.984 -0.142,-3.925 -0.417,-5.811 -0.184,-1.258 -0.426,-2.493 -0.725,-3.701 -0.15,-0.604 -0.313,-1.202 -0.49,-1.793 -0.354,-1.181 -0.764,-2.335 -1.226,-3.458 -0.693,-1.685 -1.504,-3.301 -2.422,-4.84 -0.613,-1.026 -1.274,-2.017 -1.98,-2.971 -2.119,-2.863 -4.646,-5.39 -7.509,-7.509 -1.909,-1.412 -3.966,-2.643 -6.15,-3.67 -1.638,-0.77 -3.348,-1.426 -5.12,-1.958 -1.181,-0.355 -2.39,-0.655 -3.624,-0.896 -2.468,-0.484 -5.035,-0.737 -7.68,-0.737 -21.162,0 -37.345,16.183 -37.345,37.345 0,21.159 16.183,37.341998 37.345,37.341998 z"
|
||||
id="path4226-9"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#ffffff" /><path
|
||||
d="m 59.81621,112.87959 c 2.645,0 5.212,-0.253 7.68,-0.737 1.234,-0.242 2.443,-0.542 3.624,-0.896 1.772,-0.532 3.482,-1.188 5.12,-1.958 2.184,-1.027 4.242,-2.258 6.15,-3.67 2.863,-2.119 5.39,-4.646 7.509,-7.509 0.706,-0.953998 1.367,-1.944998 1.98,-2.970998 0.919,-1.539 1.729,-3.155 2.422,-4.84 0.462,-1.123 0.872,-2.277 1.226,-3.458 0.177,-0.591 0.341,-1.188 0.49,-1.792 0.299,-1.208 0.542,-2.443 0.725,-3.701 0.275,-1.887 0.417,-3.827 0.417,-5.811 0,-1.984 -0.142,-3.925 -0.417,-5.811 -0.184,-1.258 -0.426,-2.493 -0.725,-3.701 -0.15,-0.604 -0.313,-1.202 -0.49,-1.793 -0.354,-1.181 -0.764,-2.335 -1.226,-3.458 -0.693,-1.685 -1.504,-3.301 -2.422,-4.84 -0.613,-1.026 -1.274,-2.017 -1.98,-2.971 -2.119,-2.863 -4.646,-5.39 -7.509,-7.509 -1.909,-1.412 -3.966,-2.643 -6.15,-3.67 -1.638,-0.77 -3.348,-1.426 -5.12,-1.958 -1.181,-0.355 -2.39,-0.655 -3.624,-0.896 -2.468,-0.484 -5.035,-0.737 -7.68,-0.737 -21.162003,0 -37.345003,16.183 -37.345003,37.345 0,21.159 16.183,37.341998 37.345003,37.341998 z"
|
||||
id="path4226-3"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#ffffff" /><path
|
||||
d="m 107.15803,127.41402 c 2.72079,0 5.36134,-0.26025 7.90006,-0.75813 1.26936,-0.24893 2.51299,-0.55753 3.72783,-0.92169 1.82278,-0.54724 3.58177,-1.22205 5.2667,-2.01412 2.24659,-1.05645 4.36355,-2.32273 6.32623,-3.77521 2.94503,-2.17975 5.54443,-4.77918 7.72415,-7.72426 0.72623,-0.98134 1.40617,-2.00075 2.03673,-3.05617 0.94533,-1.58311 1.77854,-3.24545 2.4914,-4.97874 0.47523,-1.1552 0.89699,-2.34228 1.26113,-3.55713 0.18207,-0.60795 0.35077,-1.222056 0.50404,-1.843376 0.30756,-1.242629 0.55753,-2.513033 0.74578,-3.807096 0.28287,-1.941093 0.42894,-3.936708 0.42894,-5.977583 0,-2.040875 -0.14607,-4.037517 -0.42894,-5.977582 -0.18928,-1.294063 -0.43822,-2.564466 -0.74578,-3.807096 -0.1543,-0.621314 -0.32197,-1.236457 -0.50404,-1.844399 -0.36414,-1.214857 -0.7859,-2.401937 -1.26113,-3.557131 -0.71286,-1.733303 -1.5471,-3.395629 -2.4914,-4.978747 -0.63056,-1.055412 -1.3105,-2.074821 -2.03673,-3.056168 -2.17972,-2.945073 -4.77912,-5.544515 -7.72415,-7.72426 -1.96371,-1.452477 -4.07964,-2.718766 -6.32623,-3.775207 -1.68493,-0.792074 -3.44392,-1.466878 -5.2667,-2.01413 -1.21484,-0.365176 -2.45847,-0.673777 -3.72783,-0.921685 -2.53872,-0.497875 -5.17927,-0.758128 -7.90006,-0.758128 -21.768358,0 -38.415051,16.646916 -38.415051,38.415562 0,21.765556 16.646693,38.412476 38.415051,38.412476 z"
|
||||
id="path4226"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#ffffff;stroke:#cccccc;stroke-width:6.1719594;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /></g><ellipse
|
||||
style="fill:none;fill-opacity:1;stroke:#cccccc;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="path4865"
|
||||
cx="105.90646"
|
||||
cy="105.98372"
|
||||
rx="102.52364"
|
||||
ry="102.63346" /></svg>
|
||||
|
After Width: | Height: | Size: 16 KiB |
+110
@@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>React Tutorial</title>
|
||||
<!-- Not present in the tutorial. Just for basic styling. -->
|
||||
<link rel="stylesheet" href="css/bootstrap.css" />
|
||||
<link rel="stylesheet" href="css/base.css" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="mountPoint"></div>
|
||||
|
||||
<script type="text/babel">
|
||||
var CurrentUser = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<nav id="main-navbar" className="navbar navbar-inverse">
|
||||
<div className="container">
|
||||
<div className="navbar-header">
|
||||
<button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
||||
<span className="icon-bar"></span>
|
||||
<span className="icon-bar"></span>
|
||||
<span className="icon-bar"></span>
|
||||
</button>
|
||||
<a href="#" className="pull-left"><img id="self-avatar" className="avatar" alt="avatar" src="avatar.svg" /></a>
|
||||
<span className="navbar-brand" href="#">Alice Johnson</span>
|
||||
</div>
|
||||
<div className="navbar-collapse collapse">
|
||||
<ul className="nav navbar-nav navbar-right ">
|
||||
<li><a href="#"><span className="glyphicon glyphicon-user"></span></a></li>
|
||||
<li><a href="#"><span className="glyphicon glyphicon-cog"></span></a></li>
|
||||
<li><a href="https://github.com/tinode/chat/"><span className="glyphicon glyphicon-info-sign"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var NewTopic = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<div className="input-group">
|
||||
<label htmlFor="addTopic" className="sr-only">Add user or topic</label>
|
||||
<input id="addTopic" className="form-control" type="text" placeholder="Add topic" />
|
||||
<span className="input-group-btn"><button className="btn btn-default" type="button">
|
||||
<i className="glyphicon glyphicon-plus-sign"></i>
|
||||
</button></span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var Contact = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<li className="media">
|
||||
<a href="#" className="pull-left"><img src="avatar.svg" className="avatar img-circle" alt="" /></a>
|
||||
<div className="media-body">
|
||||
<span className="text-muted pull-right"><span className="offline">●</span> <small className="text-muted">30 min ago</small></span>
|
||||
<strong>Carol Xmas</strong> <span className="label label-success label-as-badge">2</span>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Lorem ipsum dolor <a href="#"># ipsum dolor </a>adipiscing elit.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var ContactList = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<div className="contactList">
|
||||
<ul className="media-list">
|
||||
<Contact />
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var ContactBox = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<div className="contactBox">
|
||||
<CurrentUser />
|
||||
<div className="container-fluid">
|
||||
<NewTopic />
|
||||
<ContactList />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<ContactBox />,
|
||||
document.getElementById('mountPoint')
|
||||
);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+258
@@ -0,0 +1,258 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8">
|
||||
<title>React Tutorial</title>
|
||||
<!-- Not present in the tutorial. Just for basic styling. -->
|
||||
<link rel="stylesheet" href="css/bootstrap.css" />
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
|
||||
<style>
|
||||
.avatar {
|
||||
width: 32pt;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.navbar .avatar {
|
||||
margin-left: 4pt;
|
||||
margin-right: 4pt;
|
||||
margin-top: 8pt;
|
||||
}
|
||||
|
||||
.label-as-badge {
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
.contactList {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.chatBox {
|
||||
list-style: none;
|
||||
padding: 1.5em 0 1.5em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chatBox > li {
|
||||
margin-bottom: 1em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chatBox > li:before,
|
||||
.chatBox > li:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.chatBox > li:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.chatBox > li > .chatBox-panel {
|
||||
max-width: 90%;
|
||||
float: right;
|
||||
background-color: #EFE;
|
||||
border: 1px solid #CCC;
|
||||
border-radius: 2px;
|
||||
padding: 1em;
|
||||
position: relative;
|
||||
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.chatBox > li > .chatBox-panel:before {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
right: -12px;
|
||||
display: inline-block;
|
||||
border-top: 12px solid transparent;
|
||||
border-left: 12px solid #CCC;
|
||||
border-right: 0px solid #CCC;
|
||||
border-bottom: 12px solid transparent;
|
||||
content: " ";
|
||||
}
|
||||
|
||||
.chatBox > li > .chatBox-panel:after {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: -11px;
|
||||
display: inline-block;
|
||||
border-top: 11px solid transparent;
|
||||
border-left: 11px solid #EFE;
|
||||
border-right: 0 solid #EEF;
|
||||
border-bottom: 11px solid transparent;
|
||||
content: " ";
|
||||
}
|
||||
|
||||
.chatBox > li.chatBox-inverted > .chatBox-panel {
|
||||
background-color: #EEF;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.chatBox > li.chatBox-inverted > .chatBox-panel:before {
|
||||
border-left-width: 0;
|
||||
border-right-width: 12px;
|
||||
left: -12px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.chatBox > li.chatBox-inverted > .chatBox-panel:after {
|
||||
border-left-width: 0;
|
||||
border-right-width: 11px;
|
||||
left: -11px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.chatBox .timestamp {
|
||||
padding-left: 3em;
|
||||
}
|
||||
|
||||
.chatBox-body > p,
|
||||
.chatBox-body > ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.chatBox-body > p + p {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav id="main-navbar" class="navbar navbar-inverse">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a href="#" class="pull-left"><img id="self-avatar" class="avatar" alt="avatar" src="avatar.svg"></a>
|
||||
<span class="navbar-brand" href="#">Alice Johnson</span>
|
||||
</div>
|
||||
<div class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav navbar-right ">
|
||||
<li><a href="#"><span class="glyphicon glyphicon-user"></span></a></li>
|
||||
<li><a href="#"><span class="glyphicon glyphicon-cog"></span></a></li>
|
||||
<li><a href="https://github.com/tinode/chat/"><span class="glyphicon glyphicon-info-sign"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<!-- BEGIN add topic -->
|
||||
<div class="input-group">
|
||||
<label for="addTopic" class="sr-only">Add topic</label>
|
||||
<input id="addTopic" class="form-control" type="text" placeholder="Add topic" />
|
||||
<span class = "input-group-btn"><button class = "btn btn-default" type = "button">
|
||||
<i class="glyphicon glyphicon-plus-sign"></i>
|
||||
</button></span>
|
||||
</div>
|
||||
<!-- END add topic -->
|
||||
|
||||
<!-- BEGIN Contact list -->
|
||||
<div class="contactList">
|
||||
<ul class="media-list">
|
||||
<li class="media">
|
||||
<a href="#" class="pull-left"><img src="avatar.svg" class="avatar" alt="" class="img-circle"></a>
|
||||
<div class="media-body">
|
||||
<span class="text-muted pull-right"><span class="offline">●</span> <small class="text-muted">30 min ago</small></span>
|
||||
<strong>Bob Smith</strong>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Lorem ipsum dolor sit amet, <a href="#"># consectetur adipiscing </a>.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="media">
|
||||
<a href="#" class="pull-left"><img src="avatar.svg" class="avatar" alt="" class="img-circle"></a>
|
||||
<div class="media-body">
|
||||
<span class="text-muted pull-right"><span class="offline">●</span> <small class="text-muted">30 min ago</small></span>
|
||||
<strong>Carol Xmas</strong> <span class="label label-success label-as-badge">2</span>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Lorem ipsum dolor <a href="#"># ipsum dolor </a>adipiscing elit.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- END Contact list -->
|
||||
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<hr />
|
||||
|
||||
<!-- BEGIN Login form -->
|
||||
<div class="container-fluid">
|
||||
<form class="form-signin">
|
||||
<label for="inputLogin" class="sr-only">Login</label>
|
||||
<input type="text" id="inputLogin" class="form-control" placeholder="Login" required autofocus>
|
||||
<label for="inputPassword" class="sr-only">Password</label>
|
||||
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
|
||||
<br />
|
||||
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
|
||||
</form>
|
||||
</div>
|
||||
<!-- END login form -->
|
||||
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- BEGIN message list -->
|
||||
<ul class="chatBox">
|
||||
<li>
|
||||
<div class="chatBox-panel">
|
||||
<div class="chatBox-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet tellus interdum, aliquam sem eget, placerat metus.
|
||||
Integer sodales accumsan sem, ut malesuada velit egestas vel. Aenean consequat consectetur justo eget venenatis. Morbi
|
||||
eleifend fringilla urna euismod tristique. Nullam at magna vel mauris rutrum finibus. Duis eu dignissim magna. Donec
|
||||
lobortis suscipit vulputate. Cras luctus elit ex, vitae lobortis magna lobortis bibendum.
|
||||
<span class="pull-right timestamp"><small class="text-muted">12:24</small> ✔</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="chatBox-inverted">
|
||||
<div class="chatBox-panel">
|
||||
<div class="chatBox-body">
|
||||
<p>Duis porttitor est nec diam lobortis, non aliquam risus aliquam. Nulla vitae est aliquam, egestas nunc dapibus, dapibus risus.
|
||||
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam vitae condimentum lectus, quis maximus elit.
|
||||
<br />
|
||||
Nunc ac nisi risus. Integer eget augue vel risus commodo blandit. Nulla faucibus convallis neque sed eleifend. Vestibulum
|
||||
dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac habitasse platea dictumst.
|
||||
<span class="pull-right timestamp"><small class="text-muted">13:03</small> ✔<span style="margin-left:-0.5em;">✔</span></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="chatBox-panel">
|
||||
<div class="chatBox-body">
|
||||
<p>OK!
|
||||
<span class="pull-right timestamp"><small class="text-muted">12:24</small> ✔</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- END message list -->
|
||||
|
||||
<!-- BEGIN send message -->
|
||||
<div class="input-group">
|
||||
<label for="sendMessage" class="sr-only">Add topic</label>
|
||||
<input id="sendMessage" class="form-control" type="text" placeholder="New message" />
|
||||
<span class = "input-group-btn">
|
||||
<button class = "btn btn-default" type = "button">
|
||||
<i class="glyphicon glyphicon-send"></i>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<br />
|
||||
<!-- END send message -->
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<html>
|
||||
Reference in New Issue
Block a user