mirror of
https://github.com/datahub-project/datahub.git
synced 2025-08-31 04:25:29 +00:00
replaces bs tabs with ivy tabs in datasets page
This commit is contained in:
Seyi Adebajo
Seyi Adebajo
parent
477a89c9ed
commit
a3d5f546c9
@ -342,7 +342,6 @@ export default Route.extend({
|
||||
aclAccessResponse: null,
|
||||
currentUserInfo: ''
|
||||
});
|
||||
throw error;
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
@ -17,8 +17,8 @@
|
||||
@import 'pendulum-ellipsis-animation/all';
|
||||
@import 'toggle-switch/all';
|
||||
@import 'schemaless-tagging/all';
|
||||
// add scss for acl
|
||||
@import 'dataset-acl-access/all';
|
||||
@import 'ivy-tabs/all';
|
||||
|
||||
@import 'nacho/nacho-button';
|
||||
@import 'nacho/nacho-global-search';
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
.ivy-tabs-tablist {
|
||||
margin: item-spacing(4 0);
|
||||
}
|
||||
4
wherehows-web/app/styles/components/ivy-tabs/_all.scss
Normal file
4
wherehows-web/app/styles/components/ivy-tabs/_all.scss
Normal file
@ -0,0 +1,4 @@
|
||||
@import 'tabs';
|
||||
@import 'addendum';
|
||||
|
||||
@include tabs();
|
||||
255
wherehows-web/app/styles/components/ivy-tabs/_tabs.scss
Normal file
255
wherehows-web/app/styles/components/ivy-tabs/_tabs.scss
Normal file
@ -0,0 +1,255 @@
|
||||
@mixin tabs {
|
||||
$BREAKPOINT_800: 800px;
|
||||
$BREAKPOINT_480: 480px;
|
||||
|
||||
$black75: get-color(black, 0.75);
|
||||
$blue7: get-color(blue7);
|
||||
$blue8: get-color(blue8);
|
||||
$blue9: get-color(blue9);
|
||||
$white25: get-color(white, 0.25);
|
||||
$white70: get-color(white, 0.7);
|
||||
$white85: get-color(white, 0.85);
|
||||
$white: get-color(white);
|
||||
$teal5: get-color(teal5);
|
||||
$tab-max-width: 220px;
|
||||
$item-spacing-2: item-spacing(2); // 8px
|
||||
$item-spacing-4: item-spacing(4); // 16px
|
||||
$item-spacing-5: item-spacing(5); // 24px
|
||||
|
||||
$tabs-border: 1px solid get-color(black, 0.15);
|
||||
|
||||
.ivy-tabs {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
.ivy-tabs-tabpanel[role='tabpanel'] {
|
||||
display: block;
|
||||
&[aria-hidden='true'] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] .ivy-tabs-tablist[role='tablist'] {
|
||||
position: relative;
|
||||
&:before {
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
cursor: not-allowed;
|
||||
|
||||
// Spec calls for the container to have 35% opacity,
|
||||
// so we use the opposite value for an overlay
|
||||
background: get-color(white, 0.65);
|
||||
}
|
||||
}
|
||||
|
||||
.ivy-tabs-tablist[role='tablist'] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
border-bottom: $tabs-border;
|
||||
position: relative;
|
||||
|
||||
.ivy-tabs-tab[role='tab'] {
|
||||
font-family: -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Fira Sans, Ubuntu,
|
||||
Oxygen, Oxygen Sans, Cantarell, Droid Sans, Lucida Grande, Helvetica, Arial, sans-serif, Apple Color Emoji,
|
||||
Segoe UI Emoji, Segoe UI Emoji, Segoe UI Symbol, Hiragino Kaku Gothic Pro, Meiryo, Hiragino Sans GB W3,
|
||||
Noto Naskh Arabic, Droid Arabic Naskh, Geeza Pro, Simplified Arabic, Noto Sans Thai, Thonburi, Dokchampa,
|
||||
Droid Sans Thai, Droid Sans Fallback, '.SFNSDisplay-Regular', Heiti SC, Microsoft Yahei;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
outline: 0;
|
||||
box-sizing: border-box;
|
||||
max-width: $tab-max-width;
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
transition: background-color;
|
||||
// ad motion easeInOut fast
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 83ms;
|
||||
|
||||
// I would prefer to set the min/max height of 40px/60px here, however
|
||||
// IE11 barfs on flexbox when setting any min-height. Luckily, and perhaps
|
||||
// this is design doing their homework, when using the spec'd paddings and
|
||||
// typography, the tab heights work out to 40px for a single line and 60px
|
||||
// for a double line. Just leaving this note in case that comes back to bite me.
|
||||
padding: 9px $item-spacing-2 11px;
|
||||
margin-left: $item-spacing-5;
|
||||
&:first-child {
|
||||
margin-left: $item-spacing-4;
|
||||
}
|
||||
|
||||
// The underline will exist on all tabs, but be transparent
|
||||
// in the unselected state for animation later.
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 2px;
|
||||
background-color: transparent;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
// ad motion easeInOut fast
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 83ms;
|
||||
}
|
||||
|
||||
&[aria-selected='true'] {
|
||||
color: $blue7;
|
||||
background-color: transparent;
|
||||
// ad motion easeInOut important
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 500ms;
|
||||
|
||||
&:before {
|
||||
background-color: $blue7;
|
||||
// ad motion easeInOut important
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $blue8;
|
||||
&:before {
|
||||
background: $blue8;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $blue9;
|
||||
&:before {
|
||||
background: $blue9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $black75;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $blue8;
|
||||
background-color: get-color(blue2, 0.45);
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: get-color(black, 0.35);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
// Mobile tweaks
|
||||
@media screen and (min-width: $BREAKPOINT_480) and (max-width: $BREAKPOINT_800 - 1px) {
|
||||
margin-left: $item-spacing-4;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $BREAKPOINT_480 - 1px) {
|
||||
margin-left: $item-spacing-2;
|
||||
&:first-child {
|
||||
margin-left: $item-spacing-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Scrolling and sizing related things
|
||||
&.no-wrap .ivy-tabs-tab[role='tab'] {
|
||||
white-space: nowrap;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Pro themed tablist
|
||||
&[theme='pro'] .ivy-tabs-tablist[role='tablist'] .ivy-tabs-tab[role='tab'][aria-selected='true'] {
|
||||
color: $teal5;
|
||||
&:before {
|
||||
background: $teal5;
|
||||
}
|
||||
}
|
||||
|
||||
// Attribute modifiers
|
||||
&[in-modal='true'] .ivy-tabs-tablist .ivy-tabs-tab:first-child {
|
||||
margin-left: $item-spacing-5;
|
||||
}
|
||||
|
||||
&[align='centered'] .ivy-tabs-tablist {
|
||||
justify-content: center;
|
||||
.ivy-tabs-tab:first-child {
|
||||
&[aria-selected='true']:before {
|
||||
left: $item-spacing-2;
|
||||
right: $item-spacing-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// What is now the "48dp" variant was originally "17px", based off the font size.
|
||||
// We'll support both for backwards compatibility since it's of little consequence
|
||||
// to do so.
|
||||
&[size='48dp'] .ivy-tabs-tablist[role='tablist'] .ivy-tabs-tab[role='tab'],
|
||||
&[size='17px'] .ivy-tabs-tablist[role='tablist'] .ivy-tabs-tab[role='tab'] {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 16px;
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
// Inverse theme
|
||||
&[theme='inverse'] {
|
||||
&[disabled] .ivy-tabs-tablist[role='tablist']:before {
|
||||
// Spec calls for the container to have 45% opacity,
|
||||
// so we use the opposite value for an overlay
|
||||
background: get-color(white, 0.55);
|
||||
}
|
||||
|
||||
.ivy-tabs-tablist[role='tablist'] {
|
||||
border-bottom-color: $white25;
|
||||
|
||||
.ivy-tabs-tab[role='tab'] {
|
||||
color: $white70;
|
||||
|
||||
&:hover {
|
||||
color: $white85;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: get-color(white, 0.15);
|
||||
}
|
||||
|
||||
&[aria-selected='true'] {
|
||||
color: $white;
|
||||
&:before {
|
||||
background: $white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $white85;
|
||||
&:before {
|
||||
background: $white85;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $white70;
|
||||
&:before {
|
||||
background: $white70;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: get-color(white, 0.45);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -152,70 +152,50 @@
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<ul class="nav nav-tabs nav-justified tabbed-navigation-list">
|
||||
{{#unless isPinot}}
|
||||
<li id="properties">
|
||||
<a data-toggle="tab" href="#propertiestab">
|
||||
Properties
|
||||
</a>
|
||||
</li>
|
||||
{{/unless}}
|
||||
<li id="comments">
|
||||
<a data-toggle="tab" href="#commentstab">
|
||||
Comments
|
||||
</a>
|
||||
</li>
|
||||
<li id="schemas"><a data-toggle="tab" href="#schematab">Schema</a></li>
|
||||
<li id="aclaccess" style="display:none">
|
||||
<a data-toggle="tab" href="#acl-accesstab">ACL Access</a>
|
||||
</li>
|
||||
<li id="ownership" class="active">
|
||||
<a data-toggle="tab" href="#ownertab">Ownership</a>
|
||||
{{#if requiredMinNotConfirmed}}
|
||||
<span class="notification-dot notification-dot--on-tab" aria-hidden="true"></span>
|
||||
{{/if}}
|
||||
</li>
|
||||
{{#if isInternal}}
|
||||
<li id="compliance">
|
||||
<a data-toggle="tab"
|
||||
title="Compliance"
|
||||
href="#compliancetab">
|
||||
Compliance
|
||||
</a>
|
||||
{{#if isNewComplianceInfo}}
|
||||
{{#ivy-tabs selection=selection as |tabs|}}
|
||||
|
||||
{{#tabs.tablist as |tablist|}}
|
||||
|
||||
{{#unless isPinot}}
|
||||
{{#tablist.tab "Properties" on-select=(action (mut selection))}}Properties{{/tablist.tab}}
|
||||
{{/unless}}
|
||||
|
||||
{{!--feature not available--}}
|
||||
<span style="display:none">
|
||||
{{#tablist.tab "Access" on-select=(action (mut selection))}}ACL Access{{/tablist.tab}}
|
||||
</span>
|
||||
|
||||
{{#tablist.tab "Comments" on-select=(action (mut selection))}}Comments{{/tablist.tab}}
|
||||
|
||||
{{#tablist.tab "Schema" on-select=(action (mut selection))}}Schema{{/tablist.tab}}
|
||||
|
||||
{{#tablist.tab "Ownership" on-select=(action (mut selection))}}
|
||||
Ownership
|
||||
{{#if requiredMinNotConfirmed}}
|
||||
<span class="notification-dot notification-dot--on-tab" aria-hidden="true"></span>
|
||||
{{/if}}
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#unless isSFDC}}
|
||||
<li id="samples"><a data-toggle="tab" href="#sampletab">Sample Data</a></li>
|
||||
{{/unless}}
|
||||
<li id="impacts">
|
||||
<a data-toggle="tab"
|
||||
title="Down Stream Impact Analysis"
|
||||
href="#impacttab">
|
||||
Downstream
|
||||
</a>
|
||||
</li>
|
||||
<li id="depends">
|
||||
<a data-toggle="tab"
|
||||
title="Relations"
|
||||
href="#dependtab">
|
||||
Relations
|
||||
</a>
|
||||
</li>
|
||||
<li id="access">
|
||||
<a data-toggle="tab"
|
||||
title="Accessibilities"
|
||||
href="#accesstab">
|
||||
Availability
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
{{/tablist.tab}}
|
||||
|
||||
<div class="tab-content">
|
||||
{{#unless isPinot}}
|
||||
<div id="propertiestab" class="tab-pane">
|
||||
{{#if isInternal}}
|
||||
{{#tablist.tab "Compliance" on-select=(action (mut selection))}}
|
||||
Compliance
|
||||
|
||||
{{#if isNewComplianceInfo}}
|
||||
<span class="notification-dot notification-dot--on-tab" aria-hidden="true"></span>
|
||||
{{/if}}
|
||||
{{/tablist.tab}}
|
||||
{{/if}}
|
||||
|
||||
{{#unless isSFDC}}
|
||||
{{#tablist.tab "Sample Data" on-select=(action (mut selection))}}Sample Data{{/tablist.tab}}
|
||||
{{/unless}}
|
||||
|
||||
{{#tablist.tab "Relations" on-select=(action (mut selection))}}Relations{{/tablist.tab}}
|
||||
|
||||
{{/tabs.tablist}}
|
||||
|
||||
{{#tabs.tabpanel "Properties"}}
|
||||
{{#unless isPinot}}
|
||||
{{dataset-deprecation
|
||||
deprecated=datasetView.deprecated
|
||||
deprecationNote=datasetView.deprecationNote
|
||||
@ -223,52 +203,47 @@
|
||||
}}
|
||||
|
||||
{{dataset-property properties=properties}}
|
||||
</div>
|
||||
{{/unless}}
|
||||
{{/unless}}
|
||||
{{/tabs.tabpanel}}
|
||||
|
||||
<div id="commentstab" class="tab-pane">
|
||||
{{#tabs.tabpanel "Comments"}}
|
||||
{{dataset-comments
|
||||
comments=datasetComments
|
||||
updateDatasetComment=(action "updateDatasetComment")
|
||||
deleteDatasetComment=(action "destroyDatasetComment")
|
||||
addDatasetComment=(action "createDatasetComment")
|
||||
}}
|
||||
</div>
|
||||
{{/tabs.tabpanel}}
|
||||
|
||||
<div id="schematab" class="tab-pane">
|
||||
{{#tabs.tabpanel "Schema"}}
|
||||
{{dataset-schema
|
||||
isTable=isTable
|
||||
json=model.schema
|
||||
schemas=schemas
|
||||
}}
|
||||
</div>
|
||||
<div id="ownertab" class="tab-pane active">
|
||||
{{/tabs.tabpanel}}
|
||||
|
||||
{{#tabs.tabpanel "Ownership"}}
|
||||
{{dataset-authors
|
||||
owners=owners
|
||||
ownerTypes=ownerTypes
|
||||
save=(action "saveOwnerChanges")
|
||||
}}
|
||||
</div>
|
||||
{{#unless isSFDC}}
|
||||
<div id="sampletab" class="tab-pane">
|
||||
{{#dataset-sample hasSamples=hasSamples isPinot=isPinot columns=columns samples=samples}}
|
||||
{{/dataset-sample}}
|
||||
</div>
|
||||
{{/unless}}
|
||||
<div id="impacttab" class="tab-pane">
|
||||
{{#dataset-impact hasImpacts=hasImpacts impacts=impacts}}
|
||||
{{/dataset-impact}}
|
||||
</div>
|
||||
<div id="dependtab" class="tab-pane">
|
||||
{{#dataset-relations hasDepends=hasDepends depends=depends hasReferences=hasReferences references=references}}
|
||||
{{/dataset-relations}}
|
||||
</div>
|
||||
<div id="accesstab" class="tab-pane">
|
||||
{{#dataset-access hasAccess=hasAccess accessibilities=accessibilities}}
|
||||
{{/dataset-access}}
|
||||
</div>
|
||||
{{/tabs.tabpanel}}
|
||||
|
||||
<div id="compliancetab" class="tab-pane">
|
||||
{{#tabs.tabpanel "Sample Data"}}
|
||||
{{#unless isSFDC}}
|
||||
{{dataset-sample hasSamples=hasSamples isPinot=isPinot columns=columns samples=samples}}
|
||||
{{/unless}}
|
||||
{{/tabs.tabpanel}}
|
||||
|
||||
{{#tabs.tabpanel "Relations"}}
|
||||
{{#unless isSFDC}}
|
||||
{{dataset-relations hasDepends=hasDepends depends=depends hasReferences=hasReferences references=references}}
|
||||
{{/unless}}
|
||||
{{/tabs.tabpanel}}
|
||||
|
||||
{{#tabs.tabpanel "Compliance"}}
|
||||
{{dataset-compliance
|
||||
datasetName=model.name
|
||||
schemaless=schemaless
|
||||
@ -281,14 +256,14 @@
|
||||
onSave=(action "savePrivacyCompliancePolicy")
|
||||
onReset=(action "resetPrivacyCompliancePolicy")
|
||||
}}
|
||||
</div>
|
||||
{{/tabs.tabpanel}}
|
||||
|
||||
<div id="acl-accesstab" class="tab-pane">
|
||||
{{#tabs.tabpanel "Access"}}
|
||||
{{dataset-aclaccess
|
||||
accessInfo=aclAccessResponse
|
||||
currentUser=currentUserInfo
|
||||
}}
|
||||
</div>
|
||||
{{/tabs.tabpanel}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{{/ivy-tabs}}
|
||||
</div>
|
||||
|
||||
@ -79,6 +79,7 @@
|
||||
"eyeglass": "^1.3.0",
|
||||
"eyeglass-restyle": "^1.1.0",
|
||||
"husky": "^0.14.3",
|
||||
"ivy-tabs": "^3.1.0",
|
||||
"lint-staged": "^6.0.1",
|
||||
"loader.js": "^4.2.3",
|
||||
"node-sass": "^4.7.2",
|
||||
|
||||
@ -5543,6 +5543,13 @@ istextorbinary@2.1.0:
|
||||
editions "^1.1.1"
|
||||
textextensions "1 || 2"
|
||||
|
||||
ivy-tabs@^3.1.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/ivy-tabs/-/ivy-tabs-3.1.0.tgz#07eae83bf46c974bf7de2f4d9404a7abaebe39fe"
|
||||
dependencies:
|
||||
ember-cli-babel "^5.1.7"
|
||||
ember-cli-htmlbars "^1.0.10"
|
||||
|
||||
jest-docblock@^21.0.0:
|
||||
version "21.2.0"
|
||||
resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-21.2.0.tgz#51529c3b30d5fd159da60c27ceedc195faf8d414"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user