Browse Source

improvements

- add sidebar-stack
- add control-btn-label
- better locating dz
- enable reply_rev when 1 reply
- replace latest_post_id when page=1
dev
xmcp 6 years ago
parent
commit
2fdca50762
  1. 2
      public/index.html
  2. 101
      public/static/fonts_7/icomoon.css
  3. 34
      public/static/fonts_7/icomoon.svg
  4. BIN
      public/static/fonts_7/icomoon.ttf
  5. BIN
      public/static/fonts_7/icomoon.woff
  6. 48
      src/App.js
  7. 72
      src/Flows.js
  8. 25
      src/Sidebar.js
  9. 18
      src/Title.css
  10. 4
      src/Title.js

2
public/index.html

@ -6,7 +6,7 @@
<link rel="icon" href="%PUBLIC_URL%/static/favicon/256.png">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="%PUBLIC_URL%/static/fonts_6/icomoon.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/static/fonts_7/icomoon.css" />
<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="%PUBLIC_URL%/static/favicon/256.png">

101
public/static/fonts_7/icomoon.css

@ -0,0 +1,101 @@
@font-face {
font-family: 'icomoon';
src:
url('icomoon.ttf?8qh3rt') format('truetype'),
url('icomoon.woff?8qh3rt') format('woff'),
url('icomoon.svg?8qh3rt#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
.icon {
/* use !important to prevent issues with browser extensions that change fonts */
/*noinspection CssNoGenericFontName*/
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: -.0625em;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-send:before {
content: "\e900";
}
.icon-textfile:before {
content: "\e926";
}
.icon-history:before {
content: "\e94d";
}
.icon-reply:before {
content: "\e96b";
}
.icon-quote:before {
content: "\e977";
}
.icon-loading:before {
content: "\e979";
}
.icon-login:before {
content: "\e98d";
}
.icon-settings:before {
content: "\e994";
}
.icon-stats:before {
content: "\e99b";
}
.icon-locate:before {
content: "\e9b3";
}
.icon-upload:before {
content: "\e9c3";
}
.icon-flag:before {
content: "\e9cc";
}
.icon-attention:before {
content: "\e9d3";
}
.icon-star:before {
content: "\e9d7";
}
.icon-star-ok:before {
content: "\e9d9";
}
.icon-plus:before {
content: "\ea0a";
}
.icon-about:before {
content: "\ea0c";
}
.icon-close:before {
content: "\ea0d";
}
.icon-logout:before {
content: "\ea14";
}
.icon-refresh:before {
content: "\ea2e";
}
.icon-forward:before {
content: "\ea42";
}
.icon-back:before {
content: "\ea44";
}
.icon-order-rev:before {
content: "\ea46";
font-size: 1.2em;
}
.icon-github:before {
content: "\eab0";
}

34
public/static/fonts_7/icomoon.svg

@ -0,0 +1,34 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="icomoon" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
<glyph unicode="&#xe900;" glyph-name="send" horiz-adv-x="1025" d="M1008 944.571c12-8.571 17.714-22.286 15.429-36.571l-146.286-877.714c-1.714-10.857-8.571-20-18.286-25.714-5.143-2.857-11.429-4.571-17.714-4.571-4.571 0-9.143 1.143-13.714 2.857l-258.857 105.714-138.286-168.571c-6.857-8.571-17.143-13.143-28-13.143-4 0-8.571 0.571-12.571 2.286-14.286 5.143-24 18.857-24 34.286v199.429l493.714 605.143-610.857-528.571-225.714 92.571c-13.143 5.143-21.714 17.143-22.857 31.429-0.571 13.714 6.286 26.857 18.286 33.714l950.857 548.571c5.714 3.429 12 5.143 18.286 5.143 7.429 0 14.857-2.286 20.571-6.286z" />
<glyph unicode="&#xe926;" glyph-name="textfile" d="M917.806 730.924c-22.212 30.292-53.174 65.7-87.178 99.704s-69.412 64.964-99.704 87.178c-51.574 37.82-76.592 42.194-90.924 42.194h-496c-44.112 0-80-35.888-80-80v-864c0-44.112 35.888-80 80-80h736c44.112 0 80 35.888 80 80v624c0 14.332-4.372 39.35-42.194 90.924zM785.374 785.374c30.7-30.7 54.8-58.398 72.58-81.374h-153.954v153.946c22.984-17.78 50.678-41.878 81.374-72.572zM896 16c0-8.672-7.328-16-16-16h-736c-8.672 0-16 7.328-16 16v864c0 8.672 7.328 16 16 16 0 0 495.956 0.002 496 0v-224c0-17.672 14.326-32 32-32h224v-624zM736 128h-448c-17.672 0-32 14.326-32 32s14.328 32 32 32h448c17.674 0 32-14.326 32-32s-14.326-32-32-32zM736 256h-448c-17.672 0-32 14.326-32 32s14.328 32 32 32h448c17.674 0 32-14.326 32-32s-14.326-32-32-32zM736 384h-448c-17.672 0-32 14.326-32 32s14.328 32 32 32h448c17.674 0 32-14.326 32-32s-14.326-32-32-32z" />
<glyph unicode="&#xe94d;" glyph-name="history" horiz-adv-x="1088" d="M640 896c247.424 0 448-200.576 448-448s-200.576-448-448-448v96c94.024 0 182.418 36.614 248.902 103.098s103.098 154.878 103.098 248.902c0 94.022-36.614 182.418-103.098 248.902s-154.878 103.098-248.902 103.098c-94.022 0-182.418-36.614-248.902-103.098-51.14-51.138-84.582-115.246-97.306-184.902h186.208l-224-256-224 256h164.57c31.060 217.102 217.738 384 443.43 384zM832 512v-128h-256v320h128v-192z" />
<glyph unicode="&#xe96b;" glyph-name="reply" d="M512 896c282.77 0 512-186.25 512-416 0-229.752-229.23-416-512-416-27.156 0-53.81 1.734-79.824 5.044-109.978-109.978-241.25-129.7-368.176-132.596v26.916c68.536 33.578 128 94.74 128 164.636 0 9.754-0.758 19.33-2.164 28.696-115.796 76.264-189.836 192.754-189.836 323.304 0 229.75 229.23 416 512 416z" />
<glyph unicode="&#xe977;" glyph-name="quote" d="M225 512c123.712 0 224-100.29 224-224 0-123.712-100.288-224-224-224s-224 100.288-224 224l-1 32c0 247.424 200.576 448 448 448v-128c-85.474 0-165.834-33.286-226.274-93.726-11.634-11.636-22.252-24.016-31.83-37.020 11.438 1.8 23.16 2.746 35.104 2.746zM801 512c123.71 0 224-100.29 224-224 0-123.712-100.29-224-224-224s-224 100.288-224 224l-1 32c0 247.424 200.576 448 448 448v-128c-85.474 0-165.834-33.286-226.274-93.726-11.636-11.636-22.254-24.016-31.832-37.020 11.44 1.8 23.16 2.746 35.106 2.746z" />
<glyph unicode="&#xe979;" glyph-name="loading" d="M728.992 448c137.754 87.334 231.008 255.208 231.008 448 0 21.676-1.192 43.034-3.478 64h-889.042c-2.29-20.968-3.48-42.326-3.48-64 0-192.792 93.254-360.666 231.006-448-137.752-87.334-231.006-255.208-231.006-448 0-21.676 1.19-43.034 3.478-64h889.042c2.288 20.966 3.478 42.324 3.478 64 0.002 192.792-93.252 360.666-231.006 448zM160 0c0 186.912 80.162 345.414 224 397.708v100.586c-143.838 52.29-224 210.792-224 397.706v0h704c0-186.914-80.162-345.416-224-397.706v-100.586c143.838-52.294 224-210.796 224-397.708h-704zM619.626 290.406c-71.654 40.644-75.608 93.368-75.626 125.366v64.228c0 31.994 3.804 84.914 75.744 125.664 38.504 22.364 71.808 56.348 97.048 98.336h-409.582c25.266-42.032 58.612-76.042 97.166-98.406 71.654-40.644 75.606-93.366 75.626-125.366v-64.228c0-31.992-3.804-84.914-75.744-125.664-72.622-42.18-126.738-125.684-143.090-226.336h501.67c-16.364 100.708-70.53 184.248-143.212 226.406z" />
<glyph unicode="&#xe98d;" glyph-name="login" d="M704 960c-176.73 0-320-143.268-320-320 0-20.026 1.858-39.616 5.376-58.624l-389.376-389.376v-192c0-35.346 28.654-64 64-64h64v64h128v128h128v128h128l83.042 83.042c34.010-12.316 70.696-19.042 108.958-19.042 176.73 0 320 143.268 320 320s-143.27 320-320 320zM799.874 639.874c-53.020 0-96 42.98-96 96s42.98 96 96 96 96-42.98 96-96-42.98-96-96-96z" />
<glyph unicode="&#xe994;" glyph-name="settings" d="M933.79 349.75c-53.726 93.054-21.416 212.304 72.152 266.488l-100.626 174.292c-28.75-16.854-62.176-26.518-97.846-26.518-107.536 0-194.708 87.746-194.708 195.99h-201.258c0.266-33.41-8.074-67.282-25.958-98.252-53.724-93.056-173.156-124.702-266.862-70.758l-100.624-174.292c28.97-16.472 54.050-40.588 71.886-71.478 53.638-92.908 21.512-211.92-71.708-266.224l100.626-174.292c28.65 16.696 61.916 26.254 97.4 26.254 107.196 0 194.144-87.192 194.7-194.958h201.254c-0.086 33.074 8.272 66.57 25.966 97.218 53.636 92.906 172.776 124.594 266.414 71.012l100.626 174.29c-28.78 16.466-53.692 40.498-71.434 71.228zM512 240.668c-114.508 0-207.336 92.824-207.336 207.334 0 114.508 92.826 207.334 207.336 207.334 114.508 0 207.332-92.826 207.332-207.334-0.002-114.51-92.824-207.334-207.332-207.334z" />
<glyph unicode="&#xe99b;" glyph-name="stats" d="M128 64h896v-128h-1024v1024h128zM288 128c-53.020 0-96 42.98-96 96s42.98 96 96 96c2.828 0 5.622-0.148 8.388-0.386l103.192 171.986c-9.84 15.070-15.58 33.062-15.58 52.402 0 53.020 42.98 96 96 96s96-42.98 96-96c0-19.342-5.74-37.332-15.58-52.402l103.192-171.986c2.766 0.238 5.56 0.386 8.388 0.386 2.136 0 4.248-0.094 6.35-0.23l170.356 298.122c-10.536 15.408-16.706 34.036-16.706 54.11 0 53.020 42.98 96 96 96s96-42.98 96-96c0-53.020-42.98-96-96-96-2.14 0-4.248 0.094-6.35 0.232l-170.356-298.124c10.536-15.406 16.706-34.036 16.706-54.11 0-53.020-42.98-96-96-96s-96 42.98-96 96c0 19.34 5.74 37.332 15.578 52.402l-103.19 171.984c-2.766-0.238-5.56-0.386-8.388-0.386s-5.622 0.146-8.388 0.386l-103.192-171.986c9.84-15.068 15.58-33.060 15.58-52.4 0-53.020-42.98-96-96-96z" />
<glyph unicode="&#xe9b3;" glyph-name="locate" d="M1024 512h-100.924c-27.64 178.24-168.836 319.436-347.076 347.076v100.924h-128v-100.924c-178.24-27.64-319.436-168.836-347.076-347.076h-100.924v-128h100.924c27.64-178.24 168.836-319.436 347.076-347.076v-100.924h128v100.924c178.24 27.64 319.436 168.836 347.076 347.076h100.924v128zM792.822 512h-99.762c-19.284 54.55-62.51 97.778-117.060 117.060v99.762c107.514-24.49 192.332-109.31 216.822-216.822zM512 384c-35.346 0-64 28.654-64 64s28.654 64 64 64c35.346 0 64-28.654 64-64s-28.654-64-64-64zM448 728.822v-99.762c-54.55-19.282-97.778-62.51-117.060-117.060h-99.762c24.49 107.512 109.31 192.332 216.822 216.822zM231.178 384h99.762c19.282-54.55 62.51-97.778 117.060-117.060v-99.762c-107.512 24.49-192.332 109.308-216.822 216.822zM576 167.178v99.762c54.55 19.284 97.778 62.51 117.060 117.060h99.762c-24.49-107.514-109.308-192.332-216.822-216.822z" />
<glyph unicode="&#xe9c3;" glyph-name="upload" d="M892.268 573.51c2.444 11.11 3.732 22.648 3.732 34.49 0 88.366-71.634 160-160 160-14.222 0-28.014-1.868-41.132-5.352-24.798 77.352-97.29 133.352-182.868 133.352-87.348 0-161.054-58.336-184.326-138.17-22.742 6.622-46.792 10.17-71.674 10.17-141.384 0-256-114.616-256-256 0-141.388 114.616-256 256-256h128v-192h256v192h224c88.366 0 160 71.632 160 160 0 78.72-56.854 144.162-131.732 157.51zM576 320v-192h-128v192h-160l224 224 224-224h-160z" />
<glyph unicode="&#xe9cc;" glyph-name="flag" d="M0 960h128v-1024h-128v1024zM832 316.998c82.624 0 154.57 19.984 192 49.5v512c-37.43-29.518-109.376-49.502-192-49.502s-154.57 19.984-192 49.502v-512c37.43-29.516 109.376-49.5 192-49.5zM608 927.472c-46.906 19.94-115.52 32.528-192 32.528-96.396 0-180.334-19.984-224-49.502v-512c43.666 29.518 127.604 49.502 224 49.502 76.48 0 145.094-12.588 192-32.528v512z" />
<glyph unicode="&#xe9d3;" glyph-name="attention" d="M256 832v-896l320 320 320-320v896zM768 960h-640v-896l64 64v768h576z" />
<glyph unicode="&#xe9d7;" glyph-name="star" d="M1024 562.95l-353.78 51.408-158.22 320.582-158.216-320.582-353.784-51.408 256-249.538-60.432-352.352 316.432 166.358 316.432-166.358-60.434 352.352 256.002 249.538zM512 206.502l-223.462-117.48 42.676 248.83-180.786 176.222 249.84 36.304 111.732 226.396 111.736-226.396 249.836-36.304-180.788-176.222 42.678-248.83-223.462 117.48z" />
<glyph unicode="&#xe9d9;" glyph-name="star-ok" d="M1024 562.95l-353.78 51.408-158.22 320.582-158.216-320.582-353.784-51.408 256-249.538-60.432-352.352 316.432 166.358 316.432-166.358-60.434 352.352 256.002 249.538z" />
<glyph unicode="&#xea0a;" glyph-name="plus" d="M992 576h-352v352c0 17.672-14.328 32-32 32h-192c-17.672 0-32-14.328-32-32v-352h-352c-17.672 0-32-14.328-32-32v-192c0-17.672 14.328-32 32-32h352v-352c0-17.672 14.328-32 32-32h192c17.672 0 32 14.328 32 32v352h352c17.672 0 32 14.328 32 32v192c0 17.672-14.328 32-32 32z" />
<glyph unicode="&#xea0c;" glyph-name="about" d="M448 656c0 26.4 21.6 48 48 48h32c26.4 0 48-21.6 48-48v-32c0-26.4-21.6-48-48-48h-32c-26.4 0-48 21.6-48 48v32zM640 192h-256v64h64v192h-64v64h192v-256h64zM512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512 32c-229.75 0-416 186.25-416 416s186.25 416 416 416 416-186.25 416-416-186.25-416-416-416z" />
<glyph unicode="&#xea0d;" glyph-name="close" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512 32c-229.75 0-416 186.25-416 416s186.25 416 416 416 416-186.25 416-416-186.25-416-416-416zM672 704l-160-160-160 160-96-96 160-160-160-160 96-96 160 160 160-160 96 96-160 160 160 160z" />
<glyph unicode="&#xea14;" glyph-name="logout" d="M768 320v128h-320v128h320v128l192-192zM704 384v-256h-320v-192l-384 192v832h704v-320h-64v256h-512l256-128v-576h256v192z" />
<glyph unicode="&#xea2e;" glyph-name="refresh" d="M889.68 793.68c-93.608 102.216-228.154 166.32-377.68 166.32-282.77 0-512-229.23-512-512h96c0 229.75 186.25 416 416 416 123.020 0 233.542-53.418 309.696-138.306l-149.696-149.694h352v352l-134.32-134.32zM928 448c0-229.75-186.25-416-416-416-123.020 0-233.542 53.418-309.694 138.306l149.694 149.694h-352v-352l134.32 134.32c93.608-102.216 228.154-166.32 377.68-166.32 282.77 0 512 229.23 512 512h-96z" />
<glyph unicode="&#xea42;" glyph-name="forward" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512 32c-229.75 0-416 186.25-416 416s186.25 416 416 416 416-186.25 416-416-186.25-416-416-416zM354.744 253.256l90.512-90.512 285.254 285.256-285.256 285.254-90.508-90.508 194.744-194.746z" />
<glyph unicode="&#xea44;" glyph-name="back" d="M512-64c282.77 0 512 229.23 512 512s-229.23 512-512 512-512-229.23-512-512 229.23-512 512-512zM512 864c229.75 0 416-186.25 416-416s-186.25-416-416-416-416 186.25-416 416 186.25 416 416 416zM669.256 642.744l-90.512 90.512-285.254-285.256 285.256-285.254 90.508 90.508-194.744 194.746z" />
<glyph unicode="&#xea46;" glyph-name="order-rev" d="M704 448v-384h64v384h160l-192 192-192-192zM64 768h96v-64h-96v64zM192 768h96v-64h-96v64zM320 768h64v-96h-64v96zM64 544h64v-96h-64v96zM160 512h96v-64h-96v64zM288 512h96v-64h-96v64zM64 672h64v-96h-64v96zM320 640h64v-96h-64v96zM320 256v-192h-192v192h192zM384 320h-320v-320h320v320z" />
<glyph unicode="&#xeab0;" glyph-name="github" d="M512.008 947.358c-282.738 0-512.008-229.218-512.008-511.998 0-226.214 146.704-418.132 350.136-485.836 25.586-4.738 34.992 11.11 34.992 24.632 0 12.204-0.48 52.542-0.696 95.324-142.448-30.976-172.504 60.41-172.504 60.41-23.282 59.176-56.848 74.916-56.848 74.916-46.452 31.778 3.51 31.124 3.51 31.124 51.4-3.61 78.476-52.766 78.476-52.766 45.672-78.27 119.776-55.64 149.004-42.558 4.588 33.086 17.852 55.68 32.506 68.464-113.73 12.942-233.276 56.85-233.276 253.032 0 55.898 20.004 101.574 52.76 137.428-5.316 12.9-22.854 64.972 4.952 135.5 0 0 43.006 13.752 140.84-52.49 40.836 11.348 84.636 17.036 128.154 17.234 43.502-0.198 87.336-5.886 128.256-17.234 97.734 66.244 140.656 52.49 140.656 52.49 27.872-70.528 10.35-122.6 5.036-135.5 32.82-35.856 52.694-81.532 52.694-137.428 0-196.654-119.778-239.95-233.79-252.624 18.364-15.89 34.724-47.046 34.724-94.812 0-68.508-0.596-123.644-0.596-140.508 0-13.628 9.222-29.594 35.172-24.566 203.322 67.776 349.842 259.626 349.842 485.768 0 282.78-229.234 511.998-511.992 511.998z" />
</font></defs></svg>

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/static/fonts_7/icomoon.ttf

Binary file not shown.

BIN
public/static/fonts_7/icomoon.woff

Binary file not shown.

48
src/App.js

@ -17,8 +17,7 @@ class App extends Component {
load_config();
listen_darkmode({default: undefined, light: false, dark: true}[window.config.color_scheme]);
this.state={
sidebar_title: null,
sidebar_content: null, // determine status of sidebar
sidebar_stack: [[null,null]], // list of [status, content]
mode: 'list', // list, single, search, attention
search_text: null,
flow_render_key: +new Date(),
@ -41,20 +40,39 @@ class App extends Component {
}
on_pressure() {
if(this.state.sidebar_title!==null)
this.setState((prevState)=>({
sidebar_title: null,
sidebar_content: prevState.sidebar_content,
}));
if(this.state.sidebar_stack.length>1)
this.show_sidebar(null,null,'clear');
else
this.set_mode('list',null);
}
show_sidebar(title,content) {
this.setState({
sidebar_title: title,
sidebar_content: content,
});
show_sidebar(title,content,mode='push') {
if(mode==='push') {
this.setState((prevState)=>({
sidebar_stack: prevState.sidebar_stack.concat([[title,content]]),
}));
} else if(mode==='pop') {
this.setState((prevState)=>{
let ns=prevState.sidebar_stack.slice();
ns.pop();
return {
sidebar_stack: ns,
};
});
} else if(mode==='replace') {
this.setState((prevState)=>{
let ns=prevState.sidebar_stack.slice();
ns.pop();
return {
sidebar_stack: ns.concat([[title,content]]),
};
});
} else if(mode==='clear') {
this.setState({
sidebar_stack: [[null,null]],
});
} else
throw new Error('bad show_sidebar mode');
}
set_mode(mode,search_text) {
@ -102,11 +120,7 @@ class App extends Component {
<br />
</div>
)}</TokenCtx.Consumer>
<Sidebar do_close={()=>{
this.setState({
sidebar_title: null,
});
}} content={this.state.sidebar_content} title={this.state.sidebar_title} />
<Sidebar show_sidebar={this.show_sidebar_bound} stack={this.state.sidebar_stack} />
</TokenCtx.Provider>
);
}

72
src/Flows.js

@ -19,10 +19,12 @@ const QUOTE_BLACKLIST=['23333','233333','66666','666666','10086','10000','100000
window.LATEST_POST_ID=parseInt(localStorage['_LATEST_POST_ID'],10)||0;
const DZ_NAME='洞主';
function load_single_meta(show_sidebar,token,parents) {
return (pid)=>{
let title_elem=<FlowSidebarTitle pid={pid} parents={parents} show_sidebar={show_sidebar} token={token} />;
const color_picker=new ColorPicker();
let color_picker=new ColorPicker();
let title_elem='树洞 #'+pid;
show_sidebar(
title_elem,
<div className="box box-tip">
@ -46,7 +48,8 @@ function load_single_meta(show_sidebar,token,parents) {
info={single.data} replies={replies.data} attention={replies.attention}
token={token} show_sidebar={show_sidebar} color_picker={color_picker}
deletion_detect={localStorage['DELETION_DETECT']==='on'} parents={parents}
/>
/>,
'replace'
)
})
.catch((e)=>{
@ -56,7 +59,8 @@ function load_single_meta(show_sidebar,token,parents) {
<div className="box box-tip">
<p><a onClick={()=>load_single_meta(show_sidebar,token,parents)(pid)}>重新加载</a></p>
<p>{''+e}</p>
</div>
</div>,
'replace'
);
})
};
@ -142,6 +146,11 @@ class FlowItem extends PureComponent {
<div className="flow-item-dot" />
}
<div className="box-header">
{!!this.props.do_filter_name &&
<span className="reply-header-badge clickable" onClick={()=>{this.props.do_filter_name(DZ_NAME);}}>
<span className="icon icon-locate" />
</span>
}
{!!parseInt(props.info.likenum,10) &&
<span className="box-header-badge">
{props.info.likenum}&nbsp;
@ -334,18 +343,20 @@ class FlowSidebar extends PureComponent {
// key for lazyload elem
let view_mode_key=(this.state.rev ? 'y-' : 'n-')+(this.state.filter_name||'null');
let replies_cnt={};
let replies_cnt={[DZ_NAME]:1};
replies_to_show.forEach((r)=>{
if(replies_cnt[r.name]===undefined)
replies_cnt[r.name]=0;
replies_cnt[r.name]++;
});
let main_thread_elem=(
// hide main thread when filtered
let main_thread_elem=(this.state.filter_name && this.state.filter_name!==DZ_NAME) ? null : (
<ClickHandler callback={(e)=>{this.show_reply_bar('',e);}}>
<FlowItem info={this.state.info} attention={this.state.attention} img_clickable={true}
color_picker={this.color_picker} show_pid={show_pid} replies={this.state.replies}
set_variant={(variant)=>{this.set_variant(null,variant);}}
do_filter_name={replies_cnt[DZ_NAME]>1 ? this.set_filter_name.bind(this) : null}
/>
</ClickHandler>
);
@ -364,7 +375,7 @@ class FlowSidebar extends PureComponent {
<a onClick={this.load_replies.bind(this)}>
<span className="icon icon-refresh" /><label>刷新</label>
</a>
{(this.state.replies.length>1 || this.state.rev) &&
{(this.state.replies.length>=1 || this.state.rev) &&
<span>
&nbsp;&nbsp;
<a onClick={this.toggle_rev.bind(this)}>
@ -386,6 +397,15 @@ class FlowSidebar extends PureComponent {
</span>
}
</div>
{!!this.state.filter_name &&
<div className="box box-tip flow-item filter-name-bar">
<p>
<span style={{float: 'left'}}><a onClick={()=>{this.set_filter_name(null)}}>还原</a></span>
<span className="icon icon-locate" />&nbsp;当前只看&nbsp;
<ColoredSpan colors={this.color_picker.get(this.state.filter_name)}>{this.state.filter_name}</ColoredSpan>
</p>
</div>
}
{!this.state.rev &&
main_thread_elem
}
@ -400,15 +420,6 @@ class FlowSidebar extends PureComponent {
{parseInt(this.state.info.reply)-this.state.replies.length} 条回复被删除
</div>
}
{!!this.state.filter_name &&
<div className="box box-tip flow-item filter-name-bar">
<p>
<span style={{float: 'left'}}><a onClick={()=>{this.set_filter_name(null)}}>还原</a></span>
<span className="icon icon-locate" />&nbsp;当前只看&nbsp;
<ColoredSpan colors={this.color_picker.get(this.state.filter_name)}>{this.state.filter_name}</ColoredSpan>
</p>
</div>
}
{replies_to_show.map((reply)=>(
<LazyLoad key={reply.cid+view_mode_key} offset={1500} height="5em" overflow={true} once={true}>
<ClickHandler callback={(e)=>{this.show_reply_bar(reply.name,e);}}>
@ -433,24 +444,6 @@ class FlowSidebar extends PureComponent {
}
}
function FlowSidebarTitle(props) {
let last_pid=props.parents.length ? props.parents[props.parents.length-1] : null;
return (
<span>
树洞&nbsp;
{!!last_pid &&
<span>
<a onClick={()=>load_single_meta(props.show_sidebar,props.token,props.parents.slice(0,-1))(last_pid)}>
#{last_pid}
</a>
&nbsp;&nbsp;
</span>
}
#{props.pid}
</span>
);
}
class FlowItemRow extends PureComponent {
constructor(props) {
super(props);
@ -499,7 +492,7 @@ class FlowItemRow extends PureComponent {
show_sidebar() {
this.props.show_sidebar(
<FlowSidebarTitle pid={this.state.info.pid} parents={[]} show_sidebar={this.props.show_sidebar} token={this.props.token} />,
'树洞 #'+this.state.info.pid,
<FlowSidebar key={+new Date()}
info={this.state.info} replies={this.state.replies} attention={this.state.attention} sync_state={this.setState.bind(this)}
token={this.props.token} show_sidebar={this.props.show_sidebar} color_picker={this.color_picker}
@ -692,11 +685,14 @@ export class Flow extends PureComponent {
if(this.state.mode==='list') {
API.get_list(page,this.props.token)
.then((json)=>{
if(page===1)
if(page===1 && json.data.length) { // update latest_post_id
let max_id=-1;
json.data.forEach((x)=>{
if(parseInt(x.pid,10)>(parseInt(localStorage['_LATEST_POST_ID'],10)||0))
localStorage['_LATEST_POST_ID']=x.pid;
if(parseInt(x.pid,10)>max_id)
max_id=parseInt(x.pid,10);
});
localStorage['_LATEST_POST_ID']=''+max_id;
}
this.setState((prev,props)=>({
chunks: {
title: 'News Feed',

25
src/Sidebar.js

@ -5,26 +5,39 @@ export class Sidebar extends PureComponent {
constructor(props) {
super(props);
this.sidebar_ref=React.createRef();
this.do_close_bound=this.do_close.bind(this);
this.do_back_bound=this.do_back.bind(this);
}
componentDidUpdate(nextProps) {
if(this.props.content!==nextProps.content) {
if(this.props.stack!==nextProps.stack) {
//console.log('sidebar top');
if(this.sidebar_ref.current)
this.sidebar_ref.current.scrollTop=0;
}
}
do_close() {
this.props.show_sidebar(null,null,'clear');
}
do_back() {
this.props.show_sidebar(null,null,'pop');
}
render() {
let [cur_title,cur_content]=this.props.stack[this.props.stack.length-1];
return (
<div className={this.props.title!==null ? 'sidebar-on' : ''}>
<div className="sidebar-shadow" onClick={this.props.do_close} onTouchEnd={(e)=>{e.preventDefault();e.target.click();}} />
<div className={cur_title!==null ? 'sidebar-on' : ''}>
<div className="sidebar-shadow" onClick={this.do_back_bound} onTouchEnd={(e)=>{e.preventDefault();e.target.click();}} />
<div ref={this.sidebar_ref} className="sidebar">
{this.props.content}
{cur_content}
</div>
<div className="sidebar-title">
<a className="no-underline" onClick={this.props.do_close}>&nbsp;<span className="icon icon-back" />&nbsp;</a>
{this.props.title}
<a className="no-underline" onClick={this.do_close_bound}>&nbsp;<span className="icon icon-close" />&nbsp;</a>
{this.props.stack.length>2 &&
<a className="no-underline" onClick={this.do_back_bound}>&nbsp;<span className="icon icon-back" />&nbsp;</a>
}
{cur_title}
</div>
</div>
);

18
src/Title.css

@ -23,7 +23,7 @@
}
.control-btn {
flex: 0 0 2em;
flex: 0 0 4.5em;
text-align: center;
color: black;
border-radius: 5px;
@ -32,6 +32,17 @@
background-color: #555555;
color: white;
}
.control-btn-label {
margin-left: .25em;
}
@media screen and (max-width: 900px) {
.control-btn {
flex: 0 0 2em;
}
.control-btn-label {
display: none;
}
}
.root-dark-mode .control-btn {
color: var(--foreground-dark);
@ -42,11 +53,6 @@
opacity: 1;
}
.control-btn .icon:before {
margin: .5em;
display: inline-block;
}
.control-search {
flex: auto;
color: black;

4
src/Title.js

@ -132,10 +132,12 @@ class ControlBar extends PureComponent {
<div className="control-bar">
<a className="no-underline control-btn" onClick={this.do_refresh_bound}>
<span className="icon icon-refresh" />
<span className="control-btn-label">最新</span>
</a>
{!!token &&
<a className="no-underline control-btn" onClick={this.do_attention_bound}>
<span className="icon icon-attention" />
<span className="control-btn-label">关注</span>
</a>
}
<input className="control-search" value={this.state.search_text} placeholder="搜索 或 #PID"
@ -168,6 +170,7 @@ class ControlBar extends PureComponent {
)
}}>
<span className={'icon icon-'+(token ? 'about' : 'login')} />
<span className="control-btn-label">{token ? '账户' : '登录'}</span>
</a>
{!!token &&
<a className="no-underline control-btn" onClick={()=>{
@ -180,6 +183,7 @@ class ControlBar extends PureComponent {
)
}}>
<span className="icon icon-plus" />
<span className="control-btn-label">发表</span>
</a>
}
</div>

Loading…
Cancel
Save