From b3a8e5b0ddd39d77d39ed534500227d97a6378ba Mon Sep 17 00:00:00 2001 From: Jakob Pinterits Date: Sat, 14 Sep 2024 08:46:37 +0200 Subject: [PATCH] renamed & restyled FileChooserArea --- frontend/code/componentManagement.ts | 6 +-- .../{uploadArea.ts => fileChooserArea.ts} | 53 ++++++++++--------- frontend/css/style.scss | 46 ++++++++-------- rio/components/__init__.py | 2 +- .../{upload_area.py => file_chooser_area.py} | 6 +-- 5 files changed, 58 insertions(+), 55 deletions(-) rename frontend/code/components/{uploadArea.ts => fileChooserArea.ts} (90%) rename rio/components/{upload_area.py => file_chooser_area.py} (88%) diff --git a/frontend/code/componentManagement.ts b/frontend/code/componentManagement.ts index a721d10f..79b771e1 100644 --- a/frontend/code/componentManagement.ts +++ b/frontend/code/componentManagement.ts @@ -2,6 +2,7 @@ import { AspectRatioContainerComponent } from './components/aspectRatioContainer import { BuildFailedComponent } from './components/buildFailed'; import { ButtonComponent, IconButtonComponent } from './components/buttons'; import { CalendarComponent } from './components/calendar'; +import { callRemoteMethodDiscardResponse } from './rpc'; import { CardComponent } from './components/card'; import { CheckboxComponent } from './components/checkbox'; import { ClassContainerComponent } from './components/classContainer'; @@ -19,6 +20,7 @@ import { DevToolsConnectorComponent } from './components/devToolsConnector'; import { DialogContainerComponent } from './components/dialog_container'; import { DrawerComponent } from './components/drawer'; import { DropdownComponent } from './components/dropdown'; +import { FileChooserAreaComponent } from './components/fileChooserArea'; import { FlowComponent as FlowContainerComponent } from './components/flowContainer'; import { FundamentalRootComponent } from './components/fundamentalRootComponent'; import { GridComponent } from './components/grid'; @@ -58,10 +60,8 @@ import { SwitcherComponent } from './components/switcher'; import { TableComponent } from './components/table'; import { TextComponent } from './components/text'; import { TextInputComponent } from './components/textInput'; -import { UploadAreaComponent } from './components/uploadArea'; import { ThemeContextSwitcherComponent } from './components/themeContextSwitcher'; import { TooltipComponent } from './components/tooltip'; -import { callRemoteMethodDiscardResponse } from './rpc'; const COMPONENT_CLASSES = { 'AspectRatioContainer-builtin': AspectRatioContainerComponent, @@ -82,6 +82,7 @@ const COMPONENT_CLASSES = { 'DialogContainer-builtin': DialogContainerComponent, 'Drawer-builtin': DrawerComponent, 'Dropdown-builtin': DropdownComponent, + 'FileChooserArea-builtin': FileChooserAreaComponent, 'FlowContainer-builtin': FlowContainerComponent, 'FundamentalRootComponent-builtin': FundamentalRootComponent, 'Grid-builtin': GridComponent, @@ -124,7 +125,6 @@ const COMPONENT_CLASSES = { 'TextInput-builtin': TextInputComponent, 'ThemeContextSwitcher-builtin': ThemeContextSwitcherComponent, 'Tooltip-builtin': TooltipComponent, - 'UploadArea-builtin': UploadAreaComponent, }; globalThis.COMPONENT_CLASSES = COMPONENT_CLASSES; diff --git a/frontend/code/components/uploadArea.ts b/frontend/code/components/fileChooserArea.ts similarity index 90% rename from frontend/code/components/uploadArea.ts rename to frontend/code/components/fileChooserArea.ts index 63950669..5b3df3ef 100644 --- a/frontend/code/components/uploadArea.ts +++ b/frontend/code/components/fileChooserArea.ts @@ -79,14 +79,14 @@ const CATEGORY_TO_METADATA = { video: ['videos', 'material/movie'], }; -type UploadAreaState = ComponentState & { - _type_: 'UploadArea-builtin'; +type FileChooserAreaState = ComponentState & { + _type_: 'FileChooserArea-builtin'; content?: string | null; file_types?: string[]; }; -export class UploadAreaComponent extends ComponentBase { - state: Required; +export class FileChooserAreaComponent extends ComponentBase { + state: Required; private fileInput: HTMLInputElement; private iconElement: HTMLElement; @@ -100,30 +100,32 @@ export class UploadAreaComponent extends ComponentBase { createElement(): HTMLElement { // Create the element let element = document.createElement('div'); - element.classList.add('rio-upload-area'); + element.classList.add('rio-file-chooser-area'); // Create the icon element but don't add it this.iconElement = document.createElement('div'); - this.iconElement.classList.add('rio-upload-area-icon'); + this.iconElement.classList.add('rio-file-chooser-area-icon'); // Create the child container this.childContainer = document.createElement('div'); - this.childContainer.classList.add('rio-upload-area-child-container'); + this.childContainer.classList.add( + 'rio-file-chooser-area-child-container' + ); element.appendChild(this.childContainer); - // Create the title element, but don't add it - this.titleElement = document.createElement('div'); - this.titleElement.classList.add('rio-upload-area-title'); - - // Same for the file types element - this.fileTypesElement = document.createElement('div'); - this.fileTypesElement.classList.add('rio-upload-area-file-types'); - // Create the progress element this.progressElement = document.createElement('div'); - this.progressElement.classList.add('rio-upload-area-progress-bar'); + this.progressElement.classList.add('rio-file-chooser-area-progress'); element.appendChild(this.progressElement); + // Create the title element, but don't add it + this.titleElement = document.createElement('div'); + this.titleElement.classList.add('rio-file-chooser-area-title'); + + // Same for the file types element + this.fileTypesElement = document.createElement('div'); + this.fileTypesElement.classList.add('rio-file-chooser-area-file-types'); + // A hidden file input this.fileInput = document.createElement('input'); this.fileInput.type = 'file'; @@ -155,7 +157,7 @@ export class UploadAreaComponent extends ComponentBase { element.style.setProperty('--x', `${x}px`); element.style.setProperty('--y', `${y}px`); - element.classList.add('rio-upload-area-file-hover'); + element.classList.add('rio-file-chooser-area-file-hover'); }, false ); @@ -167,7 +169,9 @@ export class UploadAreaComponent extends ComponentBase { (event) => { event.preventDefault(); event.stopPropagation(); - element.classList.remove('rio-upload-area-file-hover'); + element.classList.remove( + 'rio-file-chooser-area-file-hover' + ); }, false ); @@ -207,7 +211,7 @@ export class UploadAreaComponent extends ComponentBase { } updateElement( - deltaState: UploadAreaState, + deltaState: FileChooserAreaState, latentComponents: Set ): void { super.updateElement(deltaState, latentComponents); @@ -304,7 +308,7 @@ export class UploadAreaComponent extends ComponentBase { // Column for the title and file types let column = document.createElement('div'); - column.classList.add('rio-upload-area-column'); + column.classList.add('rio-file-chooser-area-column'); this.childContainer.appendChild(column); // Title @@ -324,7 +328,7 @@ export class UploadAreaComponent extends ComponentBase { // as visual indicator that the area is clickable. let buttonOuter = document.createElement('div'); buttonOuter.classList.add( - 'rio-upload-area-button', + 'rio-file-chooser-area-button', 'rio-button', 'rio-shape-rounded' ); @@ -366,11 +370,8 @@ export class UploadAreaComponent extends ComponentBase { if (event.lengthComputable) { const progress = event.loaded / event.total; - this.progressElement.style.opacity = '1'; - this.progressElement.style.setProperty( - '--progress', - `${progress * 100}%` - ); + this.progressElement.style.opacity = '0.2'; + this.progressElement.style.width = `${progress * 100}%`; } }; diff --git a/frontend/css/style.scss b/frontend/css/style.scss index 1ae13367..a5fa2c21 100644 --- a/frontend/css/style.scss +++ b/frontend/css/style.scss @@ -3793,18 +3793,18 @@ html.picking-component * { } // Upload Area -.rio-upload-area { +.rio-file-chooser-area { pointer-events: auto; position: relative; - cursor: pointer; + display: flex; flex-direction: column; align-items: stretch; - justify-content: stretch; + justify-content: start; - // To round the progress bar + // To round the progress indicator overflow: hidden; color: var(--rio-local-fg); @@ -3813,52 +3813,54 @@ html.picking-component * { border-radius: var(--rio-global-corner-radius-medium); } -.rio-upload-area:not(.rio-upload-area-file-hover):hover { +.rio-file-chooser-area:not(.rio-file-chooser-area-file-hover):hover { background-color: var(--rio-local-bg-active); } -.rio-upload-area-child-container { +.rio-file-chooser-area-child-container { display: flex; - align-items: center; + align-items: start; gap: 1rem; padding: 1rem; } -.rio-upload-area-icon { +.rio-file-chooser-area-icon { width: 3.5rem; height: 3.5rem; } -.rio-upload-area-column { +.rio-file-chooser-area-column { flex-grow: 1; display: flex; flex-direction: column; gap: 0.3rem; } -.rio-upload-area-title { -} - -.rio-upload-area-file-types { +.rio-file-chooser-area-file-types { opacity: 0.5; } -.rio-upload-area-button > div { +.rio-file-chooser-area-button > div { color: var(--rio-local-text-color); padding: 0.5rem 1rem; font-weight: bold; } -.rio-upload-area-progress-bar { - flex-grow: 0; +.rio-file-chooser-area-progress { + pointer-events: none; + position: absolute; - height: 0.2rem; + left: 0rem; + top: 0; + bottom: 0; + + border-radius: 50%; opacity: 0; transition: opacity 0.3s; } -.rio-upload-area-progress-bar::after { +.rio-file-chooser-area-progress::after { content: ''; display: block; position: relative; @@ -3872,12 +3874,12 @@ html.picking-component * { // transition: width 0.3s ease-in-out; } -.rio-upload-area-file-hover { +.rio-file-chooser-area-file-hover { cursor: copy; color: var(--rio-local-level-2-bg); } -.rio-upload-area::before { +.rio-file-chooser-area::before { pointer-events: none; content: ''; @@ -3899,10 +3901,10 @@ html.picking-component * { transition: opacity 0.3s; } -.rio-upload-area-file-hover::before { +.rio-file-chooser-area-file-hover::before { opacity: 0.2; } -.rio-upload-area > input { +.rio-file-chooser-area > input { display: none; } diff --git a/rio/components/__init__.py b/rio/components/__init__.py index 8c7b196c..61e7fc3b 100644 --- a/rio/components/__init__.py +++ b/rio/components/__init__.py @@ -16,6 +16,7 @@ from .devel_component import * from .dialog_container import * from .drawer import * from .dropdown import * +from .file_chooser_area import * from .flow_container import * from .grid import * from .html import * @@ -58,7 +59,6 @@ from .text import * from .text_input import * from .theme_context_switcher import * from .tooltip import * -from .upload_area import * from .website import * assert ( diff --git a/rio/components/upload_area.py b/rio/components/file_chooser_area.py similarity index 88% rename from rio/components/upload_area.py rename to rio/components/file_chooser_area.py index ce6aa764..83120153 100644 --- a/rio/components/upload_area.py +++ b/rio/components/file_chooser_area.py @@ -11,12 +11,12 @@ from .. import utils from .fundamental_component import FundamentalComponent __all__ = [ - "UploadArea", + "FileChooserArea", ] @final -class UploadArea(FundamentalComponent): +class FileChooserArea(FundamentalComponent): content: str | None = None _: KW_ONLY file_types: list[str] | None = None @@ -41,4 +41,4 @@ class UploadArea(FundamentalComponent): await self.call_event_handler(self.on_file_upload, file) -UploadArea._unique_id_ = "UploadArea-builtin" +FileChooserArea._unique_id_ = "FileChooserArea-builtin"