Design System

Toolbar

Toolbar는 특정 작업을 수행하기 위해 제공하는 Component 입니다.

Anatomy

Usage

Toolbar는 Worker OSD Viewer에서 사용 되며, 표출되는 위치에 따라서 크게 2가지로 사용 됩니다.

• Side Toolbar
• Bottom Toolbar

이외에도 Toolbar를 구성하는 요소인 Toolbar Button이 단일하게 Single Toolbar Button으로 사용되어 집니다.

Positioning

작업이 수행되는 특정 Section 위에 배치되어 사용되며, 작업 수행에 방해가 되지 않는 위치인 Top / Bottom 혹은 Side에 위치하는 것을 원칙으로 합니다.

Components

Toolbar는 특정 작업을 수행하기 위해 제공하는 Component 입니다.

Side Toolbar

Vertical의 형태로 Toolbar가 종속된 Workspace에서 좌측 혹은 우측 귀퉁이 위치하며 목적에 따라서 Divider로 구분하여 요소들을 분리 할 수 있습니다.

Bottom Toolbar

Horizontal의 형태로 Toolbar가 종속된 Workspace에서 하단 귀퉁이에 위치하며 목적에 기능적으로 구분이 확연히 필요한 것들은 분리하여 8px 간격을 두고 묶어 배치하는 것이 특징입니다.

Single Toolbar Button

Side Toolbar, Bottom Toolbar에서 여러 조합의 요소들을 그룹화 하여 사용하는 것과 달리 단일하게 사용되어지는 요소 입니다. 여러 역할로 사용이 되며 종류도 다양하게 생성 될 수 있습니다.

Extra Case

작업공간에서 다양한 목적에 따라서 Toolbar가 변형되어 사용 되어 질 수 있습니다.

Varients

State

Toolbar Button의 경우 5가지 (Default, Hover, Selected, Select Hover, Disabled)로 구성되어져 있습니다. 사용되는 목적에 따라서 Selected와 Select Hover가 생략되어 사용되어 질 수 있습니다.

Hover

Toolbar 내의 기능 요소들을 개별로 Hover 하였을때 작업툴에 대한 설명의 Tooltip을 띄우는 것을 원칙으로 하되 경우에 따라 생략 가능합니다.

Selected & Clicked

특정 툴의 경우 Selected 상태에 별도의 Component의 표출이 필요한 경우에는 Tooltip position 방식과 동일하게 위치 하는 것(4px) 으로 합니다. Selected 된 상태에서 표출이 되는 경우와 다르게 선택이 되어진 상태가 아닌 Clicked Action으로 (별도의 Clicked 상태의 Toolbar Btn은 따로 정의 되어지지 않았음) 표출 되어지는 경우 8px 간격을 두고 띄우는 것으로 합니다.

Clicked & Change

일반적으로 Bottom Toolbar에서 사용되는 Button의 경우 선택시 해당 동작을 수행할뿐 별도의 시각적 변화는 나타나지 않으나, Show / Hide의 기능의 경우 현재의 Annotation Object 표출 상태에 대한 현재 Viewer 상태를 직접적으로 나타내주어 직관적으로 알 수 있도록 표현 되는 것이 특징입니다.

Type of Toolbar

Type

Toolbar / Side Toolbar

Toolbar / Bottom Toolbar

Toolbar / Fold Toolbar

Toolbar / Toggle Filter