From be81eaefa526fa80e04166e86978e3a95263b4e3 Mon Sep 17 00:00:00 2001 From: Alec Di Vito Date: Thu, 6 Jun 2024 18:42:20 -0400 Subject: feat: Added HTML and Javascript progress bar when uploading files --- data/style.scss | 156 +++++++++++++++++++++++++++++++++++++++++++++ data/themes/archlinux.scss | 8 +++ data/themes/monokai.scss | 8 +++ data/themes/squirrel.scss | 8 +++ data/themes/zenburn.scss | 8 +++ 5 files changed, 188 insertions(+) (limited to 'data') diff --git a/data/style.scss b/data/style.scss index 32d2989..40b53a4 100644 --- a/data/style.scss +++ b/data/style.scss @@ -27,6 +27,143 @@ body { padding: 1.5rem 5rem; } +$upload_container_height: 18rem; + +.upload_area { + display: block; + position: fixed; + bottom: 1rem; + right: -105%; + color: #ffffff; + box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3); + background: linear-gradient(135deg, #73a5ff, #5477f5); + padding: 0px; + margin: 0px; + opacity: 1; // Change this + transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); + border-radius: 4px; + text-decoration: none; + min-width: 400px; + max-width: 600px; + z-index: 2147483647; + max-height: $upload_container_height; + overflow: hidden; + + &.active { + right: 1rem; + } +} + +.upload_container { + max-height: $upload_container_height; + display: flex; + flex-direction: column; +} + +.upload_header { + padding: 1rem; + background-color: var(--upload_modal_header_background); + color: var(--upload_modal_header_color); +} + +.upload_action { + background-color: var(--upload_modal_sub_header_background); + color: var(--upload_modal_header_color); + padding: 0.25rem 1rem; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 0.75em; + font-weight: 500; +} + +.upload_cancel { + background: none; + border: none; + font-weight: 500; + cursor: pointer; +} + +.upload_files { + padding: 0px; + margin: 0px; + flex: 1; + overflow-y: auto; + max-height:inherit; +} + +.upload_file_list { + background-color: var(--upload_modal_file_item_background); + color: var(--upload_modal_file_item_color); + padding: 0px; + margin: 0px; + list-style: none; + list-style: none; + display: flex; + flex-direction: column; + align-items: stretch; + overflow-y: scroll; +} + +.upload_file_container { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem 1rem calc(1rem - 2px) 1rem; +} + +.upload_file_action { + display: flex; + justify-content: right; +} + +.file_progress_bar { + width: 0%; + border-top: 2px solid var(--progress_bar_background); + transition: width 0.25s ease; + + &.cancelled { + border-color: var(--error_color); + } + + &.failed { + border-color: var(--error_color); + } + + &.complete { + border-color: var(--success_color); + } +} + +.upload_file_text { + font-size: 0.80em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &.cancelled { + text-decoration: line-through; + } + + &.failed { + text-decoration: line-through; + } +} + +.file_cancel_upload { + padding-left: 0.25rem; + font-size: 1em; + cursor: pointer; + border: none; + background: inherit; + font-size: 1em; + color: var(--error_color); + + &.complete { + color: var(--success_color); + } +} + .title { word-break: break-all; } @@ -524,6 +661,25 @@ th span.active span { .back { right: 1.5rem; } + + $upload_container_height_mobile: 60vh; + + .upload_area { + width: 100vw; + max-height: $upload_container_height_mobile; + max-width: unset; + min-width: unset; + bottom: 0; + + &.active { + right: 0; + left: 0; + } + } + + .upload_container { + max-height: $upload_container_height_mobile; + } } @media (max-width: 600px) { diff --git a/data/themes/archlinux.scss b/data/themes/archlinux.scss index f95b8bb..16020a0 100644 --- a/data/themes/archlinux.scss +++ b/data/themes/archlinux.scss @@ -45,6 +45,14 @@ $generate_default: true !default; --size_text_color: #fefefe; --error_color: #e44b4b; --footer_color: #8eabcc; + --success_color: #52e28a; + --upload_modal_header_background: #5294e2; + --upload_modal_header_color: #eeeeee; + --upload_modal_sub_header_background: #35547a; + --upload_modal_file_item_background: #eeeeee; + --upload_modal_file_item_color: #111111; + --upload_modal_file_upload_complete_background: #cccccc; + --progress_bar_background: #5294e2; }; @if $generate_default { diff --git a/data/themes/monokai.scss b/data/themes/monokai.scss index 4a47794..60c45e7 100644 --- a/data/themes/monokai.scss +++ b/data/themes/monokai.scss @@ -45,6 +45,14 @@ $generate_default: true !default; --size_text_color: #f8f8f2; --error_color: #d02929; --footer_color: #56c9df; + --success_color: #52e28a; + --upload_modal_header_background: #75715e; + --upload_modal_header_color: #eeeeee; + --upload_modal_sub_header_background: #323129; + --upload_modal_file_item_background: #eeeeee; + --upload_modal_file_item_color: #111111; + --upload_modal_file_upload_complete_background: #cccccc; + --progress_bar_background: #5294e2; }; @if $generate_default { diff --git a/data/themes/squirrel.scss b/data/themes/squirrel.scss index 9eb572e..7ec47e6 100644 --- a/data/themes/squirrel.scss +++ b/data/themes/squirrel.scss @@ -45,6 +45,14 @@ $generate_default: true !default; --size_text_color: #ffffff; --error_color: #d02424; --footer_color: #898989; + --success_color: #52e28a; + --upload_modal_header_background: #323232; + --upload_modal_header_color: #eeeeee; + --upload_modal_sub_header_background: #171616; + --upload_modal_file_item_background: #eeeeee; + --upload_modal_file_item_color: #111111; + --upload_modal_file_upload_complete_background: #cccccc; + --progress_bar_background: #5294e2; }; @if $generate_default { diff --git a/data/themes/zenburn.scss b/data/themes/zenburn.scss index 9eb4d11..efb2e83 100644 --- a/data/themes/zenburn.scss +++ b/data/themes/zenburn.scss @@ -45,6 +45,14 @@ $generate_default: true !default; --size_text_color: #efefef; --error_color: #d06565; --footer_color: #bfaf9f; + --success_color: #52e28a; + --upload_modal_header_background: #7f9f7f; + --upload_modal_header_color: #eeeeee; + --upload_modal_sub_header_background: #404e40; + --upload_modal_file_item_background: #eeeeee; + --upload_modal_file_item_color: #111111; + --upload_modal_file_upload_complete_background: #cccccc; + --progress_bar_background: #5294e2; }; @if $generate_default { -- cgit v1.2.3 From 413a63a60307bdf60229670b0f858963604d62a3 Mon Sep 17 00:00:00 2001 From: Alec Di Vito Date: Sun, 16 Feb 2025 23:35:26 -0500 Subject: feat: implement temporary file uploads and tweak mobile design --- data/style.scss | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) (limited to 'data') diff --git a/data/style.scss b/data/style.scss index dc1e585..2e02c44 100644 --- a/data/style.scss +++ b/data/style.scss @@ -52,6 +52,10 @@ $upload_container_height: 18rem; &.active { right: 1rem; } + + #upload-toggle { + transition: transform 0.3s ease; + } } .upload_container { @@ -61,11 +65,19 @@ $upload_container_height: 18rem; } .upload_header { + display: flex; + justify-content: space-between; + align-items: center; padding: 1rem; background-color: var(--upload_modal_header_background); color: var(--upload_modal_header_color); } +.upload_header svg { + width: 24px; + height: 24px; +} + .upload_action { background-color: var(--upload_modal_sub_header_background); color: var(--upload_modal_header_color); @@ -89,7 +101,7 @@ $upload_container_height: 18rem; margin: 0px; flex: 1; overflow-y: auto; - max-height:inherit; + max-height: inherit; } .upload_file_list { @@ -224,7 +236,7 @@ a.file, color: var(--file_link_color); &:visited { - color: var(--file_link_color_visited) + color: var(--file_link_color_visited); } } @@ -667,14 +679,16 @@ th span.active span { right: 1.5rem; } - $upload_container_height_mobile: 60vh; + $upload_container_height_mobile: 100vh; .upload_area { - width: 100vw; + width: 100%; + height: 136px; max-height: $upload_container_height_mobile; max-width: unset; min-width: unset; bottom: 0; + transition: height 0.3s ease; &.active { right: 0; -- cgit v1.2.3 From 577044ddbd70f5f128512c1a021329fb4c7e7eb3 Mon Sep 17 00:00:00 2001 From: Alec Di Vito Date: Sat, 22 Feb 2025 13:44:16 -0500 Subject: feat: address comments; add in new argument (`temp-directory`); add comments to upload code; add tests --- data/style.scss | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'data') diff --git a/data/style.scss b/data/style.scss index 2e02c44..828146a 100644 --- a/data/style.scss +++ b/data/style.scss @@ -54,7 +54,9 @@ $upload_container_height: 18rem; } #upload-toggle { + display: none; transition: transform 0.3s ease; + cursor: pointer; } } @@ -694,6 +696,11 @@ th span.active span { right: 0; left: 0; } + + #upload-toggle { + display: block; + transition: transform 0.3s ease; + } } .upload_container { -- cgit v1.2.3