From 3f2b97e81cbe8b6c4cd0fffc6d0b44c0a8c4e748 Mon Sep 17 00:00:00 2001 From: Pavlo Myroniuk Date: Wed, 25 Dec 2024 12:48:02 +0200 Subject: [PATCH] Small style improvements (#67) * feat(front): small style improvements; * feat(front): small style improvements; --- dataans/public/css/notes/editor.css | 5 +-- dataans/public/css/notes/note.css | 42 +++++++++++++++++++++--- dataans/public/icons/cancel-dark.png | Bin 0 -> 454 bytes dataans/public/icons/copy-dark.png | Bin 0 -> 398 bytes dataans/public/icons/file.png | Bin 191 -> 316 bytes dataans/public/icons/folder.png | Bin 290 -> 299 bytes dataans/src/common/file.rs | 6 ++-- dataans/src/notes/md_node/code_block.rs | 17 ++++++---- 8 files changed, 55 insertions(+), 15 deletions(-) create mode 100644 dataans/public/icons/cancel-dark.png create mode 100644 dataans/public/icons/copy-dark.png diff --git a/dataans/public/css/notes/editor.css b/dataans/public/css/notes/editor.css index 17722fd..17af2c9 100644 --- a/dataans/public/css/notes/editor.css +++ b/dataans/public/css/notes/editor.css @@ -24,14 +24,15 @@ gap: 0.2em; flex-wrap: wrap; flex-grow: 1; + width: 100%; } .files-file { padding: 0.2em; - margin: 0.15em; font-size: 0.9em; border-radius: 0.2em; - background-color: var(--editor-file-background-color); + background-color: var(--note-link-color); + color: var(--note-inline-background-color); display: inline-flex; gap: 0.1em; justify-content: flex-start; diff --git a/dataans/public/css/notes/note.css b/dataans/public/css/notes/note.css index 1f5cea0..76e1cae 100644 --- a/dataans/public/css/notes/note.css +++ b/dataans/public/css/notes/note.css @@ -55,19 +55,22 @@ .inline-code { font-family: "JetBrains Mono", monospace; cursor: pointer; - background-color: var(--note-inline-background-color); - border: 2px solid var(--note-inline-background-color); box-sizing: border-box; padding: 0 0.2em 0 0.2em; border-radius: 0.2em; + + background-color: var(--note-link-color); + color: var(--note-inline-background-color); } .inline-code:hover { - border-color: var(--note-link-color); + background-color: var(--note-inline-background-color); + color: var(--note-text-color); } .inline-code:active { - background-color: var(--note-link-color); + background-color: var(--note-inline-background-color); + color: var(--note-text-color); } .note .quote { @@ -146,6 +149,37 @@ align-items: flex-start; gap: 0; border-radius: 0.2em; + position: relative; +} + +.note .note-code-block-meta-container { + position: absolute; + top: 0; + right: 0; +} + +.code-block-tool { + background-color: var(--note-link-color); + height: 2em; + padding: 0.2em; + border-radius: 0.2em; + border: 1px solid transparent; + transition: 0.1s; + opacity: 0; +} + +.code-block-tool:hover { + opacity: 1; + cursor: pointer; +} + +.code-block-tool img { + height: 100%; + width: auto; +} + +.code-block-tool img:hover { + cursor: pointer; } .note .note-code-block .note-code-block-meta { diff --git a/dataans/public/icons/cancel-dark.png b/dataans/public/icons/cancel-dark.png new file mode 100644 index 0000000000000000000000000000000000000000..d0bdc6995ce17696755c39c840ce1f792f9ad43e GIT binary patch literal 454 zcmV;%0XhDOP)+uTa*s8hop@5cS+D!=0PA*00!eONnE;YqV0{byfhr@>2PobP zWoA^iN(qqc1Tr(5dt!<*)sd);2!s!PH4b^L4m*(UX9ZlD-)|%1LL9u^OMk2TI+Q5> zTjFmOaAxIObooBAj31*XNqUjl%V4;%>Hx*(IUB1kuspaTs7Ut}u8QNJS`Fw7!!QiPFbp>iU+-vx(!LEuhyVZp07*qoM6N<$g1|VuMF0Q* literal 0 HcmV?d00001 diff --git a/dataans/public/icons/copy-dark.png b/dataans/public/icons/copy-dark.png new file mode 100644 index 0000000000000000000000000000000000000000..f99de39b50183503542d0dd0cbbf54084bd7761c GIT binary patch literal 398 zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC&H|6fVg?3oVGw3ym^DX&fq~J% z)5S5QV$RzczFtQh1X?#=-g($ziT2+EOG9+;oSpiN;gNy2c$`Q0qU8lK=Ve>uv-}Lu*RN)eJa4jRkB^kpVx@9d z);9C`ITdFVK1$9$!la>LX!&`o$AuHk$?KOde!Az*|18E+x`9p&%e;KvewSe~@yOUG zZ1{JbU_snH(e|qNCHGC4SnAFcy`NEcog*eDZYxVA$K6gPpaKimB@Q=^sueKZX57Sa z)Um81QCEaDvL!*Vt4YUc1Ba`lnBt#qj>3KN(LZ+X@YkF0_PUbWwCC4lm}Unto%`%t z)VM8n?&Rsu-yCk9ziXYfx84WUhYH*IHhEX8?T}A0-cxz?LlmQ~<@>+AoM-kk$E5FX n56Xq(>=m2t^B&IVvt&qkcQxvF_f&CU05f>H`njxgN@xNA9CoFE literal 0 HcmV?d00001 diff --git a/dataans/public/icons/file.png b/dataans/public/icons/file.png index 38547158ea98065a8ef1b8a41c6c4f52f9238a2e..ff0fc01f2decfa86e129f3ea1680452f4be4e8a2 100644 GIT binary patch literal 316 zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTC&H|6fVg?3oVGw3ym^DWNDEQ9P z#WAE}&f6J=e1{BpT&wwRB;6EME>f|OQ+97$sJ?oFhB!m1)2X1Pg}E*NCT}`ccXsxz zQicZCOAn8zSgBkS_pCFQz2^OVpUvyVl^-=Yg=BrEf1l~UZeTGcWk05{q7FTt}U>bL*#2R64^Bi;uxb$-33bD-v)`nkpbKUKc@{dnExgnb$R nq~t7BFJ{h5-Dbm3e~$hAD~SnbE~x(m`kcYj)z4*}Q$iB}Nfmlp delta 177 zcmdnPw4YJ2Gr-TCmrII^fq{Y7)59eQNK1e)2OE%lP;UEUqM}57p{I*uNX4ADSADq} z95`4XSjHXCx*1thrD@%9agnRQ4`Ihv{yV*OJ<`X2#CD`8JrWft&eCIK$WGWXb>d>n zPiz9pkDdlHL@r@cXbxd?nP|;0XP-gARJJ=`x`4=TtI|0c8Ef(E7b({SuI)Ad{rP)3 abK3Tqam&-rZvr}k!IRz9&t;ucLK6UhtU@9H diff --git a/dataans/public/icons/folder.png b/dataans/public/icons/folder.png index 2c706a2a7d8e9c238f841bab9da868116bff6e0f..e4a4592e8598398ac1e920cd2e2457e040735b55 100644 GIT binary patch delta 250 zcmZ3)w3=yxW&K@G7srr_Id5n9ay1(WwA#AwKAo%-JB{m^czxqebRu{vb6rRS<(yw{( w`d6Ljtlbrcx275RoqH{@S*2aQMW9G)-w*FQ(Ji-3JQ;w%)78&qol`;+0HnZm5&!@I delta 241 zcmZ3@w1{bfW&IUT7srr_Id5k;ay2{fxZ1k!ekWPAcb=Pxed9fEu5IEoCcS%=bw$$n zLH&fehwA_3_*@rs;!xxc`Kq=^ZIS$eOQ$MJE;OE zI2a@_A8g=dLE$tDn=N?nCEl7`_sTUVM {if edit_mode { view! { - + } } else { @@ -32,11 +32,11 @@ pub fn File(file: File, edit_mode: bool, #[prop(into)] remove_file: Callback + } }} - {file.name.clone()} + {file.name.clone()} } } diff --git a/dataans/src/notes/md_node/code_block.rs b/dataans/src/notes/md_node/code_block.rs index 3df48d1..a554de1 100644 --- a/dataans/src/notes/md_node/code_block.rs +++ b/dataans/src/notes/md_node/code_block.rs @@ -19,12 +19,17 @@ pub fn CodeBlock(code: String, lang: String) -> impl IntoView { view! {
-
- {lang} - +
+
"Parsing code...." }