rust / artshop · Commits

Commit de72b58677cae4c975210868f0710363350c8bbb

Authored by Georg Hopp
1 parent fdf4522c

Still experiment with the view

Inline Side-by-side
Showing 5 changed files with 73 additions and 35 deletions
1 -use actix_web::Error; 1 +use actix_web::{Error, http::StatusCode};
2 use anyhow::Result; 2 use anyhow::Result;
3 3
4 pub async fn root() -> Result<actix_files::NamedFile, Error> { 4 pub async fn root() -> Result<actix_files::NamedFile, Error> {
@@ -10,7 +10,8 @@ pub async fn apidoc() -> Result<actix_files::NamedFile, Error> { @@ -10,7 +10,8 @@ pub async fn apidoc() -> Result<actix_files::NamedFile, Error> {
10 } 10 }
11 11
12 pub async fn p404() -> Result<actix_files::NamedFile, Error> { 12 pub async fn p404() -> Result<actix_files::NamedFile, Error> {
13 - Ok(actix_files::NamedFile::open("static/404.html")?) 13 + Ok( actix_files::NamedFile::open("static/404.html")?
  14 + . set_status_code(StatusCode::NOT_FOUND) )
14 } 15 }
15 16
16 pub async fn favicon() -> Result<actix_files::NamedFile, Error> { 17 pub async fn favicon() -> Result<actix_files::NamedFile, Error> {
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 - <title>artshop-frontend</title> 5 + <title>Stefanie's Artshop</title>
6 <link rel="stylesheet" href="/static/style.css"> 6 <link rel="stylesheet" href="/static/style.css">
7 </head> 7 </head>
8 <body> 8 <body>
1 -.input { 1 +.markdown {
2 float: left; 2 float: left;
3 padding: 1em; 3 padding: 1em;
4 border-radius: .5em; 4 border-radius: .5em;
@@ -6,49 +6,64 @@ @@ -6,49 +6,64 @@
6 background: #f7f7f7; 6 background: #f7f7f7;
7 } 7 }
8 8
9 -.input p { 9 +.markdown p {
10 text-align: justify; 10 text-align: justify;
11 text-indent: .5em; 11 text-indent: .5em;
12 margin-block: .5em; 12 margin-block: .5em;
13 } 13 }
14 14
15 -.input > div:first-child {  
16 - height: 10em; 15 +.markdown > div:first-child {
  16 + position: fixed;
  17 + width: inherit;
  18 + z-index: 10;
17 } 19 }
18 20
19 -.input > div:first-child pre { 21 +.markdown > div:first-child > div {
  22 + position: relative;
  23 + left: .5em;
  24 + width: inherit;
  25 +}
  26 +
  27 +.markdown > div:first-child > pre {
20 white-space: pre-wrap; 28 white-space: pre-wrap;
21 - height: 100%;  
22 - width: 100%;  
23 - overflow-y: scroll; 29 + height: 15em;
  30 + width: calc(100% - 10px);
  31 + overflow-y: auto;
24 overflow-x: hidden; 32 overflow-x: hidden;
25 background: #ffffff; 33 background: #ffffff;
26 border-radius: .35em; 34 border-radius: .35em;
27 border: 2px solid #bbb; 35 border: 2px solid #bbb;
28 - padding: 4px; 36 + margin: 2px 0px;
  37 + opacity: .95;
29 } 38 }
30 39
31 -.input > div:last-child {  
32 - position: relative; 40 +.markdown > div:first-child > div > div {
  41 + display: inline;
33 } 42 }
34 43
35 -.input > div:last-child > button { 44 +.markdown > div:first-child > div ul {
  45 + height: 15em;
  46 + list-style-type: none;
  47 + margin: 2px 0px;
  48 + overflow-y: auto;
  49 + padding-left: 0px;
36 position: absolute; 50 position: absolute;
37 - right: .1em; 51 + scroll-behavior: auto;
  52 + top: 1.8em;
38 } 53 }
39 54
40 -.input blockquote { 55 +.markdown blockquote {
41 border-left: 5px solid #ccc; 56 border-left: 5px solid #ccc;
42 margin: .5em 10px; 57 margin: .5em 10px;
43 padding: .5em 10px; 58 padding: .5em 10px;
44 } 59 }
45 60
46 -.input blockquote p { 61 +.markdown blockquote p {
47 text-align: left; 62 text-align: left;
48 text-indent: 0; 63 text-indent: 0;
49 margin-block: 0; 64 margin-block: 0;
50 } 65 }
51 66
52 -.footnote-definition > * { 67 +.markdown .footnote-definition > * {
53 display: inline; 68 display: inline;
54 } 69 }
@@ -14,10 +14,9 @@ impl MarkdownState { @@ -14,10 +14,9 @@ impl MarkdownState {
14 Either::Left(dom_js) => { 14 Either::Left(dom_js) => {
15 let node = &dom_js.to_owned().dyn_into::<Node>()?; 15 let node = &dom_js.to_owned().dyn_into::<Node>()?;
16 ( node . first_child().unwrap() 16 ( node . first_child().unwrap()
17 - . first_child().unwrap() 17 + . child_nodes().get(1).unwrap()
18 . dyn_into::<HtmlElement>()? 18 . dyn_into::<HtmlElement>()?
19 , node . child_nodes().get(1).unwrap() 19 , node . child_nodes().get(1).unwrap()
20 - . child_nodes().get(1).unwrap()  
21 . dyn_into::<HtmlElement>()? ) 20 . dyn_into::<HtmlElement>()? )
22 }, 21 },
23 _ => Err(JsValue::UNDEFINED)?, 22 _ => Err(JsValue::UNDEFINED)?,
@@ -25,25 +25,45 @@ pub(super) fn markdown_view( tx_logic: broadcast::Sender<MarkdownLogic> @@ -25,25 +25,45 @@ pub(super) fn markdown_view( tx_logic: broadcast::Sender<MarkdownLogic>
25 . sink() 25 . sink()
26 . contra_map(|_| MarkdownLogic::Discard); 26 . contra_map(|_| MarkdownLogic::Discard);
27 27
28 - let toggle_map = rx_toggle  
29 - . map(|t| match t {  
30 - true => String::from("block"),  
31 - false => String::from("none") }); 28 + let (tx_toggle_editor, rx_toggle_editor) = broadcast::bounded(1);
  29 + let ( tx_toggle_top_padding
  30 + , rx_toggle_top_padding) = broadcast::bounded(1);
  31 +
  32 + /*
  33 + * This takes a bool toggle value and turns it into various view changes
  34 + * by filling internal channels accordingly...
  35 + * Is that the way to go?
  36 + */
  37 + mogwai::spawn( rx_toggle
  38 + . for_each(move |toggle| {
  39 + let tx_toggle_editor = tx_toggle_editor.clone();
  40 + let tx_toggle_top_padding = tx_toggle_top_padding.clone();
  41 + async move {
  42 + match toggle {
  43 + true => {
  44 + tx_toggle_editor . broadcast(String::from("block"))
  45 + . await.unwrap();
  46 + tx_toggle_top_padding . broadcast(String::from("13em"))
  47 + . await.unwrap();
  48 + },
  49 + false => {
  50 + tx_toggle_editor . broadcast(String::from("none"))
  51 + . await.unwrap();
  52 + tx_toggle_top_padding . broadcast(String::from("0"))
  53 + . await.unwrap();
  54 + },
  55 + }
  56 + }})
  57 + );
32 58
33 builder! { 59 builder! {
34 - <div class="input" 60 + <div class="markdown"
35 style:width="33%" 61 style:width="33%"
36 post:build=move |_: &mut Dom| { 62 post:build=move |_: &mut Dom| {
37 tx_logic.try_broadcast(MarkdownLogic::Choose(None)).unwrap(); 63 tx_logic.try_broadcast(MarkdownLogic::Choose(None)).unwrap();
38 } 64 }
39 capture:view=tx_dom.sink()> 65 capture:view=tx_dom.sink()>
40 - <div contenteditable="true"  
41 - style:cursor="text"  
42 - on:input=input_filter  
43 - style:display=("none", toggle_map)>  
44 - <pre></pre>  
45 - </div>  
46 - <div> 66 + <div style:cursor="text">
47 <div> 67 <div>
48 <div> 68 <div>
49 <button on:click=select_filter>{select_icon()}</button> 69 <button on:click=select_filter>{select_icon()}</button>
@@ -54,9 +74,12 @@ pub(super) fn markdown_view( tx_logic: broadcast::Sender<MarkdownLogic> @@ -54,9 +74,12 @@ pub(super) fn markdown_view( tx_logic: broadcast::Sender<MarkdownLogic>
54 <button on:click=discard_filter>{undo_point_icon()}</button> 74 <button on:click=discard_filter>{undo_point_icon()}</button>
55 <button on:click=toggle_filter>{edit_icon()}</button> 75 <button on:click=toggle_filter>{edit_icon()}</button>
56 </div> 76 </div>
57 - <div></div>  
58 - <div></div> 77 + <pre contenteditable="true"
  78 + style:display=("none", rx_toggle_editor)
  79 + on:input=input_filter>
  80 + </pre>
59 </div> 81 </div>
  82 + <div style:padding_top=("0", rx_toggle_top_padding)></div>
60 </div> 83 </div>
61 } 84 }
62 } 85 }
Please register or login to post a comment