Working dark mode && more drawer specific changes.

This commit is contained in:
Black Hat 2018-11-17 20:52:17 +08:00
parent 08ce01473a
commit a7f62c13b0
18 changed files with 829 additions and 452 deletions

View File

@ -0,0 +1,219 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<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"
width="1280"
height="960"
viewBox="0 0 338.66666 254.00001"
version="1.1"
id="svg4636"
inkscape:version="0.92.2 2405546, 2018-03-11"
sodipodi:docname="roompanel-dark.svg">
<defs
id="defs4630" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1"
inkscape:cx="574.88953"
inkscape:cy="546.35799"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1920"
inkscape:window-height="1050"
inkscape:window-x="0"
inkscape:window-y="30"
inkscape:window-maximized="1" />
<metadata
id="metadata4633">
<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 />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-42.999983)">
<circle
id="path4638"
cx="274.10834"
cy="259.42917"
r="75.40625"
style="opacity:0.25;fill:#13100e;fill-opacity:1;stroke-width:0.26458335" />
<circle
id="path4638-6"
cx="303.0802"
cy="169.86771"
r="48.286457"
style="opacity:0.25;fill:#13100e;fill-opacity:1;stroke-width:0.16942617" />
<circle
id="path4638-6-7"
cx="165.76144"
cy="82.290604"
r="25.135412"
style="opacity:0.25;fill:#13100e;fill-opacity:1;stroke-width:0.08819444" />
<circle
id="path4638-6-5"
cx="38.100006"
cy="195.3998"
r="76.332291"
style="opacity:0.25;fill:#13100e;fill-opacity:1;stroke-width:0.26783261" />
<circle
id="path4638-6-3"
cx="87.709373"
cy="148.70103"
r="41.01041"
style="opacity:0.25;fill:#13100e;fill-opacity:1;stroke-width:0.14389619" />
<circle
id="path4638-6-56"
cx="220.3979"
cy="100.94374"
r="48.286453"
style="opacity:0.25;fill:#13100e;fill-opacity:1;stroke-width:0.16942617" />
<g
id="g5310"
transform="matrix(0.18980272,0,0,0.18980272,163.39608,213.89968)"
style="opacity:0.5;fill:#13100e;fill-opacity:1;fill-rule:nonzero">
<path
id="path5231"
d="M 34.004,340.809 H 2 c -1.104,0 -2,-0.896 -2,-2 V 2 C 0,0.896 0.896,0 2,0 h 32.004 c 1.104,0 2,0.896 2,2 v 7.71 c 0,1.104 -0.896,2 -2,2 h -21.13 v 317.386 h 21.13 c 1.104,0 2,0.896 2,2.001 v 7.712 c 0,1.104 -0.896,2 -2,2 z"
inkscape:connector-curvature="0"
style="opacity:0.5;fill:#13100e;fill-opacity:1;fill-rule:nonzero" />
<path
id="path5233"
d="m 10.875,9.711 v 321.386 h 23.13 v 7.711 H 1.999 V 2.001 h 32.006 v 7.71 z"
inkscape:connector-curvature="0"
style="opacity:0.5;fill:#13100e;fill-opacity:1;fill-rule:nonzero" />
<path
id="path5235"
d="m 252.402,233.711 h -32.993 c -1.104,0 -2,-0.896 -2,-2 v -68.073 c 0,-3.949 -0.154,-7.722 -0.457,-11.213 -0.289,-3.282 -1.074,-6.153 -2.332,-8.53 -1.204,-2.276 -3.017,-4.119 -5.384,-5.476 -2.393,-1.362 -5.775,-2.056 -10.042,-2.056 -4.238,0 -7.674,0.798 -10.213,2.371 -2.565,1.596 -4.604,3.701 -6.053,6.258 -1.498,2.643 -2.51,5.694 -3.013,9.067 -0.526,3.513 -0.793,7.125 -0.793,10.741 v 66.91 c 0,1.104 -0.896,2 -2,2 h -32.991 c -1.104,0 -2,-0.896 -2,-2 v -67.373 c 0,-3.435 -0.078,-6.964 -0.228,-10.485 -0.148,-3.251 -0.767,-6.278 -1.841,-8.995 -1.018,-2.571 -2.667,-4.584 -5.047,-6.153 -2.372,-1.552 -6.029,-2.341 -10.865,-2.341 -1.372,0 -3.265,0.328 -5.629,0.976 -2.28,0.624 -4.536,1.826 -6.705,3.577 -2.152,1.732 -4.036,4.306 -5.605,7.655 -1.569,3.356 -2.367,7.877 -2.367,13.438 v 69.701 c 0,1.104 -0.895,2 -2,2 H 68.857 c -1.104,0 -2,-0.896 -2,-2 V 111.594 c 0,-1.104 0.896,-1.999 2,-1.999 h 31.13 c 1.104,0 2,0.896 2,1.999 v 11.007 c 3.834,-4.499 8.248,-8.152 13.173,-10.896 6.396,-3.559 13.799,-5.362 22.002,-5.362 7.846,0 15.127,1.548 21.642,4.604 5.794,2.722 10.424,7.26 13.791,13.52 3.449,-4.362 7.833,-8.306 13.071,-11.752 6.422,-4.228 14.102,-6.371 22.824,-6.371 6.499,0 12.625,0.807 18.209,2.399 5.686,1.628 10.635,4.271 14.712,7.857 4.088,3.605 7.318,8.357 9.601,14.123 2.25,5.719 3.391,12.649 3.391,20.604 v 80.384 c -0.001,1.104 -0.896,2 -2.001,2 z"
inkscape:connector-curvature="0"
style="opacity:0.5;fill:#13100e;fill-opacity:1;fill-rule:nonzero" />
<path
id="path5237"
d="m 99.988,111.595 v 16.264 h 0.463 c 4.338,-6.191 9.563,-10.998 15.684,-14.406 6.117,-3.402 13.129,-5.11 21.027,-5.11 7.588,0 14.521,1.475 20.793,4.415 6.274,2.945 11.038,8.131 14.291,15.567 3.56,-5.265 8.4,-9.913 14.521,-13.94 6.117,-4.025 13.358,-6.042 21.724,-6.042 6.351,0 12.234,0.776 17.66,2.325 5.418,1.549 10.065,4.027 13.938,7.434 3.869,3.41 6.889,7.863 9.062,13.357 2.167,5.504 3.253,12.122 3.253,19.869 v 80.385 H 219.41 v -68.074 c 0,-4.025 -0.154,-7.82 -0.465,-11.385 -0.313,-3.56 -1.161,-6.656 -2.555,-9.293 -1.395,-2.631 -3.45,-4.724 -6.157,-6.274 -2.711,-1.543 -6.391,-2.322 -11.037,-2.322 -4.646,0 -8.403,0.896 -11.269,2.671 -2.868,1.784 -5.112,4.109 -6.737,6.971 -1.626,2.869 -2.711,6.12 -3.252,9.762 -0.545,3.638 -0.814,7.318 -0.814,11.035 v 66.91 h -32.991 v -67.375 c 0,-3.562 -0.081,-7.087 -0.23,-10.57 -0.158,-3.487 -0.814,-6.7 -1.978,-9.645 -1.162,-2.94 -3.099,-5.304 -5.809,-7.088 -2.711,-1.775 -6.699,-2.671 -11.965,-2.671 -1.551,0 -3.603,0.349 -6.156,1.048 -2.556,0.697 -5.036,2.016 -7.435,3.949 -2.404,1.938 -4.454,4.726 -6.158,8.363 -1.705,3.642 -2.556,8.402 -2.556,14.287 v 69.701 H 68.856 V 111.595 Z"
inkscape:connector-curvature="0"
style="opacity:0.5;fill:#13100e;fill-opacity:1;fill-rule:nonzero" />
<path
id="path5239"
d="m 304.909,236.733 c -5.883,0 -11.46,-0.729 -16.574,-2.163 -5.192,-1.464 -9.806,-3.774 -13.713,-6.871 -3.944,-3.117 -7.068,-7.111 -9.282,-11.871 -2.205,-4.733 -3.324,-10.412 -3.324,-16.876 0,-7.13 1.293,-13.117 3.846,-17.797 2.542,-4.674 5.877,-8.464 9.912,-11.263 3.97,-2.752 8.556,-4.842 13.63,-6.209 4.901,-1.322 9.937,-2.394 14.961,-3.184 4.986,-0.775 9.949,-1.404 14.754,-1.872 4.679,-0.452 8.88,-1.139 12.489,-2.039 3.412,-0.854 6.118,-2.09 8.042,-3.672 1.666,-1.37 2.416,-3.384 2.292,-6.151 -0.002,-3.289 -0.502,-5.816 -1.492,-7.595 -0.998,-1.798 -2.283,-3.15 -3.927,-4.138 -1.703,-1.02 -3.725,-1.713 -6.012,-2.062 -2.47,-0.37 -5.146,-0.557 -7.947,-0.557 -6.034,0 -10.789,1.271 -14.135,3.783 -3.233,2.424 -5.155,6.64 -5.714,12.527 -0.098,1.026 -0.961,1.812 -1.992,1.812 h -32.992 c -0.552,0 -1.079,-0.229 -1.457,-0.629 -0.376,-0.402 -0.572,-0.941 -0.54,-1.491 0.485,-8.073 2.55,-14.894 6.142,-20.272 3.548,-5.331 8.147,-9.682 13.661,-12.931 5.424,-3.191 11.612,-5.498 18.392,-6.857 6.684,-1.335 13.5,-2.013 20.26,-2.013 6.096,0 12.365,0.437 18.626,1.296 6.377,0.88 12.285,2.622 17.562,5.177 5.376,2.604 9.845,6.29 13.282,10.951 3.498,4.744 5.271,11.048 5.271,18.731 v 62.494 c 0,5.307 0.306,10.462 0.915,15.319 0.576,4.64 1.572,8.116 2.963,10.338 0.385,0.616 0.407,1.395 0.055,2.031 -0.353,0.635 -1.022,1.03 -1.75,1.03 h -33.457 c -0.861,0 -1.624,-0.55 -1.898,-1.367 -0.646,-1.941 -1.176,-3.939 -1.572,-5.936 -0.141,-0.696 -0.267,-1.402 -0.38,-2.12 -4.825,4.184 -10.349,7.24 -16.474,9.105 -7.299,2.218 -14.843,3.342 -22.423,3.342 z m 37.032,-60.072 c -0.809,0.409 -1.676,0.768 -2.596,1.074 -2.161,0.72 -4.511,1.326 -6.988,1.807 -2.442,0.475 -5.033,0.872 -7.699,1.186 -2.631,0.311 -5.251,0.697 -7.784,1.146 -2.329,0.433 -4.705,1.035 -7.051,1.792 -2.194,0.711 -4.114,1.667 -5.699,2.842 -1.531,1.128 -2.785,2.587 -3.731,4.335 -0.917,1.709 -1.385,3.97 -1.385,6.719 0,2.598 0.465,4.778 1.385,6.481 0.928,1.722 2.142,3.035 3.716,4.018 1.644,1.026 3.601,1.757 5.816,2.17 2.344,0.439 4.799,0.663 7.297,0.663 6.105,0 10.836,-0.996 14.063,-2.961 3.244,-1.973 5.666,-4.349 7.199,-7.062 1.568,-2.78 2.542,-5.62 2.892,-8.436 0.376,-3.019 0.565,-5.436 0.565,-7.187 z"
inkscape:connector-curvature="0"
style="opacity:0.5;fill:#13100e;fill-opacity:1;fill-rule:nonzero" />
<path
id="path5241"
d="m 273.544,129.255 c 3.405,-5.113 7.744,-9.215 13.012,-12.316 5.264,-3.097 11.186,-5.303 17.771,-6.621 6.582,-1.315 13.205,-1.976 19.865,-1.976 6.042,0 12.158,0.428 18.354,1.277 6.195,0.855 11.85,2.522 16.962,4.997 5.111,2.477 9.292,5.926 12.546,10.338 3.253,4.414 4.879,10.262 4.879,17.543 v 62.494 c 0,5.428 0.31,10.611 0.931,15.567 0.615,4.959 1.701,8.676 3.251,11.153 H 347.66 c -0.621,-1.86 -1.126,-3.755 -1.511,-5.693 -0.39,-1.933 -0.661,-3.908 -0.813,-5.923 -5.267,5.422 -11.465,9.217 -18.585,11.386 -7.127,2.163 -14.407,3.251 -21.842,3.251 -5.733,0 -11.077,-0.698 -16.033,-2.09 -4.958,-1.395 -9.293,-3.562 -13.01,-6.51 -3.718,-2.938 -6.622,-6.656 -8.713,-11.147 -2.091,-4.491 -3.138,-9.84 -3.138,-16.033 0,-6.813 1.199,-12.43 3.604,-16.84 2.399,-4.417 5.495,-7.939 9.295,-10.575 3.793,-2.632 8.129,-4.607 13.01,-5.923 4.878,-1.315 9.795,-2.358 14.752,-3.137 4.957,-0.772 9.835,-1.393 14.638,-1.857 4.801,-0.466 9.062,-1.164 12.779,-2.093 3.718,-0.929 6.658,-2.282 8.829,-4.065 2.165,-1.781 3.172,-4.375 3.02,-7.785 0,-3.56 -0.58,-6.389 -1.742,-8.479 -1.161,-2.09 -2.711,-3.719 -4.646,-4.88 -1.937,-1.161 -4.183,-1.936 -6.737,-2.325 -2.557,-0.382 -5.309,-0.58 -8.248,-0.58 -6.506,0 -11.617,1.395 -15.335,4.183 -3.716,2.788 -5.889,7.437 -6.506,13.94 h -32.991 c 0.462,-7.742 2.395,-14.173 5.807,-19.281 z m 65.169,46.583 c -2.09,0.696 -4.337,1.275 -6.736,1.741 -2.402,0.465 -4.918,0.853 -7.551,1.161 -2.635,0.313 -5.268,0.698 -7.899,1.163 -2.48,0.461 -4.919,1.086 -7.317,1.857 -2.404,0.779 -4.495,1.822 -6.274,3.138 -1.784,1.317 -3.216,2.985 -4.3,4.994 -1.085,2.014 -1.626,4.571 -1.626,7.668 0,2.94 0.541,5.422 1.626,7.431 1.084,2.017 2.558,3.604 4.416,4.765 1.858,1.161 4.025,1.976 6.507,2.438 2.475,0.466 5.031,0.698 7.665,0.698 6.505,0 11.537,-1.082 15.103,-3.253 3.561,-2.166 6.192,-4.762 7.899,-7.785 1.702,-3.019 2.749,-6.072 3.137,-9.174 0.384,-3.097 0.58,-5.576 0.58,-7.434 V 172.93 c -1.396,1.243 -3.138,2.21 -5.23,2.908 z"
inkscape:connector-curvature="0"
style="opacity:0.5;fill:#13100e;fill-opacity:1;fill-rule:nonzero" />
<path
id="path5243"
d="m 444.542,234.874 c -5.187,0 -10.173,-0.361 -14.823,-1.069 -4.802,-0.732 -9.104,-2.183 -12.779,-4.313 -3.789,-2.185 -6.821,-5.341 -9.006,-9.375 -2.163,-3.986 -3.26,-9.232 -3.26,-15.59 v -68.859 h -17.981 c -1.104,0 -2,-0.896 -2,-1.999 v -22.073 c 0,-1.104 0.896,-1.999 2,-1.999 h 17.981 V 75.582 c 0,-1.104 0.896,-2 2,-2 h 32.992 c 1.104,0 2,0.896 2,2 v 34.014 h 22.162 c 1.104,0 2,0.896 2,1.999 v 22.073 c 0,1.104 -0.896,1.999 -2,1.999 h -22.162 v 57.479 c 0,6.229 1.198,8.731 2.202,9.733 1.004,1.007 3.506,2.205 9.738,2.205 1.804,0 3.542,-0.076 5.161,-0.225 1.604,-0.144 3.174,-0.367 4.669,-0.665 0.13,-0.026 0.261,-0.039 0.391,-0.039 0.458,0 0.907,0.159 1.27,0.454 0.463,0.379 0.73,0.946 0.73,1.546 v 25.555 c 0,0.979 -0.707,1.813 -1.672,1.974 -2.834,0.472 -6.041,0.794 -9.527,0.957 -3.613,0.157 -6.91,0.233 -10.086,0.233 z"
inkscape:connector-curvature="0"
style="opacity:0.5;fill:#13100e;fill-opacity:1;fill-rule:nonzero" />
<path
id="path5245"
d="m 463.825,111.595 v 22.072 h -24.161 v 59.479 c 0,5.573 0.928,9.292 2.788,11.149 1.856,1.859 5.576,2.788 11.152,2.788 1.859,0 3.638,-0.076 5.343,-0.232 1.703,-0.152 3.33,-0.388 4.878,-0.696 v 25.557 c -2.788,0.465 -5.887,0.773 -9.293,0.931 -3.407,0.149 -6.737,0.23 -9.99,0.23 -5.111,0 -9.953,-0.35 -14.521,-1.048 -4.571,-0.695 -8.597,-2.047 -12.081,-4.063 -3.486,-2.011 -6.236,-4.88 -8.248,-8.597 -2.016,-3.714 -3.021,-8.595 -3.021,-14.639 v -70.859 h -19.98 v -22.072 h 19.98 V 75.583 h 32.992 v 36.012 z"
inkscape:connector-curvature="0"
style="opacity:0.5;fill:#13100e;fill-opacity:1;fill-rule:nonzero" />
<path
id="path5247"
d="m 512.613,233.711 h -32.991 c -1.104,0 -2,-0.896 -2,-2 V 111.594 c 0,-1.104 0.896,-1.999 2,-1.999 h 31.366 c 1.104,0 2,0.896 2,1.999 v 15.069 c 0.967,-1.516 2.034,-2.978 3.199,-4.382 2.754,-3.312 5.949,-6.182 9.496,-8.522 3.545,-2.332 7.385,-4.169 11.415,-5.462 4.056,-1.298 8.327,-1.954 12.691,-1.954 2.341,0 4.953,0.418 7.766,1.243 0.852,0.25 1.437,1.032 1.437,1.92 v 30.67 c 0,0.6 -0.269,1.167 -0.732,1.547 -0.361,0.296 -0.808,0.452 -1.265,0.452 -0.133,0 -0.265,-0.013 -0.398,-0.039 -1.484,-0.3 -3.299,-0.565 -5.392,-0.787 -2.098,-0.224 -4.136,-0.339 -6.062,-0.339 -5.706,0 -10.572,0.95 -14.467,2.823 -3.862,1.86 -7.012,4.428 -9.361,7.629 -2.389,3.263 -4.115,7.12 -5.127,11.47 -1.043,4.479 -1.574,9.409 -1.574,14.647 v 54.132 c -10e-4,1.104 -0.897,2 -2.001,2 z"
inkscape:connector-curvature="0"
style="opacity:0.5;fill:#13100e;fill-opacity:1;fill-rule:nonzero" />
<path
id="path5249"
d="M 510.988,111.595 V 133.9 h 0.465 c 1.546,-3.72 3.636,-7.163 6.272,-10.341 2.634,-3.172 5.652,-5.885 9.06,-8.131 3.405,-2.242 7.047,-3.985 10.923,-5.228 3.868,-1.237 7.898,-1.859 12.081,-1.859 2.168,0 4.566,0.39 7.202,1.163 v 30.67 c -1.551,-0.312 -3.41,-0.584 -5.576,-0.814 -2.17,-0.233 -4.26,-0.35 -6.274,-0.35 -6.041,0 -11.152,1.01 -15.332,3.021 -4.182,2.014 -7.55,4.761 -10.107,8.247 -2.555,3.487 -4.379,7.55 -5.462,12.198 -1.083,4.645 -1.625,9.682 -1.625,15.102 v 54.133 H 479.624 V 111.595 Z"
inkscape:connector-curvature="0"
style="opacity:0.5;fill:#13100e;fill-opacity:1;fill-rule:nonzero" />
<path
id="path5251"
d="M 603.923,233.711 H 570.93 c -1.104,0 -2,-0.896 -2,-2 V 111.594 c 0,-1.104 0.896,-1.999 2,-1.999 h 32.994 c 1.104,0 2,0.896 2,1.999 v 120.117 c -10e-4,1.104 -0.897,2 -2.001,2 z m 0,-138.705 H 570.93 c -1.104,0 -2,-0.896 -2,-1.999 V 65.825 c 0,-1.104 0.896,-2 2,-2 h 32.994 c 1.104,0 2,0.896 2,2 v 27.182 c -10e-4,1.103 -0.897,1.999 -2.001,1.999 z"
inkscape:connector-curvature="0"
style="opacity:0.5;fill:#13100e;fill-opacity:1;fill-rule:nonzero" />
<path
id="path5253"
d="M 570.93,93.007 V 65.824 h 32.994 v 27.183 z m 32.994,18.588 V 231.712 H 570.93 V 111.595 Z"
inkscape:connector-curvature="0"
style="opacity:0.5;fill:#13100e;fill-opacity:1;fill-rule:nonzero" />
<path
id="path5255"
d="m 742.163,233.711 h -37.64 c -0.671,0 -1.297,-0.335 -1.667,-0.896 l -23.426,-35.352 -23.426,35.352 c -0.369,0.561 -0.995,0.896 -1.667,0.896 h -36.938 c -0.741,0 -1.424,-0.411 -1.77,-1.067 -0.345,-0.654 -0.3,-1.449 0.118,-2.061 l 42.435,-62.055 -38.71,-55.793 c -0.424,-0.613 -0.474,-1.408 -0.128,-2.069 0.343,-0.658 1.028,-1.071 1.771,-1.071 h 37.636 c 0.665,0 1.287,0.33 1.658,0.882 l 19.477,28.893 19.255,-28.884 c 0.372,-0.556 0.996,-0.891 1.665,-0.891 h 36.475 c 0.746,0 1.43,0.415 1.776,1.078 0.343,0.66 0.289,1.46 -0.139,2.071 l -38.69,55.082 43.578,62.744 c 0.424,0.61 0.474,1.408 0.128,2.066 -0.343,0.662 -1.026,1.075 -1.771,1.075 z"
inkscape:connector-curvature="0"
style="opacity:0.5;fill:#13100e;fill-opacity:1;fill-rule:nonzero" />
<path
id="path5257"
d="m 621.115,111.595 h 37.637 l 21.144,31.365 20.911,-31.365 h 36.476 l -39.496,56.226 44.377,63.892 h -37.64 l -25.093,-37.87 -25.094,37.87 h -36.938 l 43.213,-63.193 z"
inkscape:connector-curvature="0"
style="opacity:0.5;fill:#13100e;fill-opacity:1;fill-rule:nonzero" />
<path
id="path5259"
d="m 791.322,340.809 h -32.008 c -1.105,0 -2,-0.896 -2,-2 v -7.712 c 0,-1.105 0.896,-2.001 2,-2.001 h 21.13 V 11.71 h -21.13 c -1.105,0 -2,-0.896 -2,-2 V 2 c 0,-1.104 0.896,-2 2,-2 h 32.008 c 1.104,0 2,0.896 2,2 v 336.809 c 0,1.104 -0.896,2 -2,2 z"
inkscape:connector-curvature="0"
style="opacity:0.5;fill:#13100e;fill-opacity:1;fill-rule:nonzero" />
<path
id="path5261"
d="M 782.443,331.097 V 9.711 h -23.13 v -7.71 h 32.008 v 336.807 h -32.008 v -7.711 z"
inkscape:connector-curvature="0"
style="opacity:0.5;fill:#13100e;fill-opacity:1;fill-rule:nonzero" />
<path
id="path5263"
d="m 10.875,9.711 v 321.386 h 23.13 v 7.711 H 1.999 V 2.001 h 32.006 v 7.71 z"
inkscape:connector-curvature="0"
style="fill:#13100e;fill-opacity:1;fill-rule:nonzero" />
<path
id="path5265"
d="m 99.988,111.595 v 16.264 h 0.463 c 4.338,-6.191 9.563,-10.998 15.684,-14.406 6.117,-3.402 13.129,-5.11 21.027,-5.11 7.588,0 14.521,1.475 20.793,4.415 6.274,2.945 11.038,8.131 14.291,15.567 3.56,-5.265 8.4,-9.913 14.521,-13.94 6.117,-4.025 13.358,-6.042 21.724,-6.042 6.351,0 12.234,0.776 17.66,2.325 5.418,1.549 10.065,4.027 13.938,7.434 3.869,3.41 6.889,7.863 9.062,13.357 2.167,5.504 3.253,12.122 3.253,19.869 v 80.385 H 219.41 v -68.074 c 0,-4.025 -0.154,-7.82 -0.465,-11.385 -0.313,-3.56 -1.161,-6.656 -2.555,-9.293 -1.395,-2.631 -3.45,-4.724 -6.157,-6.274 -2.711,-1.543 -6.391,-2.322 -11.037,-2.322 -4.646,0 -8.403,0.896 -11.269,2.671 -2.868,1.784 -5.112,4.109 -6.737,6.971 -1.626,2.869 -2.711,6.12 -3.252,9.762 -0.545,3.638 -0.814,7.318 -0.814,11.035 v 66.91 h -32.991 v -67.375 c 0,-3.562 -0.081,-7.087 -0.23,-10.57 -0.158,-3.487 -0.814,-6.7 -1.978,-9.645 -1.162,-2.94 -3.099,-5.304 -5.809,-7.088 -2.711,-1.775 -6.699,-2.671 -11.965,-2.671 -1.551,0 -3.603,0.349 -6.156,1.048 -2.556,0.697 -5.036,2.016 -7.435,3.949 -2.404,1.938 -4.454,4.726 -6.158,8.363 -1.705,3.642 -2.556,8.402 -2.556,14.287 v 69.701 H 68.856 V 111.595 Z"
inkscape:connector-curvature="0"
style="fill:#13100e;fill-opacity:1;fill-rule:nonzero" />
<path
id="path5267"
d="m 273.544,129.255 c 3.405,-5.113 7.744,-9.215 13.012,-12.316 5.264,-3.097 11.186,-5.303 17.771,-6.621 6.582,-1.315 13.205,-1.976 19.865,-1.976 6.042,0 12.158,0.428 18.354,1.277 6.195,0.855 11.85,2.522 16.962,4.997 5.111,2.477 9.292,5.926 12.546,10.338 3.253,4.414 4.879,10.262 4.879,17.543 v 62.494 c 0,5.428 0.31,10.611 0.931,15.567 0.615,4.959 1.701,8.676 3.251,11.153 H 347.66 c -0.621,-1.86 -1.126,-3.755 -1.511,-5.693 -0.39,-1.933 -0.661,-3.908 -0.813,-5.923 -5.267,5.422 -11.465,9.217 -18.585,11.386 -7.127,2.163 -14.407,3.251 -21.842,3.251 -5.733,0 -11.077,-0.698 -16.033,-2.09 -4.958,-1.395 -9.293,-3.562 -13.01,-6.51 -3.718,-2.938 -6.622,-6.656 -8.713,-11.147 -2.091,-4.491 -3.138,-9.84 -3.138,-16.033 0,-6.813 1.199,-12.43 3.604,-16.84 2.399,-4.417 5.495,-7.939 9.295,-10.575 3.793,-2.632 8.129,-4.607 13.01,-5.923 4.878,-1.315 9.795,-2.358 14.752,-3.137 4.957,-0.772 9.835,-1.393 14.638,-1.857 4.801,-0.466 9.062,-1.164 12.779,-2.093 3.718,-0.929 6.658,-2.282 8.829,-4.065 2.165,-1.781 3.172,-4.375 3.02,-7.785 0,-3.56 -0.58,-6.389 -1.742,-8.479 -1.161,-2.09 -2.711,-3.719 -4.646,-4.88 -1.937,-1.161 -4.183,-1.936 -6.737,-2.325 -2.557,-0.382 -5.309,-0.58 -8.248,-0.58 -6.506,0 -11.617,1.395 -15.335,4.183 -3.716,2.788 -5.889,7.437 -6.506,13.94 h -32.991 c 0.462,-7.742 2.395,-14.173 5.807,-19.281 z m 65.169,46.583 c -2.09,0.696 -4.337,1.275 -6.736,1.741 -2.402,0.465 -4.918,0.853 -7.551,1.161 -2.635,0.313 -5.268,0.698 -7.899,1.163 -2.48,0.461 -4.919,1.086 -7.317,1.857 -2.404,0.779 -4.495,1.822 -6.274,3.138 -1.784,1.317 -3.216,2.985 -4.3,4.994 -1.085,2.014 -1.626,4.571 -1.626,7.668 0,2.94 0.541,5.422 1.626,7.431 1.084,2.017 2.558,3.604 4.416,4.765 1.858,1.161 4.025,1.976 6.507,2.438 2.475,0.466 5.031,0.698 7.665,0.698 6.505,0 11.537,-1.082 15.103,-3.253 3.561,-2.166 6.192,-4.762 7.899,-7.785 1.702,-3.019 2.749,-6.072 3.137,-9.174 0.384,-3.097 0.58,-5.576 0.58,-7.434 V 172.93 c -1.396,1.243 -3.138,2.21 -5.23,2.908 z"
inkscape:connector-curvature="0"
style="fill:#13100e;fill-opacity:1;fill-rule:nonzero" />
<path
id="path5269"
d="m 463.825,111.595 v 22.072 h -24.161 v 59.479 c 0,5.573 0.928,9.292 2.788,11.149 1.856,1.859 5.576,2.788 11.152,2.788 1.859,0 3.638,-0.076 5.343,-0.232 1.703,-0.152 3.33,-0.388 4.878,-0.696 v 25.557 c -2.788,0.465 -5.887,0.773 -9.293,0.931 -3.407,0.149 -6.737,0.23 -9.99,0.23 -5.111,0 -9.953,-0.35 -14.521,-1.048 -4.571,-0.695 -8.597,-2.047 -12.081,-4.063 -3.486,-2.011 -6.236,-4.88 -8.248,-8.597 -2.016,-3.714 -3.021,-8.595 -3.021,-14.639 v -70.859 h -19.98 v -22.072 h 19.98 V 75.583 h 32.992 v 36.012 z"
inkscape:connector-curvature="0"
style="fill:#13100e;fill-opacity:1;fill-rule:nonzero" />
<path
id="path5271"
d="M 510.988,111.595 V 133.9 h 0.465 c 1.546,-3.72 3.636,-7.163 6.272,-10.341 2.634,-3.172 5.652,-5.885 9.06,-8.131 3.405,-2.242 7.047,-3.985 10.923,-5.228 3.868,-1.237 7.898,-1.859 12.081,-1.859 2.168,0 4.566,0.39 7.202,1.163 v 30.67 c -1.551,-0.312 -3.41,-0.584 -5.576,-0.814 -2.17,-0.233 -4.26,-0.35 -6.274,-0.35 -6.041,0 -11.152,1.01 -15.332,3.021 -4.182,2.014 -7.55,4.761 -10.107,8.247 -2.555,3.487 -4.379,7.55 -5.462,12.198 -1.083,4.645 -1.625,9.682 -1.625,15.102 v 54.133 H 479.624 V 111.595 Z"
inkscape:connector-curvature="0"
style="fill:#13100e;fill-opacity:1;fill-rule:nonzero" />
<path
id="path5273"
d="M 570.93,93.007 V 65.824 h 32.994 v 27.183 z m 32.994,18.588 V 231.712 H 570.93 V 111.595 Z"
inkscape:connector-curvature="0"
style="fill:#13100e;fill-opacity:1;fill-rule:nonzero" />
<path
id="path5275"
d="m 621.115,111.595 h 37.637 l 21.144,31.365 20.911,-31.365 h 36.476 l -39.496,56.226 44.377,63.892 h -37.64 l -25.093,-37.87 -25.094,37.87 h -36.938 l 43.213,-63.193 z"
inkscape:connector-curvature="0"
style="fill:#13100e;fill-opacity:1;fill-rule:nonzero" />
<path
id="path5277"
d="M 782.443,331.097 V 9.711 h -23.13 v -7.71 h 32.008 v 336.807 h -32.008 v -7.711 z"
inkscape:connector-curvature="0"
style="fill:#13100e;fill-opacity:1;fill-rule:nonzero" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 22 KiB

View File

@ -1,6 +1,7 @@
import QtQuick 2.9 import QtQuick 2.9
import QtQuick.Controls 2.2 import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3 import QtQuick.Layouts 1.3
import QtQuick.Controls.Material 2.2
import Spectral.Setting 0.1 import Spectral.Setting 0.1
import Spectral.Font 0.1 import Spectral.Font 0.1
@ -10,7 +11,7 @@ Text {
id: materialLabel id: materialLabel
color: MSettings.darkTheme ? "white" : "dark" color: Material.foreground
font.pointSize: 16 font.pointSize: 16
font.family: MaterialFont.name font.family: MaterialFont.name
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter

View File

@ -1,25 +0,0 @@
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls.Material 2.2
import "qrc:/js/util.js" as Util
ItemDelegate {
property var page
property bool selected: stackView.currentItem === page
property color highlightColor: Material.accent
Rectangle {
width: selected ? 4 : 0
height: parent.height
color: highlightColor
Behavior on width {
PropertyAnimation { easing.type: Easing.InOutCubic; duration: 200 }
}
}
onClicked: Util.pushToStack(stackView, page)
}

View File

@ -41,6 +41,7 @@ import QtQuick 2.9
import QtQuick.Controls 2.2 import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3 import QtQuick.Layouts 1.3
import QtQuick.Window 2.1 import QtQuick.Window 2.1
import Spectral.Setting 0.1
Item { Item {
id: root id: root
@ -64,7 +65,7 @@ Item {
property Component handleDelegate: Rectangle { property Component handleDelegate: Rectangle {
width: 1 width: 1
height: 1 height: 1
color: "#E1E1E1" color: MSettings.darkTheme ? "#424242" : "#E1E1E1"
} }
/*! /*!

View File

@ -74,24 +74,6 @@ RowLayout {
spacing: 0 spacing: 0
// TimelineLabel {
// Layout.fillWidth: true
// id: authorLabel
// visible: messageRow.avatarVisible
// text: author.displayName
// Material.foreground: Material.accent
// coloredBackground: highlighted
// font.bold: true
// MouseArea {
// anchors.fill: parent
// cursorShape: Qt.PointingHandCursor
// onClicked: roomPanelInput.insert(author.displayName)
// }
// }
TextEdit { TextEdit {
Layout.fillWidth: true Layout.fillWidth: true
@ -134,54 +116,6 @@ RowLayout {
active: eventType === "image" || eventType === "file" || eventType === "audio" active: eventType === "image" || eventType === "file" || eventType === "audio"
} }
// Row {
// Layout.alignment: Qt.AlignRight
// spacing: 4
// TimelineLabel {
// visible: userMarker.length > 5
// text: userMarker.length - 5 + "+"
// coloredBackground: highlighted
// Material.foreground: "grey"
// font.pointSize: 8
// }
// Repeater {
// model: userMarker.length > 5 ? userMarker.slice(0, 5) : userMarker
// ImageItem {
// width: parent.height
// height: parent.height
// hint: modelData.displayName
// source: modelData.paintable
// MouseArea {
// anchors.fill: parent
// cursorShape: Qt.PointingHandCursor
// onClicked: {
// readMarkerDialog.listModel = userMarker
// readMarkerDialog.open()
// }
// }
// }
// }
// TimelineLabel {
// id: timeLabel
// visible: Math.abs(time - aboveTime) > 600000 || index == 0
// text: Qt.formatTime(time, "hh:mm")
// coloredBackground: highlighted
// Material.foreground: "grey"
// font.pointSize: 8
// }
// }
} }
Component { Component {

View File

@ -3,7 +3,6 @@ import QtQuick.Controls 2.2
Label { Label {
text: section + " • " + Qt.formatTime(time, "hh:mm") text: section + " • " + Qt.formatTime(time, "hh:mm")
color: "#1D333E"
font.pointSize: 9.75 font.pointSize: 9.75
font.weight: Font.Medium font.weight: Font.Medium
font.capitalization: Font.AllUppercase font.capitalization: Font.AllUppercase

View File

@ -0,0 +1,29 @@
import QtQuick 2.9
import QtGraphicalEffects 1.0
Item {
id: item
property alias source: mask.source
Rectangle {
id: circleMask
width: parent.width
height: parent.height
smooth: true
visible: false
radius: Math.max(width/2, height/2)
}
OpacityMask {
id: mask
width: parent.width
height: parent.height
maskSource: circleMask
}
}

View File

@ -0,0 +1,239 @@
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtGraphicalEffects 1.0
import Spectral.Component 2.0
import Spectral.Setting 0.1
AutoMouseArea {
id: ripple
property color color: MSettings.darkTheme ? Qt.rgba(255, 255, 255, 0.16) : Qt.rgba(0, 0, 0, 0.08)
property bool circular: false
property bool centered: false
property bool focused
property color focusColor: "transparent"
property int focusWidth: width - 32
property Item control
clip: true
Connections {
target: control
onPressedChanged: {
if (!control.pressed)
__private.removeLastCircle()
}
}
onPressed: {
__private.createTapCircle(mouse.x, mouse.y)
if (control)
mouse.accepted = false
}
onReleased: __private.removeLastCircle()
onCanceled: __private.removeLastCircle()
QtObject {
id: __private
property int startRadius: circular ? width/10 : width/6
property int endRadius
property bool showFocus: true
property Item lastCircle
function createTapCircle(x, y) {
endRadius = centered ? width/2 : radius(x, y) + 5
showFocus = false
lastCircle = tapCircle.createObject(ripple, {
"circleX": centered ? width/2 : x,
"circleY": centered ? height/2 : y
})
}
function removeLastCircle() {
if (lastCircle)
lastCircle.removeCircle()
}
function radius(x, y) {
var dist1 = Math.max(dist(x, y, 0, 0), dist(x, y, width, height))
var dist2 = Math.max(dist(x, y, width, 0), dist(x, y, 0, height))
return Math.max(dist1, dist2)
}
function dist(x1, y1, x2, y2) {
var distX = x2 - x1
var distY = y2 - y1
return Math.sqrt(distX * distX + distY * distY)
}
}
Rectangle {
id: focusBackground
objectName: "focusBackground"
width: parent.width
height: parent.height
color: Qt.rgba(0,0,0,0.2)
opacity: __private.showFocus && focused ? 1 : 0
Behavior on opacity {
NumberAnimation { duration: 500; easing.type: Easing.InOutQuad }
}
}
Rectangle {
id: focusCircle
objectName: "focusRipple"
property bool focusedState
x: (parent.width - width)/2
y: (parent.height - height)/2
width: focused
? focusedState ? focusWidth
: Math.min(parent.width - 8, focusWidth + 12)
: parent.width/5
height: width
radius: width/2
opacity: __private.showFocus && focused ? 1 : 0
color: focusColor.a === 0 ? Qt.rgba(1,1,1,0.4) : focusColor
Behavior on opacity {
NumberAnimation { duration: 500; easing.type: Easing.InOutQuad }
}
Behavior on width {
NumberAnimation { duration: focusTimer.interval; }
}
Timer {
id: focusTimer
running: focused
repeat: true
interval: 800
onTriggered: focusCircle.focusedState = !focusCircle.focusedState
}
}
Component {
id: tapCircle
Item {
id: circleItem
objectName: "tapRipple"
property bool done
property real circleX
property real circleY
property bool closed
width: parent.width
height: parent.height
function removeCircle() {
done = true
if (fillSizeAnimation.running) {
fillOpacityAnimation.stop()
closeAnimation.start()
circleItem.destroy(500);
} else {
__private.showFocus = true
fadeAnimation.start();
circleItem.destroy(300);
}
}
Item {
id: circleParent
width: parent.width
height: parent.height
visible: !circular
Rectangle {
id: circleRectangle
x: circleItem.circleX - radius
y: circleItem.circleY - radius
width: radius * 2
height: radius * 2
opacity: 0
color: ripple.color
NumberAnimation {
id: fillSizeAnimation
running: true
target: circleRectangle; property: "radius"; duration: 500;
from: __private.startRadius; to: __private.endRadius;
easing.type: Easing.InOutQuad
onStopped: {
if (done)
__private.showFocus = true
}
}
NumberAnimation {
id: fillOpacityAnimation
running: true
target: circleRectangle; property: "opacity"; duration: 300;
from: 0; to: 1; easing.type: Easing.InOutQuad
}
NumberAnimation {
id: fadeAnimation
target: circleRectangle; property: "opacity"; duration: 300;
from: 1; to: 0; easing.type: Easing.InOutQuad
}
SequentialAnimation {
id: closeAnimation
NumberAnimation {
target: circleRectangle; property: "opacity"; duration: 250;
to: 1; easing.type: Easing.InOutQuad
}
NumberAnimation {
target: circleRectangle; property: "opacity"; duration: 250;
from: 1; to: 0; easing.type: Easing.InOutQuad
}
}
}
}
CircleMask {
anchors.fill: parent
source: circleParent
visible: circular
}
}
}
}

View File

@ -1,2 +1,3 @@
module Spectral.Effect module Spectral.Effect
ElevationEffect 2.0 ElevationEffect.qml ElevationEffect 2.0 ElevationEffect.qml
RippleEffect 2.0 RippleEffect.qml

View File

@ -1,27 +0,0 @@
import QtQuick 2.9
LoginForm {
loginButton.onClicked: doLogin()
Shortcut {
sequence: "Return"
onActivated: doLogin()
}
function doLogin() {
if (!(serverField.text.startsWith("http") && serverField.text.includes("://"))) {
loginButtonTooltip.text = "Server address should start with http(s)://"
loginButtonTooltip.open()
return
}
loginButton.text = "Logging in..."
loginButton.enabled = false
controller.loginWithCredentials(serverField.text, usernameField.text, passwordField.text)
controller.connectionAdded.connect(function(conn) {
stackView.pop()
accountListView.currentConnection = conn
})
}
}

View File

@ -1,143 +0,0 @@
import QtQuick 2.9
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
import QtQuick.Controls 2.2
import QtQuick.Controls.Material 2.2
import Spectral.Component 2.0
import Spectral.Setting 0.1
Page {
property var controller
property alias loginButton: loginButton
property alias serverField: serverField
property alias usernameField: usernameField
property alias passwordField: passwordField
property alias loginButtonTooltip: loginButtonTooltip
Row {
anchors.fill: parent
Rectangle {
width: parent.width / 2
height: parent.height
color: Material.accent
Column {
x: 32
anchors.verticalCenter: parent.verticalCenter
Label {
text: "Matrix Login."
font.pointSize: 28
font.bold: true
font.capitalization: Font.AllUppercase
color: "white"
}
Label {
text: "A new method of messaging."
font.pointSize: 12
font.capitalization: Font.AllUppercase
color: "white"
}
}
}
Pane {
width: parent.width / 2
height: parent.height
padding: 64
ColumnLayout {
width: parent.width
id: mainCol
AutoTextField {
Layout.fillWidth: true
id: serverField
leftPadding: 16
topPadding: 0
bottomPadding: 0
text: "https://matrix.org"
placeholderText: "Server"
background: Rectangle {
implicitHeight: 48
color: MSettings.darkTheme ? "#242424" : "#eaeaea"
border.color: parent.activeFocus ? Material.accent : "transparent"
border.width: 2
}
}
AutoTextField {
Layout.fillWidth: true
id: usernameField
leftPadding: 16
topPadding: 0
bottomPadding: 0
placeholderText: "Username"
background: Rectangle {
implicitHeight: 48
color: MSettings.darkTheme ? "#242424" : "#eaeaea"
border.color: parent.activeFocus ? Material.accent : "transparent"
border.width: 2
}
}
AutoTextField {
Layout.fillWidth: true
id: passwordField
leftPadding: 16
topPadding: 0
bottomPadding: 0
placeholderText: "Password"
echoMode: TextInput.Password
background: Rectangle {
implicitHeight: 48
color: MSettings.darkTheme ? "#242424" : "#eaeaea"
border.color: parent.activeFocus ? Material.accent : "transparent"
border.width: 2
}
}
Button {
Layout.fillWidth: true
id: loginButton
text: "LOGIN"
highlighted: true
ToolTip {
id: loginButtonTooltip
}
}
}
}
}
}
/*##^## Designer {
D{i:0;autoSize:true;height:480;width:640}
}
##^##*/

View File

@ -6,7 +6,7 @@ import QtQuick.Controls.Material 2.2
import Spectral 0.1 import Spectral 0.1
import Spectral.Effect 2.0 import Spectral.Effect 2.0
Rectangle { Control {
property alias paintable: headerImage.source property alias paintable: headerImage.source
property alias topic: headerTopicLabel.text property alias topic: headerTopicLabel.text
property bool atTop: false property bool atTop: false
@ -14,19 +14,16 @@ Rectangle {
id: header id: header
color: atTop ? "transparent" : "white" background: Rectangle {
color: Material.background
layer.enabled: !atTop opacity: atTop ? 0 : 1
layer.enabled: true
layer.effect: ElevationEffect { layer.effect: ElevationEffect {
elevation: 4 elevation: 2
}
} }
ItemDelegate {
anchors.fill: parent
id: roomHeader
onClicked: header.clicked()
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent
@ -55,7 +52,6 @@ Rectangle {
Layout.fillHeight: true Layout.fillHeight: true
text: currentRoom ? currentRoom.displayName : "" text: currentRoom ? currentRoom.displayName : ""
color: "#1D333E"
font.pointSize: 12 font.pointSize: 12
elide: Text.ElideRight elide: Text.ElideRight
wrapMode: Text.NoWrap wrapMode: Text.NoWrap
@ -73,5 +69,10 @@ Rectangle {
} }
} }
} }
RippleEffect {
anchors.fill: parent
onClicked: header.clicked()
} }
} }

View File

@ -1,96 +0,0 @@
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls.Material 2.2
import Spectral 0.1
import Spectral.Setting 0.1
import Spectral.Component 2.0
Item {
AutoMouseArea {
anchors.fill: parent
onSecondaryClicked: {
roomContextMenu.model = model
roomContextMenu.popup()
}
onPrimaryClicked: {
if (category === RoomType.Invited) {
inviteDialog.currentRoom = currentRoom
inviteDialog.open()
} else {
leaveRoom(enteredRoom)
enterRoom(currentRoom)
enteredRoom = currentRoom
}
}
}
Rectangle {
anchors.fill: parent
visible: highlightCount > 0 || currentRoom === enteredRoom
color: Material.accent
opacity: 0.1
}
Rectangle {
width: unreadCount > 0 ? 4 : 0
height: parent.height
color: Material.accent
Behavior on width {
PropertyAnimation { easing.type: Easing.InOutCubic; duration: 200 }
}
}
RowLayout {
anchors.fill: parent
anchors.margins: 12
spacing: 12
ImageItem {
id: imageItem
Layout.preferredWidth: height
Layout.fillHeight: true
source: paintable
hint: name || "No Name"
}
ColumnLayout {
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignHCenter
visible: parent.width > 64
Label {
Layout.fillWidth: true
Layout.fillHeight: true
text: name || "No Name"
color: "#1D333E"
font.pointSize: 12
elide: Text.ElideRight
wrapMode: Text.NoWrap
}
Label {
Layout.fillWidth: true
Layout.fillHeight: true
text: (lastEvent == "" ? topic : lastEvent).replace(/(\r\n\t|\n|\r\t)/gm,"")
color: "#5B7480"
font.pointSize: 9.75
elide: Text.ElideRight
wrapMode: Text.NoWrap
}
}
}
}

View File

@ -17,7 +17,7 @@ Rectangle {
property var controller: null property var controller: null
readonly property var user: controller.connection ? controller.connection.localUser : null readonly property var user: controller.connection ? controller.connection.localUser : null
readonly property int filter: 0 property int filter: 0
property var enteredRoom: null property var enteredRoom: null
property alias errorControl: errorControl property alias errorControl: errorControl
@ -140,7 +140,7 @@ Rectangle {
background: Rectangle { color: Material.primary } background: Rectangle { color: Material.primary }
ItemDelegate { RippleEffect {
anchors.fill: parent anchors.fill: parent
} }
} }
@ -172,11 +172,19 @@ Rectangle {
} }
} }
ItemDelegate {
Layout.fillWidth: true
text: "Add Account"
onClicked: loginDialog.open()
}
Rectangle { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 1 Layout.preferredHeight: 1
color: "#e7ebeb" color: MSettings.darkTheme ? "#424242" : "#e7ebeb"
} }
ItemDelegate { ItemDelegate {
@ -187,6 +195,14 @@ Rectangle {
onClicked: stackView.push(settingsPage) onClicked: stackView.push(settingsPage)
} }
ItemDelegate {
Layout.fillWidth: true
text: "Logout"
onClicked: controller.logout(controller.connection)
}
ItemDelegate { ItemDelegate {
Layout.fillWidth: true Layout.fillWidth: true
@ -249,14 +265,18 @@ Rectangle {
spacing: 0 spacing: 0
Control { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 64 Layout.preferredHeight: 64
visible: stackView.depth > 1 visible: stackView.depth > 1
contentItem: RowLayout { color: Material.primary
RowLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: 4
ToolButton { ToolButton {
Layout.preferredWidth: height Layout.preferredWidth: height
Layout.fillHeight: true Layout.fillHeight: true
@ -277,10 +297,6 @@ Rectangle {
elide: Label.ElideRight elide: Label.ElideRight
} }
} }
background: Rectangle {
color: Material.primary
}
} }
StackView { StackView {
@ -289,6 +305,8 @@ Rectangle {
id: stackView id: stackView
clip: true
initialItem: mainPage initialItem: mainPage
} }
} }
@ -299,8 +317,6 @@ Rectangle {
spacing: 0 spacing: 0
Control { Control {
readonly property bool isSearching: searchField.text
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 64 Layout.preferredHeight: 64
@ -316,22 +332,66 @@ Rectangle {
Layout.preferredWidth: height Layout.preferredWidth: height
Layout.fillHeight: true Layout.fillHeight: true
visible: !searchField.active
contentItem: MaterialIcon { contentItem: MaterialIcon {
icon: roomListHeader.isSearching ? "\ue5cd" : "\ue8b6" icon: {
color: roomListHeader.isSearching ? "#1D333E" : "7F7F7F" switch (filter) {
case 0: return "\ue8b6"
case 1: return "\ue7f5"
case 2: return "\ue7ff"
case 3: return "\ue7fc"
}
}
} }
onClicked: { Menu {
if (searchField.focus) { id: filterMenu
searchField.clear()
searchField.focus = false MenuItem {
} else { text: "All"
searchField.focus = true
onClicked: filter = 0
}
MenuSeparator {}
MenuItem {
text: "New"
onClicked: filter = 1
}
MenuItem {
text: "People"
onClicked: filter = 2
}
MenuItem {
text: "Group"
onClicked: filter = 3
} }
} }
onClicked: filterMenu.popup()
}
ItemDelegate {
Layout.preferredWidth: height
Layout.fillHeight: true
visible: searchField.active
contentItem: MaterialIcon { icon: "\ue5cd" }
onClicked: searchField.clear()
} }
AutoTextField { AutoTextField {
readonly property bool active: text
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
@ -349,7 +409,7 @@ Rectangle {
Layout.fillHeight: true Layout.fillHeight: true
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
visible: !roomListHeader.isSearching visible: !searchField.active
source: root.user ? root.user.paintable : null source: root.user ? root.user.paintable : null
hint: root.user ? root.user.displayName : "?" hint: root.user ? root.user.displayName : "?"
@ -360,6 +420,17 @@ Rectangle {
} }
} }
} }
background: Rectangle {
color: Material.background
opacity: listView.atYBeginning ? 0 : 1
layer.enabled: true
layer.effect: ElevationEffect {
elevation: 2
}
}
} }
Control { Control {
@ -423,9 +494,93 @@ Rectangle {
ScrollBar.vertical: ScrollBar {} ScrollBar.vertical: ScrollBar {}
delegate: RoomListDelegate { delegate: Item {
width: parent.width width: listView.width
height: 64 height: 64
Rectangle {
anchors.fill: parent
visible: highlightCount > 0 || currentRoom === enteredRoom
color: Material.accent
opacity: 0.1
}
Rectangle {
width: unreadCount > 0 ? 4 : 0
height: parent.height
color: Material.accent
Behavior on width {
PropertyAnimation { easing.type: Easing.InOutCubic; duration: 200 }
}
}
RowLayout {
anchors.fill: parent
anchors.margins: 12
spacing: 12
ImageItem {
id: imageItem
Layout.preferredWidth: height
Layout.fillHeight: true
source: paintable
hint: name || "No Name"
}
ColumnLayout {
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignHCenter
visible: parent.width > 64
Label {
Layout.fillWidth: true
Layout.fillHeight: true
text: name || "No Name"
font.pointSize: 12
elide: Text.ElideRight
wrapMode: Text.NoWrap
}
Label {
Layout.fillWidth: true
Layout.fillHeight: true
text: (lastEvent == "" ? topic : lastEvent).replace(/(\r\n\t|\n|\r\t)/gm,"")
color: "#5B7480"
font.pointSize: 9.75
elide: Text.ElideRight
wrapMode: Text.NoWrap
}
}
}
RippleEffect {
anchors.fill: parent
onSecondaryClicked: {
roomContextMenu.model = model
roomContextMenu.popup()
}
onPrimaryClicked: {
if (category === RoomType.Invited) {
inviteDialog.currentRoom = currentRoom
inviteDialog.open()
} else {
leaveRoom(enteredRoom)
enterRoom(currentRoom)
enteredRoom = currentRoom
}
}
}
} }
section.property: "display" section.property: "display"

View File

@ -54,7 +54,7 @@ Item {
visible: currentRoom visible: currentRoom
source: "qrc:/assets/img/roompanel.svg" source: MSettings.darkTheme ? "qrc:/assets/img/roompanel-dark.svg" : "qrc:/assets/img/roompanel.svg"
fillMode: Image.PreserveAspectCrop fillMode: Image.PreserveAspectCrop
} }

View File

@ -28,6 +28,9 @@ ApplicationWindow {
visible: true visible: true
title: qsTr("Spectral") title: qsTr("Spectral")
Material.foreground: Material.theme == Material.Dark ? "#FFFFFF" : "#1D333E"
Material.background: Material.theme == Material.Dark ? "#303030" : "#FFFFFF"
Platform.SystemTrayIcon { Platform.SystemTrayIcon {
visible: MSettings.showTray visible: MSettings.showTray
iconSource: "qrc:/assets/img/icon.png" iconSource: "qrc:/assets/img/icon.png"
@ -52,8 +55,8 @@ ApplicationWindow {
quitOnLastWindowClosed: !MSettings.showTray quitOnLastWindowClosed: !MSettings.showTray
onNotificationClicked: { onNotificationClicked: {
roomPage.enteredRoom = spectralController.connection.room(roomId) roomForm.enteredRoom = spectralController.connection.room(roomId)
roomPage.goToEvent(eventId) roomForm.goToEvent(eventId)
showWindow() showWindow()
} }
onErrorOccured: { onErrorOccured: {
@ -64,6 +67,95 @@ ApplicationWindow {
onSyncDone: roomListForm.errorControl.visible = false onSyncDone: roomListForm.errorControl.visible = false
} }
Dialog {
property bool busy: false
width: 360
height: 300
x: (window.width - width) / 2
y: (window.height - height) / 2
id: loginDialog
parent: ApplicationWindow.overlay
title: "Login"
contentItem: ColumnLayout {
AutoTextField {
Layout.fillWidth: true
id: serverField
placeholderText: "Server Address"
text: "https://matrix.org"
}
AutoTextField {
Layout.fillWidth: true
id: usernameField
placeholderText: "Username"
}
AutoTextField {
Layout.fillWidth: true
id: passwordField
placeholderText: "Password"
echoMode: TextInput.Password
}
}
footer: DialogButtonBox {
Button {
text: "OK"
flat: true
enabled: !loginDialog.busy
onClicked: loginDialog.doLogin()
}
Button {
text: "Cancel"
flat: true
enabled: !loginDialog.busy
onClicked: loginDialog.close()
}
ToolTip {
id: loginButtonTooltip
}
}
Component.onCompleted: {
spectralController.onErrorOccured.connect(function(error, detail) {
loginDialog.busy = false
loginButtonTooltip.text = error + ": " + detail
loginButtonTooltip.open()
})
}
function doLogin() {
if (!(serverField.text.startsWith("http") && serverField.text.includes("://"))) {
loginButtonTooltip.text = "Server address should start with http(s)://"
loginButtonTooltip.open()
return
}
loginDialog.busy = true
spectralController.loginWithCredentials(serverField.text, usernameField.text, passwordField.text)
spectralController.connectionAdded.connect(function(conn) {
busy = false
loginDialog.close()
})
}
}
SplitView { SplitView {
anchors.fill: parent anchors.fill: parent
@ -108,13 +200,9 @@ ApplicationWindow {
window.hide() window.hide()
} }
function showError() { Component.onCompleted: {
spectralController.initiated.connect(function() {
if (spectralController.accountCount == 0) loginDialog.open()
})
} }
// Component.onCompleted: {
// spectralController.initiated.connect(function() {
// if (spectralController.accountCount == 0) stackView.push(loginPage)
// })
// }
} }

View File

@ -13,13 +13,11 @@
<file>imports/Spectral/Component/AutoMouseArea.qml</file> <file>imports/Spectral/Component/AutoMouseArea.qml</file>
<file>imports/Spectral/Component/MaterialIcon.qml</file> <file>imports/Spectral/Component/MaterialIcon.qml</file>
<file>imports/Spectral/Component/qmldir</file> <file>imports/Spectral/Component/qmldir</file>
<file>imports/Spectral/Component/SideNavButton.qml</file>
<file>imports/Spectral/Effect/ElevationEffect.qml</file> <file>imports/Spectral/Effect/ElevationEffect.qml</file>
<file>imports/Spectral/Effect/qmldir</file> <file>imports/Spectral/Effect/qmldir</file>
<file>imports/Spectral/Menu/MessageContextMenu.qml</file> <file>imports/Spectral/Menu/MessageContextMenu.qml</file>
<file>imports/Spectral/Menu/qmldir</file> <file>imports/Spectral/Menu/qmldir</file>
<file>imports/Spectral/Menu/RoomContextMenu.qml</file> <file>imports/Spectral/Menu/RoomContextMenu.qml</file>
<file>imports/Spectral/Page/Login.qml</file>
<file>imports/Spectral/Page/qmldir</file> <file>imports/Spectral/Page/qmldir</file>
<file>assets/font/material.ttf</file> <file>assets/font/material.ttf</file>
<file>assets/img/icon.icns</file> <file>assets/img/icon.icns</file>
@ -29,14 +27,12 @@
<file>imports/Spectral/Font/MaterialFont.qml</file> <file>imports/Spectral/Font/MaterialFont.qml</file>
<file>imports/Spectral/Font/qmldir</file> <file>imports/Spectral/Font/qmldir</file>
<file>imports/Spectral/Setting/qmldir</file> <file>imports/Spectral/Setting/qmldir</file>
<file>imports/Spectral/Page/LoginForm.ui.qml</file>
<file>imports/Spectral/Panel/qmldir</file> <file>imports/Spectral/Panel/qmldir</file>
<file>imports/Spectral/Panel/RoomDrawer.qml</file> <file>imports/Spectral/Panel/RoomDrawer.qml</file>
<file>imports/Spectral/Panel/RoomListPanel.qml</file> <file>imports/Spectral/Panel/RoomListPanel.qml</file>
<file>imports/Spectral/Panel/RoomPanel.qml</file> <file>imports/Spectral/Panel/RoomPanel.qml</file>
<file>imports/Spectral/Panel/RoomPanelForm.ui.qml</file> <file>imports/Spectral/Panel/RoomPanelForm.ui.qml</file>
<file>imports/Spectral/Panel/RoomHeader.qml</file> <file>imports/Spectral/Panel/RoomHeader.qml</file>
<file>imports/Spectral/Panel/RoomListDelegate.qml</file>
<file>imports/Spectral/Component/ScrollHelper.qml</file> <file>imports/Spectral/Component/ScrollHelper.qml</file>
<file>imports/Spectral/Component/AutoListView.qml</file> <file>imports/Spectral/Component/AutoListView.qml</file>
<file>imports/Spectral/Component/Timeline/TimelineImage.qml</file> <file>imports/Spectral/Component/Timeline/TimelineImage.qml</file>
@ -48,5 +44,8 @@
<file>imports/Spectral/Component/Timeline/SectionDelegate.qml</file> <file>imports/Spectral/Component/Timeline/SectionDelegate.qml</file>
<file>assets/img/roompanel.svg</file> <file>assets/img/roompanel.svg</file>
<file>assets/img/matrix.svg</file> <file>assets/img/matrix.svg</file>
<file>imports/Spectral/Effect/RippleEffect.qml</file>
<file>imports/Spectral/Effect/CircleMask.qml</file>
<file>assets/img/roompanel-dark.svg</file>
</qresource> </qresource>
</RCC> </RCC>

View File

@ -58,26 +58,27 @@ inline QString accessTokenFileName(const AccountSettings& account) {
void Controller::loginWithCredentials(QString serverAddr, QString user, void Controller::loginWithCredentials(QString serverAddr, QString user,
QString pass) { QString pass) {
if (!user.isEmpty() && !pass.isEmpty()) { if (!user.isEmpty() && !pass.isEmpty()) {
Connection* m_connection = new Connection(this); Connection* conn = new Connection(this);
m_connection->setHomeserver(QUrl(serverAddr)); conn->setHomeserver(QUrl(serverAddr));
m_connection->connectToServer(user, pass, ""); conn->connectToServer(user, pass, "");
connect(m_connection, &Connection::connected, [=] { connect(conn, &Connection::connected, [=] {
AccountSettings account(m_connection->userId()); AccountSettings account(conn->userId());
account.setKeepLoggedIn(true); account.setKeepLoggedIn(true);
account.clearAccessToken(); // Drop the legacy - just in case account.clearAccessToken(); // Drop the legacy - just in case
account.setHomeserver(m_connection->homeserver()); account.setHomeserver(conn->homeserver());
account.setDeviceId(m_connection->deviceId()); account.setDeviceId(conn->deviceId());
account.setDeviceName("Spectral"); account.setDeviceName("Spectral");
if (!saveAccessToken(account, m_connection->accessToken())) if (!saveAccessToken(account, conn->accessToken()))
qWarning() << "Couldn't save access token"; qWarning() << "Couldn't save access token";
account.sync(); account.sync();
addConnection(m_connection); addConnection(conn);
setConnection(conn);
}); });
connect(m_connection, &Connection::networkError, connect(conn, &Connection::networkError,
[=](QString error, QByteArray detail) { [=](QString error, QByteArray detail) {
emit errorOccured("Network Error", error); emit errorOccured("Network Error", error);
}); });
connect(m_connection, &Connection::loginError, connect(conn, &Connection::loginError,
[=](QString error, QByteArray detail) { [=](QString error, QByteArray detail) {
emit errorOccured("Login Failed", error); emit errorOccured("Login Failed", error);
}); });
@ -98,6 +99,7 @@ void Controller::logout(Connection* conn) {
conn->stopSync(); conn->stopSync();
emit conn->stateChanged(); emit conn->stateChanged();
emit conn->loggedOut(); emit conn->loggedOut();
if (!m_connections.isEmpty()) setConnection(m_connections[0]);
}); });
connect(job, &LogoutJob::failure, this, [=] { connect(job, &LogoutJob::failure, this, [=] {
emit errorOccured("Server-side Logout Failed", job->errorString()); emit errorOccured("Server-side Logout Failed", job->errorString());