From c1f497a7c606c0d460ba2b542440f208cf03b369 Mon Sep 17 00:00:00 2001 From: Ralfs Garkaklis Date: Mon, 27 Apr 2020 12:36:34 +0300 Subject: [PATCH 1/2] add docs for progress indicator --- docs/index.html.ejs | 31 ++++++++++++++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/docs/index.html.ejs b/docs/index.html.ejs index 9568d56..5739bf4 100644 --- a/docs/index.html.ejs +++ b/docs/index.html.ejs @@ -43,6 +43,7 @@
  • TreeView
  • Tabs
  • TableView
    • +
  • Progress Indicator
  • Issues, Contributing, etc.
    • @@ -878,7 +879,6 @@
    -

    TableView

    @@ -965,6 +965,35 @@ }); `) %> +

    +
    + +
    +

    Progress Indicator

    +
    +
    + A ProgressIndicator is a control, also known as a progress bar control, you can use to show the percentage of completion of a lengthy operation. + +
    + — Microsoft Windows User Experience p. 142 +
    +
    + +

    + The ProgressIndicator component supports two types of bars. Both are deterministic, which means that you should give it a value parameter. Indeterministic progress bars are not supported, yet. +

    + +

    + There are two types of progress bars: continuous and block. The continuous doesn't require any further configuration. The block bar does require a class of progress-bar-block. +

    + + <%- example(` + + `) %> + + <%- example(` + + `) %>
    From 2c2c08468b48ad610146456ed8708c37563dd5df Mon Sep 17 00:00:00 2001 From: PedroBoni Date: Thu, 25 Jun 2020 18:34:52 -0300 Subject: [PATCH 2/2] Add Component ProgressBar --- docs/index.html.ejs | 18 +++++++++--------- style.css | 32 ++++++++++++++++++++++++++++++++ 2 files changed, 41 insertions(+), 9 deletions(-) diff --git a/docs/index.html.ejs b/docs/index.html.ejs index 5739bf4..98e6161 100644 --- a/docs/index.html.ejs +++ b/docs/index.html.ejs @@ -972,27 +972,27 @@

    Progress Indicator

    - A ProgressIndicator is a control, also known as a progress bar control, you can use to show the percentage of completion of a lengthy operation. + You can use a progress indicator, also known as a progress bar control, to show the percentage of completion of a lengthy operation.
    - — Microsoft Windows User Experience p. 142 + — Microsoft Windows User Experience p. 189

    - The ProgressIndicator component supports two types of bars. Both are deterministic, which means that you should give it a value parameter. Indeterministic progress bars are not supported, yet. -

    - -

    - There are two types of progress bars: continuous and block. The continuous doesn't require any further configuration. The block bar does require a class of progress-bar-block. + There are two types of progress bars: solid and segmented. The solid version is the default. To declare a segmented bar, you should use the segmented class.

    <%- example(` - +
    + +
    `) %> <%- example(` - +
    + +
    `) %>
    diff --git a/style.css b/style.css index 12cf871..15d2c15 100644 --- a/style.css +++ b/style.css @@ -885,3 +885,35 @@ table > tbody > tr > * { padding: 0 var(--grouped-element-spacing); height: 14px; } + +.progress-indicator { + height: 32px; + position: relative; + box-shadow: var(--border-sunken-inner); + padding: 4px 4px; + border: none; + box-sizing: border-box; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 0; +} + + +.progress-indicator > .progress-indicator-bar { + height: 100%; + display: block; + background-color: var(--dialog-blue); +} + +.progress-indicator.segmented > .progress-indicator-bar { + width: 100%; + background-color: transparent; /* resets the background color which is set to blue in the non-segmented selector */ + background-image: linear-gradient( + 90deg, + var(--dialog-blue) 0 16px, + transparent 0 2px + ); + background-repeat: repeat; + background-size: 18px 100%; +}