Merge pull request #13827 from dannon/max-height-animation-fixes (94e8637a) · Commits · NDIP / Galaxy

client/src/components/History/Content/ContentItem.vue

+2 −11

Original line number	Diff line number	Diff line
		@@ -77,14 +77,14 @@
		@tag-click="onTagClick"
		@input="onTags" />
		<!-- collections are not expandable, so we only need the DatasetDetails component here -->
		<div class="detail-animation-wrapper" :class="expandDataset ? '' : 'collapsed'">
		<b-collapse :visible="expandDataset">
		<DatasetDetails
		v-if="expandDataset"
		:dataset="item"
		:show-highlight="isHistoryItem && isHistPanel"
		@edit="onEdit"
		@toggleHighlights="toggleHighlights" />
		</div>
		</b-collapse>
		</div>
		</template>

		@@ -214,13 +214,4 @@ export default {
		word-break: break-all;
		}
		}
		.detail-animation-wrapper {
		overflow: hidden;
		transition: max-height 0.2s ease-out;
		height: auto;
		max-height: 400px;
		}
		.detail-animation-wrapper.collapsed {
		max-height: 0;
		}
		</style>

client/src/components/History/Content/Dataset/DatasetDetails.vue

+59 −0

Original line number	Diff line number	Diff line
		@@ -25,6 +25,57 @@
		<pre v-if="result.peek" class="dataset-peek p-1" v-html="result.peek" />
		</div>
		</div>
		<div v-else class="dataset">
		<!--
		placeholder skeleton for loading smoothly without a spinner
		(which you don't even see since this happens pretty fast, but it
		should be pretty accurate -- longer term it might be worth
		having more standard 'placeholder' versions of pre-loaded
		components) )
		-->
		<div class="p-2 details">
		<div class="summary">
		<div class="blurb">
		<span class="value">? lines</span>
		</div>
		<span class="datatype">
		<label v-localize class="prompt">format</label>
		<span class="value">...</span>
		</span>
		<span class="dbkey">
		<label v-localize class="prompt">database</label>
		<span class="value">?</span>
		</span>
		<div class="info">
		<span class="value">Loading</span>
		</div>
		</div>
		<div class="dataset-actions mb-1">
		<div class="clearfix">
		<div class="btn-group float-left">
		<button disabled class="btn px-1 btn-link btn-sm">
		<span class="fa fa-save"></span>
		</button>
		<button disabled class="btn px-1 btn-link btn-sm">
		<span class="fa fa-link"></span>
		</button>
		<button disabled class="btn px-1 btn-link btn-sm">
		<span class="fa fa-info-circle"></span>
		</button>
		<button disabled class="btn px-1 btn-link btn-sm">
		<span class="fa fa-bar-chart-o"></span>
		</button>
		<button disabled class="btn px-1 btn-link btn-sm">
		<span class="fa fa-sitemap"></span>
		</button>
		</div>
		</div>
		</div>
		<!-- this looks a mess, but whitespace pads the pre and makes it look wonky -->
		<pre
		class="dataset-peek p-1"><table cellspacing="0" cellpadding="3"><tbody><tr><td>Dataset peek loading...</td></tr></tbody></table></pre>
		</div>
		</div>
		</DatasetProvider>
		</template>

		@@ -32,11 +83,13 @@
		import { STATES } from "components/History/Content/model/states";
		import { DatasetProvider } from "components/providers/storeProviders";
		import DatasetActions from "./DatasetActions";
		import { BLink } from "bootstrap-vue";

		export default {
		components: {
		DatasetActions,
		DatasetProvider,
		BLink,
		},
		props: {
		dataset: { type: Object, required: true },
		@@ -54,3 +107,9 @@ export default {
		},
		};
		</script>
		<style scoped>
		.details .summary div.info {
		max-height: 4rem;
		overflow-y: auto;
		}
		</style>