public inbox for [email protected]
help / color / mirror / Atom feedFrom: Nikhil Mohite <[email protected]>
To: pgadmin-hackers <[email protected]>
Cc: Aradhana Birewar <[email protected]>
Cc: Dave Page <[email protected]>
Subject: Re: [pgAdmin][RM5990]: Update the style guide on pgAdmin4 website
Date: Thu, 10 Sep 2020 17:12:25 +0530
Message-ID: <CAOBg0AObYhkN8YNmawk=FNJnA0x73hipFWj00sX-qXKxJ2232Q@mail.gmail.com> (raw)
In-Reply-To: <CALL3v4Bh0dNxzxHSuneO8Ku+wbbEyYFk4wiVxE5W0LyosbOKAQ@mail.gmail.com>
References: <CAOBg0ANnFFsknDcF6NfLaDVc6x1EFwf_KUO+gbKtR7qvyfAY5A@mail.gmail.com>
<CAOBg0AOcPNT69=Eqd22sNChWUGz6HpMt1qXrs4_pgCP6sO0H7Q@mail.gmail.com>
<CA+OCxoy_TUdmca3pB1hgnRKniwQ8-XsKD_2uVTZW9BnTiVuGEA@mail.gmail.com>
<CAOBg0AM8coLjoYL6kUirbo+5cmm9VhqXp0SH_FgRyzekBaPOtA@mail.gmail.com>
<CA+OCxozx6vJFM20CVn0VZrdC9LLOjGiN4_zZQ6i23_6anBpRmg@mail.gmail.com>
<CAOBg0APy7ONbPTFSHFqcvtYzDNKc7dSgv1Qz+Cg7kb_mF9p7gg@mail.gmail.com>
<CA+OCxox4MRytMEN_XKnoF1t99Lxf-2JnJvy-f+Ux1P9Fp0aBzQ@mail.gmail.com>
<CAOBg0AOd-8t_KaSxfMGpBMCkEHTEwoSBV4nOmvVVbG6rF+GUGg@mail.gmail.com>
<CA+OCxoyKCp-uvuOVi7ZKvhjAAaqVqRu6YiSZpZ0mDvrFctaQiQ@mail.gmail.com>
<CAOBg0APsOizjnj-D2dCAfwbbobwgJ4mFcjtyJEuwh3QborQiUQ@mail.gmail.com>
<CA+OCxoz3GCjXSd5jQL44mGK5T80Zzfm5h2Q+XrikEVipdDoiwg@mail.gmail.com>
<CALL3v4Bh0dNxzxHSuneO8Ku+wbbEyYFk4wiVxE5W0LyosbOKAQ@mail.gmail.com>
Hi Team,
I have updated UI for the style guide, details as follow:
1. Resolved all UI changes suggested by Aradhana.
2. Added labels for query-tool and tree-views icons in iconography.
PFA patch v7 for the same.
If required any changes please let me know.
Regards,
Nikhil Mohite.
On Wed, Aug 26, 2020 at 6:34 PM Aradhana Birewar <
[email protected]> wrote:
> Hi Nikhil,
>
> I was going through the style guide, I have a few observations that I
> would like to share with you.
>
> 1. In the Typography section, for font size text, the Roboto font is
> not getting applied.
>
> [image: image.png]
>
> 2. In the Dropdown section, the expanded dropdown image
> appears vertically stretched.
>
> [image: image.png]
>
> 3. Tabs for navigating between themes need small UI modifications,
> only selected tab should have medium font-weight (font-weight: 500), others
> have normal font-weight.
> (font-weight: 400) Also selected tab bottom border should be the same
> as text width.
>
> [image: image.png]
> [image: Screenshot 2020-08-26 at 5.58.47 PM.png]
>
> 4. In the Toggle Buttons section, the title should be Toggle On.
>
> [image: image.png]
>
> Everything else looks great.
>
> Thanks and Regards,
> Aradhana
>
> On Wed, Aug 26, 2020 at 4:06 PM Dave Page <[email protected]> wrote:
>
>> Thanks, applied with a few changes for consistency in the titles and 404
>> handling.
>>
>> On Wed, Aug 26, 2020 at 8:23 AM Nikhil Mohite <
>> [email protected]> wrote:
>>
>>> Hi Dave/Team,
>>>
>>> Updated the implementation for the set title of the page, for this, I
>>> have done a few changes in the flow.
>>> 1. Earlier we are using {% include %} for showing pages in the base
>>> page (styleguide/index.html) for a style guide but in the Django template
>>> we can't use {% block %} statement if we are adding page using "{% include
>>> %}".
>>> 2. To overcome this issue now using {% extends %} instead of {% include
>>> %}, For this added dynamic URL generation in views so instead of loading
>>> "index.html" of style guide we are loading specific component HTML file
>>> (e.g: typography.html) and that template extends the "index.html" of the
>>> style guide.
>>>
>>> PFA v6 patch for the same.
>>>
>>> If required any changes please let me know.
>>>
>>> Regards,
>>> Nikhil Mohite.
>>>
>>>
>>> On Tue, Aug 25, 2020 at 7:09 PM Dave Page <[email protected]> wrote:
>>>
>>>> Hi
>>>>
>>>> On Tue, Aug 25, 2020 at 12:49 PM Nikhil Mohite <
>>>> [email protected]> wrote:
>>>>
>>>>>
>>>>> PFA v5 patch for the same.
>>>>>
>>>>> if required any updates in this please let me know.
>>>>>
>>>>
>>>> Hmm, yeah - that doesn't work for me I'm afraid; it's mixing content
>>>> with code.
>>>>
>>>> The titles should be defined in the HTML pages themselves. We do that
>>>> everywhere else by including a template block like the following in the
>>>> lowest level content:
>>>>
>>>> {% block title %}Contributing{% endblock %}
>>>>
>>>> And then in base.html:
>>>>
>>>> <title>{% block title %}{% endblock %}</title>
>>>>
>>>> --
>>>> Dave Page
>>>> Blog: http://pgsnake.blogspot.com
>>>> Twitter: @pgsnake
>>>>
>>>> EDB: http://www.enterprisedb.com
>>>>
>>>>
>>
>> --
>> Dave Page
>> Blog: http://pgsnake.blogspot.com
>> Twitter: @pgsnake
>>
>> EDB: http://www.enterprisedb.com
>>
>>
Attachments:
[application/octet-stream] RM_5690_v7.patch (95.6K, 3-RM_5690_v7.patch)
download | inline diff:
diff --git a/pgaweb/static/css/styleguide/_pgadmin.style.scss b/pgaweb/static/css/styleguide/_pgadmin.style.scss
index 2f24eec..c47c3d3 100644
--- a/pgaweb/static/css/styleguide/_pgadmin.style.scss
+++ b/pgaweb/static/css/styleguide/_pgadmin.style.scss
@@ -989,6 +989,10 @@ table.table-empty-rows{
.typography-font-sect {
background-color: #f3f5f9;
+ .typg-font-style {
+ letter-spacing: 0.25px;
+ }
+
.typg-style-section {
width: 49%;
display: inline-block;
@@ -1014,8 +1018,8 @@ table.table-empty-rows{
font-weight: normal;
font-stretch: normal;
font-style: normal;
- line-height: 1.33;
- letter-spacing: 0.25px;
+ line-height: 1.7;
+ letter-spacing: 2px;
color: #222222;
padding-left: 3em;
}
@@ -1031,8 +1035,8 @@ table.table-empty-rows{
font-weight: bold;
font-stretch: normal;
font-style: normal;
- line-height: 1.33;
- letter-spacing: 0.25px;
+ line-height: 1.7;
+ letter-spacing: 2px;
color: #222222;
padding-left: 3em;
}
@@ -1040,9 +1044,7 @@ table.table-empty-rows{
.font-family-desc {
margin-top: 2em;
- padding-top: 1em;
- padding-left: 3em;
- padding-right: 3em;
+ padding: 1em 3em 1em 3em;
font-size: 12px;
font-weight: normal;
font-stretch: normal;
@@ -1254,7 +1256,7 @@ table.table-empty-rows{
.dd_expand {
width: 252px;
- height: 269px;
+ height: auto;
padding-left: 2em;
}
@@ -1323,12 +1325,15 @@ table.table-empty-rows{
}
.iconography-icon {
- width: 3.2em;
- height: 3em;
+ width: 6.2em;
+ height: 5.5em;
display: inline-block;
align-items: center;
text-align: center;
vertical-align: middle;
+ word-break: break-all;
+ padding-left: 0.5em;
+ padding-right: 0.5em;
}
.iconography-custom-icon {
@@ -1342,14 +1347,16 @@ table.table-empty-rows{
}
.iconography-query-icon {
- width: 5em;
- height: 5em;
+ width: 6.3em;
+ height: 5.5em;
display: inline-block;
align-items: center;
text-align: center;
+ word-break: break-all;
vertical-align: middle;
- margin-right: 1em;
- margin-bottom: 1em;
+ margin-bottom: 2em;
+ padding-left: 0.5em;
+ padding-right: 0.5em;
}
.iconography-fa-icon {
diff --git a/pgaweb/static/css/styleguide/dark_theme.scss b/pgaweb/static/css/styleguide/dark_theme.scss
index 7e398ea..7175740 100644
--- a/pgaweb/static/css/styleguide/dark_theme.scss
+++ b/pgaweb/static/css/styleguide/dark_theme.scss
@@ -648,6 +648,18 @@
line-height: 1.17;
letter-spacing: 0.25px;
color: #FFF;
+ display: block;
+}
+
+.d-icon-label-tree {
+ font-size: 12px;
+ font-weight: normal;
+ font-stretch: normal;
+ font-style: normal;
+ line-height: 1.17;
+ letter-spacing: 0.25px;
+ color: #FFF;
+ display: block;
}
.dark-thm {
diff --git a/pgaweb/static/css/styleguide/hc_theme.scss b/pgaweb/static/css/styleguide/hc_theme.scss
index 345027c..48d5b5e 100644
--- a/pgaweb/static/css/styleguide/hc_theme.scss
+++ b/pgaweb/static/css/styleguide/hc_theme.scss
@@ -642,5 +642,13 @@
padding-right: 2em;
}
+// iconography
+.hc-iconography-component-container {
+ width: auto;
+ border: solid 1px #bac1cd;
+ margin-bottom: 3em;
+ background-color: #010b15;
+}
+
diff --git a/pgaweb/static/css/styleguide/iconography.scss b/pgaweb/static/css/styleguide/iconography.scss
index 04639c6..ace7d24 100644
--- a/pgaweb/static/css/styleguide/iconography.scss
+++ b/pgaweb/static/css/styleguide/iconography.scss
@@ -1,10 +1,6 @@
.pg-icon {
- background-repeat: no-repeat;
- background-size: 24px !important;
- align-content: center;
- vertical-align: middle;
- height: 2.3em;
- width: 2.3em;
+ height: 24px;
+ width: 24px;
display: inline-block;
}
@@ -448,12 +444,8 @@
.pg-icon-query {
- background-repeat: no-repeat;
- background-size: 64px !important;
- align-content: center;
- vertical-align: middle;
- height: 5em;
- width: 5em;
+ width: 64px;
+ height: 64px;
display: inline-block;
}
diff --git a/pgaweb/static/css/styleguide/sd_theme.scss b/pgaweb/static/css/styleguide/sd_theme.scss
index 5837c3d..ca589b7 100644
--- a/pgaweb/static/css/styleguide/sd_theme.scss
+++ b/pgaweb/static/css/styleguide/sd_theme.scss
@@ -2,6 +2,7 @@
border: none;
border-bottom: 3px solid #295c85!important;
color: #295c85 !important;
+ font-weight: 500;
}
.nav-tabs .nav-link:hover {
@@ -12,7 +13,9 @@
border: none;
color: #6d7789;
padding-left: 0em;
- font-weight: 500;
+ font-weight: 400;
+ padding-right: 0em;
+ margin-right: 2em;
}
// Color code classes
@@ -569,8 +572,19 @@
line-height: 1.17;
letter-spacing: 0.25px;
color: #222222;
+ display: block;
}
+.icon-label-tree {
+ font-size: 12px;
+ font-weight: normal;
+ font-stretch: normal;
+ font-style: normal;
+ line-height: 1.17;
+ letter-spacing: 0.25px;
+ color: #222222;
+ display: block;
+}
diff --git a/pgaweb/templates/pgaweb/styleguide/iconography/dark_iconography.html b/pgaweb/templates/pgaweb/styleguide/iconography/dark_iconography.html
index 37aeed1..46a0742 100644
--- a/pgaweb/templates/pgaweb/styleguide/iconography/dark_iconography.html
+++ b/pgaweb/templates/pgaweb/styleguide/iconography/dark_iconography.html
@@ -419,330 +419,439 @@
<div class="iconography-header">
<div class="iconography-icon">
<span class="pg-icon cast"></span>
+ <span class="d-icon-label-tree">cast</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-cast"></span>
+ <span class="d-icon-label-tree">coll-cast</span>
</div>
<div class="iconography-icon">
<span class="pg-icon catalog_object_column"></span>
+ <span class="d-icon-label-tree">catalog_object_column</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-column"></span>
+ <span class="d-icon-label-tree">coll-column</span>
</div>
<div class="iconography-icon">
<span class="pg-icon catalog_object"></span>
+ <span class="d-icon-label-tree">catalog_object</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-catalog_object"></span>
+ <span class="d-icon-label-tree">coll-catalog_object</span>
</div>
<div class="iconography-icon">
<span class="pg-icon catalog"></span>
+ <span class="d-icon-label-tree">catalog</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-catalog"></span>
+ <span class="d-icon-label-tree">coll-catalog</span>
</div>
<div class="iconography-icon">
<span class="pg-icon domain_constraints"></span>
+ <span class="d-icon-label-tree">domain_constraints</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-domain_constraints"></span>
+ <span class="d-icon-label-tree">coll-domain_constraints</span>
</div>
<div class="iconography-icon">
<span class="pg-icon primary_key"></span>
+ <span class="d-icon-label-tree">primary_key</span>
</div>
<div class="iconography-icon">
<span class="pg-icon compound_trigger"></span>
+ <span class="d-icon-label-tree">compound_trigger</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-compound_trigger"></span>
+ <span class="d-icon-label-tree">coll-compound_trigger</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-database"></span>
+ <span class="d-icon-label-tree">coll-database</span>
</div>
<div class="iconography-icon">
<span class="pg-icon database"></span>
+ <span class="d-icon-label-tree">database</span>
</div>
<div class="iconography-icon">
<span class="pg-icon edbfunc"></span>
+ <span class="d-icon-label-tree">edbfunc</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-edbfunc"></span>
+ <span class="d-icon-label-tree">coll-edbfunc</span>
</div>
<div class="iconography-icon">
<span class="pg-icon fts_template"></span>
+ <span class="d-icon-label-tree">fts_template</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-fts_template"></span>
+ <span class="d-icon-label-tree">coll-fts_template</span>
</div>
<div class="iconography-icon">
<span class="pg-icon trigger"></span>
+ <span class="d-icon-label-tree">trigger</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-trigger"></span>
+ <span class="d-icon-label-tree">coll-trigger</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-sequence"></span>
+ <span class="d-icon-label-tree">coll-sequence</span>
</div>
<div class="iconography-icon">
<span class="pg-icon event_trigger"></span>
+ <span class="d-icon-label-tree">event_trigger</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-event_trigger"></span>
+ <span class="d-icon-label-tree">coll-event_trigger</span>
</div>
<div class="iconography-icon">
<span class="pg-icon trigger_function"></span>
+ <span class="d-icon-label-tree">trigger_function</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-trigger_function"></span>
+ <span class="d-icon-label-tree">coll-trigger_function</span>
</div>
<div class="iconography-icon">
<span class="pg-icon procedure"></span>
+ <span class="d-icon-label-tree">procedure</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-function"></span>
+ <span class="d-icon-label-tree">coll-function</span>
</div>
<div class="iconography-icon">
<span class="pg-icon edbproc"></span>
+ <span class="d-icon-label-tree">edbproc</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-edbproc"></span>
+ <span class="d-icon-label-tree">col-edbproc</span>
</div>
<div class="iconography-icon">
<span class="pg-icon domain"></span>
+ <span class="d-icon-label-tree">domain</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-domain"></span>
+ <span class="d-icon-label-tree">coll-domain</span>
</div>
<div class="iconography-icon">
<span class="pg-icon collation"></span>
+ <span class="d-icon-label-tree">collation</span>
</div>
<div class="iconography-icon">
<span class="pg-icon language"></span>
+ <span class="d-icon-label-tree">language</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-language"></span>
+ <span class="d-icon-label-tree">coll-language</span>
</div>
<div class="iconography-icon">
<span class="pg-icon mview"></span>
+ <span class="d-icon-label-tree">mview</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-mview"></span>
+ <span class="d-icon-label-tree">coll-mview</span>
</div>
<div class="iconography-icon">
<span class="pg-icon function"></span>
+ <span class="d-icon-label-tree">function</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-procedure"></span>
+ <span class="d-icon-label-tree">coll-procedure</span>
</div>
<div class="iconography-icon">
<span class="pg-icon schema"></span>
+ <span class="d-icon-label-tree">schema</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-schema"></span>
+ <span class="d-icon-label-tree">coll-schema</span>
</div>
<div class="iconography-icon">
<span class="pg-icon synonym"></span>
+ <span class="d-icon-label-tree">synonym</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-synonym"></span>
+ <span class="d-icon-label-tree">coll-synonym</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-fts_parser"></span>
+ <span class="d-icon-label-tree">coll-fts_parser</span>
</div>
<div class="iconography-icon">
<span class="pg-icon type"></span>
+ <span class="d-icon-label-tree">type</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-type"></span>
+ <span class="d-icon-label-tree">coll-type</span>
</div>
<div class="iconography-icon">
<span class="pg-icon view"></span>
+ <span class="d-icon-label-tree">view</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-view"></span>
+ <span class="d-icon-label-tree">coll-view</span>
</div>
<div class="iconography-icon">
<span class="pg-icon resource_group"></span>
+ <span class="d-icon-label-tree">resource_group</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-resource_group"></span>
+ <span class="d-icon-label-tree">coll-resource_group</span>
</div>
<div class="iconography-icon">
<span class="pg-icon tablespace"></span>
+ <span class="d-icon-label-tree">tablespace</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-tablespace"></span>
+ <span class="d-icon-label-tree">coll-tablespace</span>
</div>
<div class="iconography-icon">
<span class="pg-icon rule-1"></span>
+ <span class="d-icon-label-tree">rule-1</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-rule"></span>
+ <span class="d-icon-label-tree">coll-rule</span>
</div>
<div class="iconography-icon">
<span class="pg-icon exclusion_constraint"></span>
+ <span class="d-icon-label-tree">exclusion_constraint</span>
</div>
<div class="iconography-icon">
<span class="pg-icon package"></span>
+ <span class="d-icon-label-tree">package</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-package"></span>
+ <span class="d-icon-label-tree">coll-package</span>
</div>
<div class="iconography-icon">
<span class="pg-icon index"></span>
+ <span class="d-icon-label-tree">index</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-index"></span>
+ <span class="d-icon-label-tree">coll-index</span>
</div>
<div class="iconography-icon">
<span class="pg-icon role"></span>
+ <span class="d-icon-label-tree">role</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-role"></span>
+ <span class="d-icon-label-tree">coll-role</span>
</div>
<div class="iconography-icon">
<span class="pg-icon group"></span>
+ <span class="d-icon-label-tree">group</span>
</div>
<div class="iconography-icon">
<span class="pg-icon partition"></span>
+ <span class="d-icon-label-tree">partition</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-partition"></span>
+ <span class="d-icon-label-tree">coll-partition</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-foreign_data_wrapper-1"></span>
+ <span class="d-icon-label-tree">coll-foreign_data_wrapper-1</span>
</div>
<div class="iconography-icon">
<span class="pg-icon foreign_data_wrapper-1"></span>
+ <span class="d-icon-label-tree">foreign_data_wrapper-1</span>
</div>
<div class="iconography-icon">
<span class="pg-icon pga_job"></span>
+ <span class="d-icon-label-tree">pga_job</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-pga_job"></span>
+ <span class="d-icon-label-tree">coll-pga_job</span>
</div>
<div class="iconography-icon">
<span class="pg-icon pga_jobstep"></span>
+ <span class="d-icon-label-tree">pga_jobstep</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-pga_jobstep"></span>
+ <span class="d-icon-label-tree">coll-pga_jobstep</span>
</div>
<div class="iconography-icon">
<span class="pg-icon user_mapping"></span>
+ <span class="d-icon-label-tree">user_mapping</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-user_mapping"></span>
+ <span class="d-icon-label-tree">coll-user_mapping</span>
</div>
<div class="iconography-icon">
<span class="pg-icon pga_schedule"></span>
+ <span class="d-icon-label-tree">pga_schedule</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-pga_schedule"></span>
+ <span class="d-icon-label-tree">coll-pga_schedule</span>
</div>
<div class="iconography-icon">
<span class="pg-icon server_group"></span>
+ <span class="d-icon-label-tree">server_group</span>
</div>
<div class="iconography-icon">
<span class="pg-icon server"></span>
+ <span class="d-icon-label-tree">server</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-foreign_server"></span>
+ <span class="d-icon-label-tree">coll-foreign_server</span>
</div>
<div class="iconography-icon">
<span class="pg-icon trigger-bad"></span>
+ <span class="d-icon-label-tree">trigger-bad</span>
</div>
<div class="iconography-icon">
<span class="pg-icon triggerbad"></span>
+ <span class="d-icon-label-tree">triggerbad</span>
</div>
<div class="iconography-icon">
<span class="pg-icon pga_schedule-disabled"></span>
+ <span class="d-icon-label-tree">pga_schedule-disabled</span>
</div>
<div class="iconography-icon">
<span class="pg-icon pga_job-disabled"></span>
+ <span class="d-icon-label-tree">pga_job-disabled</span>
</div>
<div class="iconography-icon">
<span class="pg-icon pga_jobstep-disabled"></span>
+ <span class="d-icon-label-tree">pga_jobstep-disabled</span>
</div>
<div class="iconography-icon">
<span class="pg-icon serverbad"></span>
+ <span class="d-icon-label-tree">serverbad</span>
</div>
<div class="iconography-icon">
<span class="pg-icon domain_constraints-bad"></span>
+ <span class="d-icon-label-tree">domain_constraints-bad</span>
</div>
<div class="iconography-icon">
<span class="pg-icon compound_trigger-bad"></span>
+ <span class="d-icon-label-tree">compound_trigger-bad</span>
</div>
<div class="iconography-icon">
<span class="pg-icon databasebad"></span>
+ <span class="d-icon-label-tree">databasebad</span>
</div>
<div class="iconography-icon">
<span class="pg-icon check-constraint-bad"></span>
+ <span class="d-icon-label-tree">check-constraint-bad</span>
</div>
<div class="iconography-icon">
<span class="pg-icon check-constraint"></span>
+ <span class="d-icon-label-tree">check-constraint</span>
</div>
<div class="iconography-icon">
<span class="pg-icon sub_partition_table"></span>
+ <span class="d-icon-label-tree">sub_partition_table</span>
</div>
<div class="iconography-icon">
<span class="pg-icon table-inherited"></span>
+ <span class="d-icon-label-tree">table-inherited</span>
</div>
<div class="iconography-icon">
<span class="pg-icon table-inherits"></span>
+ <span class="d-icon-label-tree">table-inherits</span>
</div>
<div class="iconography-icon">
<span class="pg-icon table-multi-inherit"></span>
+ <span class="d-icon-label-tree">table-multi-inherit</span>
</div>
<div class="iconography-icon">
<span class="pg-icon partition_table"></span>
+ <span class="d-icon-label-tree">partition_table</span>
</div>
<div class="iconography-icon">
<span class="pg-icon unique_constraint"></span>
+ <span class="d-icon-label-tree">unique_constraint</span>
</div>
<div class="iconography-icon">
<span class="pg-icon table-repl"></span>
+ <span class="d-icon-label-tree">table-repl</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-foreign_table"></span>
+ <span class="d-icon-label-tree">coll-foreign_table</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-fts_dictionary"></span>
+ <span class="d-icon-label-tree">coll-fts_dictionary</span>
</div>
<div class="iconography-icon">
<span class="pg-icon ppas"></span>
+ <span class="d-icon-label-tree">ppas</span>
</div>
<div class="iconography-icon">
<span class="pg-icon pg"></span>
+ <span class="d-icon-label-tree">pg</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-edbvar"></span>
+ <span class="d-icon-label-tree">coll-edbvar</span>
</div>
<div class="iconography-icon">
<span class="pg-icon edbvar"></span>
+ <span class="d-icon-label-tree">edbvar</span>
</div>
<div class="iconography-icon">
<span class="pg-icon extension"></span>
+ <span class="d-icon-label-tree">extension</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-extension"></span>
+ <span class="d-icon-label-tree">coll-extension</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-fts_configuration"></span>
+ <span class="d-icon-label-tree">coll-fts_configuration</span>
</div>
<div class="iconography-icon">
<span class="pg-icon fts_configuration-1"></span>
+ <span class="d-icon-label-tree">fts_configuration-1</span>
</div>
<div class="iconography-icon">
<span class="pg-icon fts_dictionary"></span>
+ <span class="d-icon-label-tree">fts_dictionary</span>
</div>
<div class="iconography-icon">
<span class="pg-icon ex_unknown"></span>
+ <span class="d-icon-label-tree">ex_unknown</span>
</div>
<div class="iconography-icon">
<span class="pg-icon fts_parser"></span>
+ <span class="d-icon-label-tree">fts_parser</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-constraints"></span>
+ <span class="d-icon-label-tree">coll-constraints</span>
</div>
</div>
</div>
@@ -753,156 +862,208 @@
<div class="iconography-header">
<div class="iconography-query-icon">
<span class="pg-icon-query ex_aggregate"></span>
+ <span class="d-icon-label">ex_aggregate</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_append"></span>
+ <span class="d-icon-label">ex_append</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_bmp_and"></span>
+ <span class="d-icon-label">ex_bmp_and</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_bmp_heap"></span>
+ <span class="d-icon-label">ex_bmp_heap</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_bmp_index"></span>
+ <span class="d-icon-label">ex_bmp_index</span>
+
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_bmp_or"></span>
+ <span class="d-icon-label">ex_bmp_or</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_cte_scan"></span>
+ <span class="d-icon-label">ex_cte_scan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_delete"></span>
+ <span class="d-icon-label">ex_delete</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_foreign_scan"></span>
+ <span class="d-icon-label">ex_foreign_scan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_gather_merge"></span>
+ <span class="d-icon-label">ex_gather_merge</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_gather_motion"></span>
+ <span class="d-icon-label">ex_gather_motion</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_group"></span>
+ <span class="d-icon-label">ex_group</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_hash_setop_intersect_all"></span>
+ <span class="d-icon-label">ex_hash_setop_intersect_all</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_hash_setop_intersect"></span>
+ <span class="d-icon-label">ex_hash_setop_intersect</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_hash_setop_unknown"></span>
+ <span class="d-icon-label">ex_hash_setop_unknown</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_hash"></span>
+ <span class="d-icon-label">ex_hash</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_index_only_scan"></span>
+ <span class="d-icon-label">ex_index_only_scan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_index_scan"></span>
+ <span class="d-icon-label">ex_index_scan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_materialize"></span>
+ <span class="d-icon-label">ex_materialize</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_merge_anti_join"></span>
+ <span class="d-icon-label">ex_merge_anto_join</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_merge_append"></span>
+ <span class="d-icon-label">ex_merge_append</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_merge_semi_join"></span>
+ <span class="d-icon-label">ex_merge_semi_join</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_merge"></span>
+ <span class="d-icon-label">ex_merge</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_named_tuplestore_scan"></span>
+ <span class="d-icon-label">ex_named_tuplestore_scan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_recursive_union"></span>
+ <span class="d-icon-label">ex_recursive_union</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_redistribute_motion"></span>
+ <span class="d-icon-label">ex_redistribute_motion</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_result"></span>
+ <span class="d-icon-label">ex_result</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_scan"></span>
+ <span class="d-icon-label">ex_scan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_seek"></span>
+ <span class="d-icon-label">ex_seek</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_setop"></span>
+ <span class="d-icon-label">ex_setop</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_values_scan"></span>
+ <span class="d-icon-label">ex_values_scan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_lock_rows"></span>
+ <span class="d-icon-label">ex_lock_rows</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_projectset"></span>
+ <span class="d-icon-label">e_projectset</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_update"></span>
+ <span class="d-icon-label">ex_update</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_tid_scan"></span>
+ <span class="d-icon-label">ex_tid_scan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_window_aggregate"></span>
+ <span class="d-icon-label">ex_window_aggregate</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_hash_setop_except_all"></span>
+ <span class="d-icon-label">ex_hash_setop_except_all</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_limit"></span>
+ <span class="d-icon-label">ex_limit</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_table_func_scan"></span>
+ <span class="d-icon-label">ex_table_func_scan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_hash_semi_join"></span>
+ <span class="d-icon-label">ex_hash_semi_join</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_subplan"></span>
+ <span class="d-icon-label">ex_subplan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_nested_loop_semi_join"></span>
+ <span class="d-icon-label">ex_nested_loop_semi_join</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_unique"></span>
+ <span class="d-icon-label">ex_unique</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_hash_setop_except"></span>
+ <span class="d-icon-label">ex_hash_setop_except</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_broadcast_motion"></span>
+ <span class="d-icon-label">ex_broadcast_motion</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_hash_anti_join"></span>
+ <span class="d-icon-label">ex_hash_anti_join</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_insert"></span>
+ <span class="d-icon-label">ex_insert</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_nested_loop_anti_join"></span>
+ <span class="d-icon-label">ex_nested_loop_anti_join</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_worktable_scan"></span>
+ <span class="d-icon-label">ex_worktable_scan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_sort"></span>
+ <span class="d-icon-label">ex_sort</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_join"></span>
+ <span class="d-icon-label">ex_join</span>
</div>
</div>
</div>
diff --git a/pgaweb/templates/pgaweb/styleguide/iconography/hc_iconography.html b/pgaweb/templates/pgaweb/styleguide/iconography/hc_iconography.html
index 02ab3d6..c21542f 100644
--- a/pgaweb/templates/pgaweb/styleguide/iconography/hc_iconography.html
+++ b/pgaweb/templates/pgaweb/styleguide/iconography/hc_iconography.html
@@ -1,7 +1,7 @@
{% if section == 'fontawesome' %}
<p class="color-header" id="fontawesome">Font Awesome version 5.14.0
(14x14px)</p>
-<div class="d-iconography-component-container">
+<div class="hc-iconography-component-container">
<div class="iconography-header">
<div class="iconography-fa-icon">
<span class=" pg-fa-icon dark-thm fa fa-save"></span><br/>
@@ -355,7 +355,7 @@
{% elif section == 'custom_icons' %}
<p class="color-header" id="solidIcons">Custom Solid Icons (14x14px)</p>
-<div class="d-iconography-component-container">
+<div class="hc-iconography-component-container">
<div class="iconography-header">
<div class="iconography-custom-icon">
<span class="pg-icon-custom commit dark-thm"></span>
@@ -417,334 +417,443 @@
{% elif section == 'tree_view_icons' %}
<p class="color-header" id="treeView">Tree View Icons (14x14px)</p>
-<div class="d-iconography-component-container">
+<div class="hc-iconography-component-container">
<div class="iconography-header">
<div class="iconography-icon">
<span class="pg-icon cast"></span>
+ <span class="d-icon-label-tree">cast</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-cast"></span>
+ <span class="d-icon-label-tree">coll-cast</span>
</div>
<div class="iconography-icon">
<span class="pg-icon catalog_object_column"></span>
+ <span class="d-icon-label-tree">catalog_object_column</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-column"></span>
+ <span class="d-icon-label-tree">coll-column</span>
</div>
<div class="iconography-icon">
<span class="pg-icon catalog_object"></span>
+ <span class="d-icon-label-tree">catalog_object</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-catalog_object"></span>
+ <span class="d-icon-label-tree">coll-catalog_object</span>
</div>
<div class="iconography-icon">
<span class="pg-icon catalog"></span>
+ <span class="d-icon-label-tree">catalog</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-catalog"></span>
+ <span class="d-icon-label-tree">coll-catalog</span>
</div>
<div class="iconography-icon">
<span class="pg-icon domain_constraints"></span>
+ <span class="d-icon-label-tree">domain_constraints</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-domain_constraints"></span>
+ <span class="d-icon-label-tree">coll-domain_constraints</span>
</div>
<div class="iconography-icon">
<span class="pg-icon primary_key"></span>
+ <span class="d-icon-label-tree">primary_key</span>
</div>
<div class="iconography-icon">
<span class="pg-icon compound_trigger"></span>
+ <span class="d-icon-label-tree">compound_trigger</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-compound_trigger"></span>
+ <span class="d-icon-label-tree">coll-compound_trigger</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-database"></span>
+ <span class="d-icon-label-tree">coll-database</span>
</div>
<div class="iconography-icon">
<span class="pg-icon database"></span>
+ <span class="d-icon-label-tree">database</span>
</div>
<div class="iconography-icon">
<span class="pg-icon edbfunc"></span>
+ <span class="d-icon-label-tree">edbfunc</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-edbfunc"></span>
+ <span class="d-icon-label-tree">coll-edbfunc</span>
</div>
<div class="iconography-icon">
<span class="pg-icon fts_template"></span>
+ <span class="d-icon-label-tree">fts_template</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-fts_template"></span>
+ <span class="d-icon-label-tree">coll-fts_template</span>
</div>
<div class="iconography-icon">
<span class="pg-icon trigger"></span>
+ <span class="d-icon-label-tree">trigger</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-trigger"></span>
+ <span class="d-icon-label-tree">coll-trigger</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-sequence"></span>
+ <span class="d-icon-label-tree">coll-sequence</span>
</div>
<div class="iconography-icon">
<span class="pg-icon event_trigger"></span>
+ <span class="d-icon-label-tree">event_trigger</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-event_trigger"></span>
+ <span class="d-icon-label-tree">coll-event_trigger</span>
</div>
<div class="iconography-icon">
<span class="pg-icon trigger_function"></span>
+ <span class="d-icon-label-tree">trigger_function</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-trigger_function"></span>
+ <span class="d-icon-label-tree">coll-trigger_function</span>
</div>
<div class="iconography-icon">
<span class="pg-icon procedure"></span>
+ <span class="d-icon-label-tree">procedure</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-function"></span>
+ <span class="d-icon-label-tree">coll-function</span>
</div>
<div class="iconography-icon">
<span class="pg-icon edbproc"></span>
+ <span class="d-icon-label-tree">edbproc</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-edbproc"></span>
+ <span class="d-icon-label-tree">col-edbproc</span>
</div>
<div class="iconography-icon">
<span class="pg-icon domain"></span>
+ <span class="d-icon-label-tree">domain</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-domain"></span>
+ <span class="d-icon-label-tree">coll-domain</span>
</div>
<div class="iconography-icon">
<span class="pg-icon collation"></span>
+ <span class="d-icon-label-tree">collation</span>
</div>
<div class="iconography-icon">
<span class="pg-icon language"></span>
+ <span class="d-icon-label-tree">language</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-language"></span>
+ <span class="d-icon-label-tree">coll-language</span>
</div>
<div class="iconography-icon">
<span class="pg-icon mview"></span>
+ <span class="d-icon-label-tree">mview</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-mview"></span>
+ <span class="d-icon-label-tree">coll-mview</span>
</div>
<div class="iconography-icon">
<span class="pg-icon function"></span>
+ <span class="d-icon-label-tree">function</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-procedure"></span>
+ <span class="d-icon-label-tree">coll-procedure</span>
</div>
<div class="iconography-icon">
<span class="pg-icon schema"></span>
+ <span class="d-icon-label-tree">schema</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-schema"></span>
+ <span class="d-icon-label-tree">coll-schema</span>
</div>
<div class="iconography-icon">
<span class="pg-icon synonym"></span>
+ <span class="d-icon-label-tree">synonym</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-synonym"></span>
+ <span class="d-icon-label-tree">coll-synonym</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-fts_parser"></span>
+ <span class="d-icon-label-tree">coll-fts_parser</span>
</div>
<div class="iconography-icon">
<span class="pg-icon type"></span>
+ <span class="d-icon-label-tree">type</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-type"></span>
+ <span class="d-icon-label-tree">coll-type</span>
</div>
<div class="iconography-icon">
<span class="pg-icon view"></span>
+ <span class="d-icon-label-tree">view</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-view"></span>
+ <span class="d-icon-label-tree">coll-view</span>
</div>
<div class="iconography-icon">
<span class="pg-icon resource_group"></span>
+ <span class="d-icon-label-tree">resource_group</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-resource_group"></span>
+ <span class="d-icon-label-tree">coll-resource_group</span>
</div>
<div class="iconography-icon">
<span class="pg-icon tablespace"></span>
+ <span class="d-icon-label-tree">tablespace</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-tablespace"></span>
+ <span class="d-icon-label-tree">coll-tablespace</span>
</div>
<div class="iconography-icon">
<span class="pg-icon rule-1"></span>
+ <span class="d-icon-label-tree">rule-1</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-rule"></span>
+ <span class="d-icon-label-tree">coll-rule</span>
</div>
<div class="iconography-icon">
<span class="pg-icon exclusion_constraint"></span>
+ <span class="d-icon-label-tree">exclusion_constraint</span>
</div>
<div class="iconography-icon">
<span class="pg-icon package"></span>
+ <span class="d-icon-label-tree">package</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-package"></span>
+ <span class="d-icon-label-tree">coll-package</span>
</div>
<div class="iconography-icon">
<span class="pg-icon index"></span>
+ <span class="d-icon-label-tree">index</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-index"></span>
+ <span class="d-icon-label-tree">coll-index</span>
</div>
<div class="iconography-icon">
<span class="pg-icon role"></span>
+ <span class="d-icon-label-tree">role</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-role"></span>
+ <span class="d-icon-label-tree">coll-role</span>
</div>
<div class="iconography-icon">
<span class="pg-icon group"></span>
+ <span class="d-icon-label-tree">group</span>
</div>
<div class="iconography-icon">
<span class="pg-icon partition"></span>
+ <span class="d-icon-label-tree">partition</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-partition"></span>
+ <span class="d-icon-label-tree">coll-partition</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-foreign_data_wrapper-1"></span>
+ <span class="d-icon-label-tree">coll-foreign_data_wrapper-1</span>
</div>
<div class="iconography-icon">
<span class="pg-icon foreign_data_wrapper-1"></span>
+ <span class="d-icon-label-tree">foreign_data_wrapper-1</span>
</div>
<div class="iconography-icon">
<span class="pg-icon pga_job"></span>
+ <span class="d-icon-label-tree">pga_job</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-pga_job"></span>
+ <span class="d-icon-label-tree">coll-pga_job</span>
</div>
<div class="iconography-icon">
<span class="pg-icon pga_jobstep"></span>
+ <span class="d-icon-label-tree">pga_jobstep</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-pga_jobstep"></span>
+ <span class="d-icon-label-tree">coll-pga_jobstep</span>
</div>
<div class="iconography-icon">
<span class="pg-icon user_mapping"></span>
+ <span class="d-icon-label-tree">user_mapping</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-user_mapping"></span>
+ <span class="d-icon-label-tree">coll-user_mapping</span>
</div>
<div class="iconography-icon">
<span class="pg-icon pga_schedule"></span>
+ <span class="d-icon-label-tree">pga_schedule</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-pga_schedule"></span>
+ <span class="d-icon-label-tree">coll-pga_schedule</span>
</div>
<div class="iconography-icon">
<span class="pg-icon server_group"></span>
+ <span class="d-icon-label-tree">server_group</span>
</div>
<div class="iconography-icon">
<span class="pg-icon server"></span>
+ <span class="d-icon-label-tree">server</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-foreign_server"></span>
+ <span class="d-icon-label-tree">coll-foreign_server</span>
</div>
<div class="iconography-icon">
<span class="pg-icon trigger-bad"></span>
+ <span class="d-icon-label-tree">trigger-bad</span>
</div>
<div class="iconography-icon">
<span class="pg-icon triggerbad"></span>
+ <span class="d-icon-label-tree">triggerbad</span>
</div>
<div class="iconography-icon">
<span class="pg-icon pga_schedule-disabled"></span>
+ <span class="d-icon-label-tree">pga_schedule-disabled</span>
</div>
<div class="iconography-icon">
<span class="pg-icon pga_job-disabled"></span>
+ <span class="d-icon-label-tree">pga_job-disabled</span>
</div>
<div class="iconography-icon">
<span class="pg-icon pga_jobstep-disabled"></span>
+ <span class="d-icon-label-tree">pga_jobstep-disabled</span>
</div>
<div class="iconography-icon">
<span class="pg-icon serverbad"></span>
+ <span class="d-icon-label-tree">serverbad</span>
</div>
<div class="iconography-icon">
<span class="pg-icon domain_constraints-bad"></span>
+ <span class="d-icon-label-tree">domain_constraints-bad</span>
</div>
<div class="iconography-icon">
<span class="pg-icon compound_trigger-bad"></span>
+ <span class="d-icon-label-tree">compound_trigger-bad</span>
</div>
<div class="iconography-icon">
<span class="pg-icon databasebad"></span>
+ <span class="d-icon-label-tree">databasebad</span>
</div>
<div class="iconography-icon">
<span class="pg-icon check-constraint-bad"></span>
+ <span class="d-icon-label-tree">check-constraint-bad</span>
</div>
<div class="iconography-icon">
<span class="pg-icon check-constraint"></span>
+ <span class="d-icon-label-tree">check-constraint</span>
</div>
<div class="iconography-icon">
<span class="pg-icon sub_partition_table"></span>
+ <span class="d-icon-label-tree">sub_partition_table</span>
</div>
<div class="iconography-icon">
<span class="pg-icon table-inherited"></span>
+ <span class="d-icon-label-tree">table-inherited</span>
</div>
<div class="iconography-icon">
<span class="pg-icon table-inherits"></span>
+ <span class="d-icon-label-tree">table-inherits</span>
</div>
<div class="iconography-icon">
<span class="pg-icon table-multi-inherit"></span>
+ <span class="d-icon-label-tree">table-multi-inherit</span>
</div>
<div class="iconography-icon">
<span class="pg-icon partition_table"></span>
+ <span class="d-icon-label-tree">partition_table</span>
</div>
<div class="iconography-icon">
<span class="pg-icon unique_constraint"></span>
+ <span class="d-icon-label-tree">unique_constraint</span>
</div>
<div class="iconography-icon">
<span class="pg-icon table-repl"></span>
+ <span class="d-icon-label-tree">table-repl</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-foreign_table"></span>
+ <span class="d-icon-label-tree">coll-foreign_table</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-fts_dictionary"></span>
+ <span class="d-icon-label-tree">coll-fts_dictionary</span>
</div>
<div class="iconography-icon">
<span class="pg-icon ppas"></span>
+ <span class="d-icon-label-tree">ppas</span>
</div>
<div class="iconography-icon">
<span class="pg-icon pg"></span>
+ <span class="d-icon-label-tree">pg</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-edbvar"></span>
+ <span class="d-icon-label-tree">coll-edbvar</span>
</div>
<div class="iconography-icon">
<span class="pg-icon edbvar"></span>
+ <span class="d-icon-label-tree">edbvar</span>
</div>
<div class="iconography-icon">
<span class="pg-icon extension"></span>
+ <span class="d-icon-label-tree">extension</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-extension"></span>
+ <span class="d-icon-label-tree">coll-extension</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-fts_configuration"></span>
+ <span class="d-icon-label-tree">coll-fts_configuration</span>
</div>
<div class="iconography-icon">
<span class="pg-icon fts_configuration-1"></span>
+ <span class="d-icon-label-tree">fts_configuration-1</span>
</div>
<div class="iconography-icon">
<span class="pg-icon fts_dictionary"></span>
+ <span class="d-icon-label-tree">fts_dictionary</span>
</div>
<div class="iconography-icon">
<span class="pg-icon ex_unknown"></span>
+ <span class="d-icon-label-tree">ex_unknown</span>
</div>
<div class="iconography-icon">
<span class="pg-icon fts_parser"></span>
+ <span class="d-icon-label-tree">fts_parser</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-constraints"></span>
+ <span class="d-icon-label-tree">coll-constraints</span>
</div>
</div>
</div>
@@ -752,160 +861,212 @@
{% elif section == 'query_plans' %}
<p class="color-header" id="queryPlans">Query Plan Icons
(64x64px)</p>
-<div class="d-iconography-component-container">
+<div class="hc-iconography-component-container">
<div class="iconography-header">
<div class="iconography-query-icon">
<span class="pg-icon-query ex_aggregate"></span>
+ <span class="d-icon-label">ex_aggregate</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_append"></span>
+ <span class="d-icon-label">ex_append</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_bmp_and"></span>
+ <span class="d-icon-label">ex_bmp_and</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_bmp_heap"></span>
+ <span class="d-icon-label">ex_bmp_heap</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_bmp_index"></span>
+ <span class="d-icon-label">ex_bmp_index</span>
+
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_bmp_or"></span>
+ <span class="d-icon-label">ex_bmp_or</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_cte_scan"></span>
+ <span class="d-icon-label">ex_cte_scan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_delete"></span>
+ <span class="d-icon-label">ex_delete</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_foreign_scan"></span>
+ <span class="d-icon-label">ex_foreign_scan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_gather_merge"></span>
+ <span class="d-icon-label">ex_gather_merge</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_gather_motion"></span>
+ <span class="d-icon-label">ex_gather_motion</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_group"></span>
+ <span class="d-icon-label">ex_group</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_hash_setop_intersect_all"></span>
+ <span class="d-icon-label">ex_hash_setop_intersect_all</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_hash_setop_intersect"></span>
+ <span class="d-icon-label">ex_hash_setop_intersect</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_hash_setop_unknown"></span>
+ <span class="d-icon-label">ex_hash_setop_unknown</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_hash"></span>
+ <span class="d-icon-label">ex_hash</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_index_only_scan"></span>
+ <span class="d-icon-label">ex_index_only_scan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_index_scan"></span>
+ <span class="d-icon-label">ex_index_scan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_materialize"></span>
+ <span class="d-icon-label">ex_materialize</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_merge_anti_join"></span>
+ <span class="d-icon-label">ex_merge_anto_join</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_merge_append"></span>
+ <span class="d-icon-label">ex_merge_append</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_merge_semi_join"></span>
+ <span class="d-icon-label">ex_merge_semi_join</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_merge"></span>
+ <span class="d-icon-label">ex_merge</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_named_tuplestore_scan"></span>
+ <span class="d-icon-label">ex_named_tuplestore_scan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_recursive_union"></span>
+ <span class="d-icon-label">ex_recursive_union</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_redistribute_motion"></span>
+ <span class="d-icon-label">ex_redistribute_motion</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_result"></span>
+ <span class="d-icon-label">ex_result</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_scan"></span>
+ <span class="d-icon-label">ex_scan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_seek"></span>
+ <span class="d-icon-label">ex_seek</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_setop"></span>
+ <span class="d-icon-label">ex_setop</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_values_scan"></span>
+ <span class="d-icon-label">ex_values_scan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_lock_rows"></span>
+ <span class="d-icon-label">ex_lock_rows</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_projectset"></span>
+ <span class="d-icon-label">e_projectset</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_update"></span>
+ <span class="d-icon-label">ex_update</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_tid_scan"></span>
+ <span class="d-icon-label">ex_tid_scan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_window_aggregate"></span>
+ <span class="d-icon-label">ex_window_aggregate</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_hash_setop_except_all"></span>
+ <span class="d-icon-label">ex_hash_setop_except_all</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_limit"></span>
+ <span class="d-icon-label">ex_limit</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_table_func_scan"></span>
+ <span class="d-icon-label">ex_table_func_scan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_hash_semi_join"></span>
+ <span class="d-icon-label">ex_hash_semi_join</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_subplan"></span>
+ <span class="d-icon-label">ex_subplan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_nested_loop_semi_join"></span>
+ <span class="d-icon-label">ex_nested_loop_semi_join</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_unique"></span>
+ <span class="d-icon-label">ex_unique</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_hash_setop_except"></span>
+ <span class="d-icon-label">ex_hash_setop_except</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_broadcast_motion"></span>
+ <span class="d-icon-label">ex_broadcast_motion</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_hash_anti_join"></span>
+ <span class="d-icon-label">ex_hash_anti_join</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_insert"></span>
+ <span class="d-icon-label">ex_insert</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_nested_loop_anti_join"></span>
+ <span class="d-icon-label">ex_nested_loop_anti_join</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_worktable_scan"></span>
+ <span class="d-icon-label">ex_worktable_scan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_sort"></span>
+ <span class="d-icon-label">ex_sort</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_join"></span>
+ <span class="d-icon-label">ex_join</span>
</div>
</div>
</div>
diff --git a/pgaweb/templates/pgaweb/styleguide/iconography/sd_iconography.html b/pgaweb/templates/pgaweb/styleguide/iconography/sd_iconography.html
index 77834f6..e61c04c 100644
--- a/pgaweb/templates/pgaweb/styleguide/iconography/sd_iconography.html
+++ b/pgaweb/templates/pgaweb/styleguide/iconography/sd_iconography.html
@@ -420,330 +420,439 @@
<div class="iconography-header">
<div class="iconography-icon">
<span class="pg-icon cast"></span>
+ <span class="icon-label-tree">cast</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-cast"></span>
+ <span class="icon-label-tree">coll-cast</span>
</div>
<div class="iconography-icon">
<span class="pg-icon catalog_object_column"></span>
+ <span class="icon-label-tree">catalog_object_column</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-column"></span>
+ <span class="icon-label-tree">coll-column</span>
</div>
<div class="iconography-icon">
<span class="pg-icon catalog_object"></span>
+ <span class="icon-label-tree">catalog_object</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-catalog_object"></span>
+ <span class="icon-label-tree">coll-catalog_object</span>
</div>
<div class="iconography-icon">
<span class="pg-icon catalog"></span>
+ <span class="icon-label-tree">catalog</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-catalog"></span>
+ <span class="icon-label-tree">coll-catalog</span>
</div>
<div class="iconography-icon">
<span class="pg-icon domain_constraints"></span>
+ <span class="icon-label-tree">domain_constraints</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-domain_constraints"></span>
+ <span class="icon-label-tree">coll-domain_constraints</span>
</div>
<div class="iconography-icon">
<span class="pg-icon primary_key"></span>
+ <span class="icon-label-tree">primary_key</span>
</div>
<div class="iconography-icon">
<span class="pg-icon compound_trigger"></span>
+ <span class="icon-label-tree">compound_trigger</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-compound_trigger"></span>
+ <span class="icon-label-tree">coll-compound_trigger</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-database"></span>
+ <span class="icon-label-tree">coll-database</span>
</div>
<div class="iconography-icon">
<span class="pg-icon database"></span>
+ <span class="icon-label-tree">database</span>
</div>
<div class="iconography-icon">
<span class="pg-icon edbfunc"></span>
+ <span class="icon-label-tree">edbfunc</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-edbfunc"></span>
+ <span class="icon-label-tree">coll-edbfunc</span>
</div>
<div class="iconography-icon">
<span class="pg-icon fts_template"></span>
+ <span class="icon-label-tree">fts_template</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-fts_template"></span>
+ <span class="icon-label-tree">coll-fts_template</span>
</div>
<div class="iconography-icon">
<span class="pg-icon trigger"></span>
+ <span class="icon-label-tree">trigger</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-trigger"></span>
+ <span class="icon-label-tree">coll-trigger</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-sequence"></span>
+ <span class="icon-label-tree">coll-sequence</span>
</div>
<div class="iconography-icon">
<span class="pg-icon event_trigger"></span>
+ <span class="icon-label-tree">event_trigger</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-event_trigger"></span>
+ <span class="icon-label-tree">coll-event_trigger</span>
</div>
<div class="iconography-icon">
<span class="pg-icon trigger_function"></span>
+ <span class="icon-label-tree">trigger_function</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-trigger_function"></span>
+ <span class="icon-label-tree">coll-trigger_function</span>
</div>
<div class="iconography-icon">
<span class="pg-icon procedure"></span>
+ <span class="icon-label-tree">procedure</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-function"></span>
+ <span class="icon-label-tree">coll-function</span>
</div>
<div class="iconography-icon">
<span class="pg-icon edbproc"></span>
+ <span class="icon-label-tree">edbproc</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-edbproc"></span>
+ <span class="icon-label-tree">col-edbproc</span>
</div>
<div class="iconography-icon">
<span class="pg-icon domain"></span>
+ <span class="icon-label-tree">domain</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-domain"></span>
+ <span class="icon-label-tree">coll-domain</span>
</div>
<div class="iconography-icon">
<span class="pg-icon collation"></span>
+ <span class="icon-label-tree">collation</span>
</div>
<div class="iconography-icon">
<span class="pg-icon language"></span>
+ <span class="icon-label-tree">language</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-language"></span>
+ <span class="icon-label-tree">coll-language</span>
</div>
<div class="iconography-icon">
<span class="pg-icon mview"></span>
+ <span class="icon-label-tree">mview</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-mview"></span>
+ <span class="icon-label-tree">coll-mview</span>
</div>
<div class="iconography-icon">
<span class="pg-icon function"></span>
+ <span class="icon-label-tree">function</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-procedure"></span>
+ <span class="icon-label-tree">coll-procedure</span>
</div>
<div class="iconography-icon">
<span class="pg-icon schema"></span>
+ <span class="icon-label-tree">schema</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-schema"></span>
+ <span class="icon-label-tree">coll-schema</span>
</div>
<div class="iconography-icon">
<span class="pg-icon synonym"></span>
+ <span class="icon-label-tree">synonym</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-synonym"></span>
+ <span class="icon-label-tree">coll-synonym</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-fts_parser"></span>
+ <span class="icon-label-tree">coll-fts_parser</span>
</div>
<div class="iconography-icon">
<span class="pg-icon type"></span>
+ <span class="icon-label-tree">type</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-type"></span>
+ <span class="icon-label-tree">coll-type</span>
</div>
<div class="iconography-icon">
<span class="pg-icon view"></span>
+ <span class="icon-label-tree">view</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-view"></span>
+ <span class="icon-label-tree">coll-view</span>
</div>
<div class="iconography-icon">
<span class="pg-icon resource_group"></span>
+ <span class="icon-label-tree">resource_group</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-resource_group"></span>
+ <span class="icon-label-tree">coll-resource_group</span>
</div>
<div class="iconography-icon">
<span class="pg-icon tablespace"></span>
+ <span class="icon-label-tree">tablespace</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-tablespace"></span>
+ <span class="icon-label-tree">coll-tablespace</span>
</div>
<div class="iconography-icon">
<span class="pg-icon rule-1"></span>
+ <span class="icon-label-tree">rule-1</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-rule"></span>
+ <span class="icon-label-tree">coll-rule</span>
</div>
<div class="iconography-icon">
<span class="pg-icon exclusion_constraint"></span>
+ <span class="icon-label-tree">exclusion_constraint</span>
</div>
<div class="iconography-icon">
<span class="pg-icon package"></span>
+ <span class="icon-label-tree">package</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-package"></span>
+ <span class="icon-label-tree">coll-package</span>
</div>
<div class="iconography-icon">
<span class="pg-icon index"></span>
+ <span class="icon-label-tree">index</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-index"></span>
+ <span class="icon-label-tree">coll-index</span>
</div>
<div class="iconography-icon">
<span class="pg-icon role"></span>
+ <span class="icon-label-tree">role</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-role"></span>
+ <span class="icon-label-tree">coll-role</span>
</div>
<div class="iconography-icon">
<span class="pg-icon group"></span>
+ <span class="icon-label-tree">group</span>
</div>
<div class="iconography-icon">
<span class="pg-icon partition"></span>
+ <span class="icon-label-tree">partition</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-partition"></span>
+ <span class="icon-label-tree">coll-partition</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-foreign_data_wrapper-1"></span>
+ <span class="icon-label-tree">coll-foreign_data_wrapper-1</span>
</div>
<div class="iconography-icon">
<span class="pg-icon foreign_data_wrapper-1"></span>
+ <span class="icon-label-tree">foreign_data_wrapper-1</span>
</div>
<div class="iconography-icon">
<span class="pg-icon pga_job"></span>
+ <span class="icon-label-tree">pga_job</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-pga_job"></span>
+ <span class="icon-label-tree">coll-pga_job</span>
</div>
<div class="iconography-icon">
<span class="pg-icon pga_jobstep"></span>
+ <span class="icon-label-tree">pga_jobstep</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-pga_jobstep"></span>
+ <span class="icon-label-tree">coll-pga_jobstep</span>
</div>
<div class="iconography-icon">
<span class="pg-icon user_mapping"></span>
+ <span class="icon-label-tree">user_mapping</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-user_mapping"></span>
+ <span class="icon-label-tree">coll-user_mapping</span>
</div>
<div class="iconography-icon">
<span class="pg-icon pga_schedule"></span>
+ <span class="icon-label-tree">pga_schedule</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-pga_schedule"></span>
+ <span class="icon-label-tree">coll-pga_schedule</span>
</div>
<div class="iconography-icon">
<span class="pg-icon server_group"></span>
+ <span class="icon-label-tree">server_group</span>
</div>
<div class="iconography-icon">
<span class="pg-icon server"></span>
+ <span class="icon-label-tree">server</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-foreign_server"></span>
+ <span class="icon-label-tree">coll-foreign_server</span>
</div>
<div class="iconography-icon">
<span class="pg-icon trigger-bad"></span>
+ <span class="icon-label-tree">trigger-bad</span>
</div>
<div class="iconography-icon">
<span class="pg-icon triggerbad"></span>
+ <span class="icon-label-tree">triggerbad</span>
</div>
<div class="iconography-icon">
<span class="pg-icon pga_schedule-disabled"></span>
+ <span class="icon-label-tree">pga_schedule-disabled</span>
</div>
<div class="iconography-icon">
<span class="pg-icon pga_job-disabled"></span>
+ <span class="icon-label-tree">pga_job-disabled</span>
</div>
<div class="iconography-icon">
<span class="pg-icon pga_jobstep-disabled"></span>
+ <span class="icon-label-tree">pga_jobstep-disabled</span>
</div>
<div class="iconography-icon">
<span class="pg-icon serverbad"></span>
+ <span class="icon-label-tree">serverbad</span>
</div>
<div class="iconography-icon">
<span class="pg-icon domain_constraints-bad"></span>
+ <span class="icon-label-tree">domain_constraints-bad</span>
</div>
<div class="iconography-icon">
<span class="pg-icon compound_trigger-bad"></span>
+ <span class="icon-label-tree">compound_trigger-bad</span>
</div>
<div class="iconography-icon">
<span class="pg-icon databasebad"></span>
+ <span class="icon-label-tree">databasebad</span>
</div>
<div class="iconography-icon">
<span class="pg-icon check-constraint-bad"></span>
+ <span class="icon-label-tree">check-constraint-bad</span>
</div>
<div class="iconography-icon">
<span class="pg-icon check-constraint"></span>
+ <span class="icon-label-tree">check-constraint</span>
</div>
<div class="iconography-icon">
<span class="pg-icon sub_partition_table"></span>
+ <span class="icon-label-tree">sub_partition_table</span>
</div>
<div class="iconography-icon">
<span class="pg-icon table-inherited"></span>
+ <span class="icon-label-tree">table-inherited</span>
</div>
<div class="iconography-icon">
<span class="pg-icon table-inherits"></span>
+ <span class="icon-label-tree">table-inherits</span>
</div>
<div class="iconography-icon">
<span class="pg-icon table-multi-inherit"></span>
+ <span class="icon-label-tree">table-multi-inherit</span>
</div>
<div class="iconography-icon">
<span class="pg-icon partition_table"></span>
+ <span class="icon-label-tree">partition_table</span>
</div>
<div class="iconography-icon">
<span class="pg-icon unique_constraint"></span>
+ <span class="icon-label-tree">unique_constraint</span>
</div>
<div class="iconography-icon">
<span class="pg-icon table-repl"></span>
+ <span class="icon-label-tree">table-repl</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-foreign_table"></span>
+ <span class="icon-label-tree">coll-foreign_table</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-fts_dictionary"></span>
+ <span class="icon-label-tree">coll-fts_dictionary</span>
</div>
<div class="iconography-icon">
<span class="pg-icon ppas"></span>
+ <span class="icon-label-tree">ppas</span>
</div>
<div class="iconography-icon">
<span class="pg-icon pg"></span>
+ <span class="icon-label-tree">pg</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-edbvar"></span>
+ <span class="icon-label-tree">coll-edbvar</span>
</div>
<div class="iconography-icon">
<span class="pg-icon edbvar"></span>
+ <span class="icon-label-tree">edbvar</span>
</div>
<div class="iconography-icon">
<span class="pg-icon extension"></span>
+ <span class="icon-label-tree">extension</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-extension"></span>
+ <span class="icon-label-tree">coll-extension</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-fts_configuration"></span>
+ <span class="icon-label-tree">coll-fts_configuration</span>
</div>
<div class="iconography-icon">
<span class="pg-icon fts_configuration-1"></span>
+ <span class="icon-label-tree">fts_configuration-1</span>
</div>
<div class="iconography-icon">
<span class="pg-icon fts_dictionary"></span>
+ <span class="icon-label-tree">fts_dictionary</span>
</div>
<div class="iconography-icon">
<span class="pg-icon ex_unknown"></span>
+ <span class="icon-label-tree">ex_unknown</span>
</div>
<div class="iconography-icon">
<span class="pg-icon fts_parser"></span>
+ <span class="icon-label-tree">fts_parser</span>
</div>
<div class="iconography-icon">
<span class="pg-icon coll-constraints"></span>
+ <span class="icon-label-tree">coll-constraints</span>
</div>
</div>
</div>
@@ -755,156 +864,208 @@
<div class="iconography-header">
<div class="iconography-query-icon">
<span class="pg-icon-query ex_aggregate"></span>
+ <span class="icon-label">ex_aggregate</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_append"></span>
+ <span class="icon-label">ex_append</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_bmp_and"></span>
+ <span class="icon-label">ex_bmp_and</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_bmp_heap"></span>
+ <span class="icon-label">ex_bmp_heap</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_bmp_index"></span>
+ <span class="icon-label">ex_bmp_index</span>
+
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_bmp_or"></span>
+ <span class="icon-label">ex_bmp_or</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_cte_scan"></span>
+ <span class="icon-label">ex_cte_scan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_delete"></span>
+ <span class="icon-label">ex_delete</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_foreign_scan"></span>
+ <span class="icon-label">ex_foreign_scan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_gather_merge"></span>
+ <span class="icon-label">ex_gather_merge</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_gather_motion"></span>
+ <span class="icon-label">ex_gather_motion</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_group"></span>
+ <span class="icon-label">ex_group</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_hash_setop_intersect_all"></span>
+ <span class="icon-label">ex_hash_setop_intersect_all</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_hash_setop_intersect"></span>
+ <span class="icon-label">ex_hash_setop_intersect</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_hash_setop_unknown"></span>
+ <span class="icon-label">ex_hash_setop_unknown</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_hash"></span>
+ <span class="icon-label">ex_hash</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_index_only_scan"></span>
+ <span class="icon-label">ex_index_only_scan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_index_scan"></span>
+ <span class="icon-label">ex_index_scan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_materialize"></span>
+ <span class="icon-label">ex_materialize</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_merge_anti_join"></span>
+ <span class="icon-label">ex_merge_anto_join</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_merge_append"></span>
+ <span class="icon-label">ex_merge_append</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_merge_semi_join"></span>
+ <span class="icon-label">ex_merge_semi_join</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_merge"></span>
+ <span class="icon-label">ex_merge</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_named_tuplestore_scan"></span>
+ <span class="icon-label">ex_named_tuplestore_scan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_recursive_union"></span>
+ <span class="icon-label">ex_recursive_union</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_redistribute_motion"></span>
+ <span class="icon-label">ex_redistribute_motion</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_result"></span>
+ <span class="icon-label">ex_result</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_scan"></span>
+ <span class="icon-label">ex_scan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_seek"></span>
+ <span class="icon-label">ex_seek</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_setop"></span>
+ <span class="icon-label">ex_setop</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_values_scan"></span>
+ <span class="icon-label">ex_values_scan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_lock_rows"></span>
+ <span class="icon-label">ex_lock_rows</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_projectset"></span>
+ <span class="icon-label">e_projectset</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_update"></span>
+ <span class="icon-label">ex_update</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_tid_scan"></span>
+ <span class="icon-label">ex_tid_scan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_window_aggregate"></span>
+ <span class="icon-label">ex_window_aggregate</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_hash_setop_except_all"></span>
+ <span class="icon-label">ex_hash_setop_except_all</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_limit"></span>
+ <span class="icon-label">ex_limit</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_table_func_scan"></span>
+ <span class="icon-label">ex_table_func_scan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_hash_semi_join"></span>
+ <span class="icon-label">ex_hash_semi_join</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_subplan"></span>
+ <span class="icon-label">ex_subplan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_nested_loop_semi_join"></span>
+ <span class="icon-label">ex_nested_loop_semi_join</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_unique"></span>
+ <span class="icon-label">ex_unique</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_hash_setop_except"></span>
+ <span class="icon-label">ex_hash_setop_except</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_broadcast_motion"></span>
+ <span class="icon-label">ex_broadcast_motion</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_hash_anti_join"></span>
+ <span class="icon-label">ex_hash_anti_join</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_insert"></span>
+ <span class="icon-label">ex_insert</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_nested_loop_anti_join"></span>
+ <span class="icon-label">ex_nested_loop_anti_join</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_worktable_scan"></span>
+ <span class="icon-label">ex_worktable_scan</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_sort"></span>
+ <span class="icon-label">ex_sort</span>
</div>
<div class="iconography-query-icon">
<span class="pg-icon-query ex_join"></span>
+ <span class="icon-label">ex_join</span>
</div>
</div>
</div>
diff --git a/pgaweb/templates/pgaweb/styleguide/toggle_buttons/dark_togglebutton.html b/pgaweb/templates/pgaweb/styleguide/toggle_buttons/dark_togglebutton.html
index f99dc93..bac7f0d 100644
--- a/pgaweb/templates/pgaweb/styleguide/toggle_buttons/dark_togglebutton.html
+++ b/pgaweb/templates/pgaweb/styleguide/toggle_buttons/dark_togglebutton.html
@@ -1,5 +1,5 @@
{% load static %}
-<p class="color-header">Primary Buttons</p>
+<p class="color-header">Toggle On</p>
<div class="btn-container">
<table>
<tr class="sd-btn-row">
diff --git a/pgaweb/templates/pgaweb/styleguide/toggle_buttons/hc_togglebutton.html b/pgaweb/templates/pgaweb/styleguide/toggle_buttons/hc_togglebutton.html
index b5b18fe..8f06e0c 100644
--- a/pgaweb/templates/pgaweb/styleguide/toggle_buttons/hc_togglebutton.html
+++ b/pgaweb/templates/pgaweb/styleguide/toggle_buttons/hc_togglebutton.html
@@ -1,5 +1,5 @@
{% load static %}
-<p class="color-header">Primary Buttons</p>
+<p class="color-header">Toggle On</p>
<div class="btn-container">
<table>
<tr class="sd-btn-row">
diff --git a/pgaweb/templates/pgaweb/styleguide/toggle_buttons/sd_togglebutton.html b/pgaweb/templates/pgaweb/styleguide/toggle_buttons/sd_togglebutton.html
index d84d528..4e79bf8 100644
--- a/pgaweb/templates/pgaweb/styleguide/toggle_buttons/sd_togglebutton.html
+++ b/pgaweb/templates/pgaweb/styleguide/toggle_buttons/sd_togglebutton.html
@@ -1,5 +1,5 @@
{% load static %}
-<p class="color-header">Primary Buttons</p>
+<p class="color-header">Toggle On</p>
<div class="btn-container">
<table>
<tr class="sd-btn-row">
diff --git a/pgaweb/templates/pgaweb/styleguide/typography.html b/pgaweb/templates/pgaweb/styleguide/typography.html
index a7486fc..2f1b930 100644
--- a/pgaweb/templates/pgaweb/styleguide/typography.html
+++ b/pgaweb/templates/pgaweb/styleguide/typography.html
@@ -19,14 +19,14 @@
</p>
<p class="typg-font-normal-sample">
- <span>Roboto Regular</span><br/>
+ <span class="typg-font-style">Roboto Regular</span><br/>
<span>ABCDEFGHIJKLMNOPQRSTUVWXYZ</span><br/>
<span>abcdefghijklmnopqrstuvwxyz</span><br/>
<span>0123456789</span><br/>
</p>
<p class="typg-font-bold-sample">
- <span>Roboto Regular</span><br/>
+ <span class="typg-font-style">Roboto Regular</span><br/>
<span>ABCDEFGHIJKLMNOPQRSTUVWXYZ</span><br/>
<span>abcdefghijklmnopqrstuvwxyz</span><br/>
<span>0123456789</span><br/>
@@ -45,9 +45,9 @@
<div class="font-size-sect">
<p>Font Size</p>
<div class="typography-font-sect font-size-style">
- <pre class="font-size-16-style">16px<span class="tab-16px">Lorem ipsum is dummy text.</span></pre>
- <pre class="font-size-14-style">14px<span class="tab-14px">Lorem ipsum is dummy text.</span></pre>
- <pre class="font-size-13-style">13px<span class="tab-13px">Lorem ipsum is dummy text.</span></pre>
+ <p class="font-size-16-style">16px<span class="tab-16px">Lorem ipsum is dummy text.</span></p>
+ <p class="font-size-14-style">14px<span class="tab-14px">Lorem ipsum is dummy text.</span></p>
+ <p class="font-size-13-style">13px<span class="tab-13px">Lorem ipsum is dummy text.</span></p>
</div>
</div>
{% endblock %}
\ No newline at end of file
view thread (13+ messages)
reply
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Reply to all the recipients using the --to and --cc options:
reply via email
To: [email protected]
Cc: [email protected], [email protected], [email protected]
Subject: Re: [pgAdmin][RM5990]: Update the style guide on pgAdmin4 website
In-Reply-To: <CAOBg0AObYhkN8YNmawk=FNJnA0x73hipFWj00sX-qXKxJ2232Q@mail.gmail.com>
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox