You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by ac...@apache.org on 2019/09/16 13:35:29 UTC
[couchdb-fauxton] branch master updated: Fixed stack ordering of
absolute positioned no results view (#1223)
This is an automated email from the ASF dual-hosted git repository.
acote pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/couchdb-fauxton.git
The following commit(s) were added to refs/heads/master by this push:
new 0e8fbb6 Fixed stack ordering of absolute positioned no results view (#1223)
0e8fbb6 is described below
commit 0e8fbb63a4fa4b4dbbe5c395eadf3b1af4ac6e3c
Author: Aaron Tobias <ia...@users.noreply.github.com>
AuthorDate: Mon Sep 16 09:35:23 2019 -0400
Fixed stack ordering of absolute positioned no results view (#1223)
---
.../documents/assets/less/index-results.less | 31 ++++----
.../components/results/ResultsScreen.js | 84 +++++++++++++---------
2 files changed, 66 insertions(+), 49 deletions(-)
diff --git a/app/addons/documents/assets/less/index-results.less b/app/addons/documents/assets/less/index-results.less
index 6ea7ddc..e7af3c9 100644
--- a/app/addons/documents/assets/less/index-results.less
+++ b/app/addons/documents/assets/less/index-results.less
@@ -13,11 +13,10 @@
@import "../../../../../assets/less/variables.less";
.document-result-screen {
-
.loading-lines-wrapper {
margin-left: auto;
margin-right: auto;
- width: 80px;
+ width: 80px;
}
.loading-lines {
@@ -28,6 +27,7 @@
.document-result-screen__toolbar {
display: flex;
padding-bottom: 20px;
+ position: relative;
.bulk-action-component {
min-width: 90px;
@@ -41,12 +41,11 @@
padding: 8px 0;
}
- .toolbar-dropdown {
-
+ .toolbar-dropdown {
.btn {
color: #666;
}
-
+
.dropdown-menu.arrow:before {
right: 80%;
}
@@ -63,7 +62,6 @@
}
}
}
-
}
.document-result-screen__toolbar-flex-container {
@@ -101,11 +99,12 @@ a.document-result-screen__toolbar-create-btn:visited {
text-align: center;
i {
padding-right: 0.5rem;
- }
+ }
}
}
.watermark-logo {
- background: transparent url('../../../../../assets/img/couch-watermark.png') no-repeat 50% 50%;
+ background: transparent url("../../../../../assets/img/couch-watermark.png")
+ no-repeat 50% 50%;
height: 205px;
text-align: center;
margin: 0 20%;
@@ -117,7 +116,6 @@ a.document-result-screen__toolbar-create-btn:visited {
.table-view-docs {
position: absolute;
-
.bulk-action-component {
padding-bottom: 0;
min-height: 0;
@@ -150,13 +148,16 @@ a.document-result-screen__toolbar-create-btn:visited {
}
}
}
- td, th, td a {
+ td,
+ th,
+ td a {
vertical-align: middle;
line-height: 20px;
font-size: 0.875rem;
}
- td, th {
+ td,
+ th {
color: @defaultHTag;
max-width: 160px;
overflow: hidden;
@@ -175,16 +176,17 @@ a.document-result-screen__toolbar-create-btn:visited {
font-size: 1rem;
}
}
- td.tableview-checkbox-cell, th.tableview-header-el-checkbox {
+ td.tableview-checkbox-cell,
+ th.tableview-header-el-checkbox {
width: 35px;
padding-left: 0px;
}
.tableview-conflict {
- color: #F00;
+ color: #f00;
}
.icon-code-fork {
padding-right: 2px;
- color: #F00;
+ color: #f00;
}
.tableview-el-last {
width: 75px;
@@ -235,7 +237,6 @@ a.document-result-screen__toolbar-create-btn:visited {
}
.document-result-screen {
-
.table-bulkselector-section {
.bulk-action-component {
float: left;
diff --git a/app/addons/documents/index-results/components/results/ResultsScreen.js b/app/addons/documents/index-results/components/results/ResultsScreen.js
index 072b8cb..d5220cb 100644
--- a/app/addons/documents/index-results/components/results/ResultsScreen.js
+++ b/app/addons/documents/index-results/components/results/ResultsScreen.js
@@ -13,33 +13,33 @@
import React from 'react';
import FauxtonAPI from '../../../../../core/api';
import Constants from '../../../constants';
-import Components from "../../../../components/react-components";
-import {ResultsToolBar} from "../../../components/results-toolbar";
+import Components from '../../../../components/react-components';
+import { ResultsToolBar } from '../../../components/results-toolbar';
import NoResultsScreen from './NoResultsScreen';
import TableView from './TableView';
const { LoadLines, Document } = Components;
export default class ResultsScreen extends React.Component {
- constructor (props) {
+ constructor(props) {
super(props);
}
- componentDidMount () {
+ componentDidMount() {
prettyPrint();
}
- componentDidUpdate () {
+ componentDidUpdate() {
prettyPrint();
}
- onClick (id, doc) {
+ onClick(id, doc) {
if (doc.url) {
FauxtonAPI.navigate(doc.url);
}
}
- getUrlFragment (url) {
+ getUrlFragment(url) {
if (!this.props.isEditable) {
return null;
}
@@ -47,11 +47,12 @@ export default class ResultsScreen extends React.Component {
return (
<a href={url}>
<i className="fonticon-pencil"></i>
- </a>);
+ </a>
+ );
}
- getDocumentList () {
- const noop = () => {};
+ getDocumentList() {
+ const noop = () => { };
const data = this.props.results.results;
return _.map(data, (doc, i) => {
return (
@@ -67,30 +68,29 @@ export default class ResultsScreen extends React.Component {
docChecked={this.props.docChecked}
isDeletable={doc.isDeletable}
docIdentifier={doc.id}
- resultsStyle={this.props.resultsStyle} >
- {doc.url ? this.getUrlFragment('#' + doc.url) : doc.url}
+ resultsStyle={this.props.resultsStyle}
+ >
+ {doc.url ? this.getUrlFragment(`#${doc.url}`) : doc.url}
</Document>
);
});
}
- getDocumentStyleView () {
+ getDocumentStyleView() {
let classNames = 'view';
if (this.props.isListDeletable) {
- classNames += ' show-select';
+ classNames = `${classNames} show-select`;
}
return (
<div className={classNames}>
- <div id="doc-list">
- {this.getDocumentList()}
- </div>
+ <div id="doc-list">{this.getDocumentList()}</div>
</div>
);
}
- getTableStyleView () {
+ getTableStyleView() {
return (
<div>
<TableView
@@ -100,39 +100,55 @@ export default class ResultsScreen extends React.Component {
isListDeletable={this.props.isListDeletable}
data={this.props.results}
isLoading={this.props.isLoading}
-
removeItem={this.props.removeItem}
isChecked={this.props.allDocumentsSelected}
hasSelectedItem={this.props.hasSelectedItem}
toggleSelect={this.toggleSelectAll}
changeField={this.props.changeTableHeaderAttribute}
resultsStyle={this.props.resultsStyle}
- title="Select all docs that can be..." />
+ title="Select all docs that can be..."
+ />
</div>
);
}
- render () {
- let mainView = null;
-
+ getMainView() {
if (this.props.isLoading) {
- mainView = <div className="loading-lines-wrapper"><LoadLines /></div>;
- } else if (this.props.noResultsWarning) {
- mainView = <NoResultsScreen text={this.props.noResultsWarning} isWarning={true}/>;
- } else if (!this.props.hasResults) {
- mainView = <NoResultsScreen text={this.props.textEmptyIndex}/>;
- } else if (this.props.selectedLayout === Constants.LAYOUT_ORIENTATION.JSON) {
- mainView = this.getDocumentStyleView();
- } else {
- mainView = this.getTableStyleView();
+ return (
+ <div className="loading-lines-wrapper">
+ <LoadLines />
+ </div>
+ );
+ } else if (!this.props.noResultsWarning && this.props.hasResults) {
+ if (this.props.selectedLayout === Constants.LAYOUT_ORIENTATION.JSON) {
+ return this.getDocumentStyleView();
+ }
+ return this.getTableStyleView();
+ }
+ }
+
+ getNoResultScreen() {
+ if (!this.props.isLoading) {
+ if (this.props.noResultsWarning) {
+ return (
+ <NoResultsScreen
+ text={this.props.noResultsWarning}
+ isWarning={true}
+ />
+ );
+ } else if (!this.props.hasResults) {
+ return <NoResultsScreen text={this.props.textEmptyIndex} />;
+ }
}
+ }
+ render() {
return (
<div className="document-result-screen">
+ {this.getNoResultScreen()}
<ResultsToolBar {...this.props} />
- {mainView}
+ {this.getMainView()}
</div>
);
}
-
}