refactor: dataset header css cleanup

qri-io · Aug 29, 2019 · d1cfbbc · d1cfbbc
1 parent 6adb9a9
commit d1cfbbc
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 19 deletions.
diff --git a/app/components/Dataset.tsx b/app/components/Dataset.tsx
@@ -228,10 +228,12 @@ export default class Dataset extends React.Component<DatasetProps> {
  <HeaderColumnButton
  label='link to filesystem'
  tooltip='Link this dataset to a folder on your computer'
- icon={(<>
- <FontAwesomeIcon icon={faFile} size='lg'/>
- <FontAwesomeIcon icon={faLink} transform="shrink-8" />
- </>)}
+ icon={(
+ <span className='fa-layers fa-fw'>
+ <FontAwesomeIcon icon={faFile} size='lg'/>
+ <FontAwesomeIcon icon={faLink} transform="shrink-8" />
+ </span>
+ )}
  onClick={() => { console.log('not finished: linking to filesystem') }}
  />
  )
@@ -274,12 +276,13 @@ export default class Dataset extends React.Component<DatasetProps> {
  <div className="label">{name ? 'Current Dataset' : 'Choose a Dataset'}</div>
  <div className="name">{name}</div>
  </div>
- {
- showDatasetList
- ? <div className="arrow collapse">&nbsp;</div>
- : <div className="arrow expand">&nbsp;</div>
- }
-
+ <div className='header-column-arrow'>
+ {
+ showDatasetList
+ ? <div className="arrow collapse">&nbsp;</div>
+ : <div className="arrow expand">&nbsp;</div>
+ }
+ </div>
  </div>
  {linkButton}
  {publishButton}

diff --git a/app/components/chrome/HeaderColumnButton.tsx b/app/components/chrome/HeaderColumnButton.tsx
@@ -29,7 +29,7 @@ const HeaderColumnButton: React.FunctionComponent<HeaderColumnButtonProps> = (pr
  >
  {(icon !== '') && (typeof icon === 'string')
  ? <div className='header-column-icon'><FontAwesomeIcon icon={icons[icon]} size='lg'/></div>
- : icon
+ : (<div className='header-column-icon'>{icon}</div>)
  }
  {(label !== '') &&
  <div className='header-column-text'>

diff --git a/app/components/chrome/HeaderColumnButtonDropdown.tsx b/app/components/chrome/HeaderColumnButtonDropdown.tsx
@@ -23,7 +23,6 @@ const HeaderColumnButtonDropdown: React.FunctionComponent<HeaderColumnButtonDrop
  return (
  <div
  className='header-column'
- style={{ position: 'relative', paddingRight: 0 }}
  data-tip={tooltip}
  onClick={onClick}
  >
@@ -36,7 +35,7 @@ const HeaderColumnButtonDropdown: React.FunctionComponent<HeaderColumnButtonDrop
  <div className='label'>{label}</div>
  </div>
  }
- <div onClick={toggleMenu} style={(onClick === toggleMenu) ? undefined : twoActionStyle }>
+ <div className='header-column-arrow' onClick={toggleMenu} style={(onClick === toggleMenu) ? undefined : twoActionStyle }>
  {showMenu
  ? <div className="arrow collapse">&nbsp;</div>
  : <div className="arrow expand">&nbsp;</div>

diff --git a/app/scss/_dataset.scss b/app/scss/_dataset.scss
@@ -18,6 +18,7 @@ $header-font-size: .9rem;
  background-color: #315379;
  color: #F8F2F2;
  cursor: default;
+ display: flex;
  flex-direction: row;
  flex-grow: 0;
  flex-shrink: 0;
@@ -60,29 +61,29 @@ $header-font-size: .9rem;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
- min-width: 164px;
 
  &:last-child {
- float: right;
+ margin-left: auto;
  border-left: $header-column-border;
  }
 
  .header-column-icon {
- flex: 0 0 32px;
-
  .icon-inline {
  font-size: 1.2rem;
  position: relative;
  top: 5px;
  left: 7px;
  }
 
-
+ img {
+ border-radius: 2px;
+ }
  }
 
  .header-column-text {
  flex-grow: 1;
- overflow-x: hidden;
+ white-space: nowrap;
+ padding-left: 9px;
 
  .label {
  font-size: 0.75rem;
@@ -99,6 +100,12 @@ $header-font-size: .9rem;
  }
  }
 
+ .header-column-arrow {
+ height: 100%;
+ width: 26px;
+ padding-left: 9px;
+ }
+
  &:hover {
  background-color: #416588;
  }
@@ -239,6 +246,10 @@ $header-font-size: .9rem;
  z-index:10;
  display: inline-flex;
 
+ .header-column-text {
+ overflow-x: hidden;
+ }
+
  &.expanded {
  color: #383838;
  }