opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-09-24 16:30:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev'

Browse Source
This commit is contained in:
Sebastian Kapust
2018-10-11 14:51:32 +02:00
parent 13b8098259 85d4706662
commit 126c432bcf
305 changed files with 7286 additions and 6682 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.ci/jenkins/api-py3/run_tests.sh
Regular → Executable
View File
.ci/jenkins/api/run_tests.sh
Regular → Executable
View File
.ci/jenkins/framework-py3/run_tests.sh
Regular → Executable
View File
.ci/jenkins/framework/run_tests.sh
Regular → Executable
View File
.ci/jenkins/main-tools-py3/run_tests.sh
Regular → Executable
View File
.ci/jenkins/main-tools/run_tests.sh
Regular → Executable
View File
.ci/jenkins/selenium-py3/run_tests.sh
Regular → Executable
View File
.ci/jenkins/selenium/run_tests.sh
Regular → Executable
+1 -1
View File
@@ -28,7 +28,7 @@ docker run -e GIT_COMMITTER_NAME=Jenkins -e GIT_COMMITTER_EMAIL=jenkins@galaxypr
/bin/bash -c 'make client-production-maps'
# Start Selenium server in the test Docker container.
DOCKER_RUN_EXTRA_ARGS="-v $YARN_CACHE_FOLDER:$YARN_CACHE_FOLDER -e YARN_CACHE_FOLDER=$YARN_CACHE_FOLDER -e USE_SELENIUM=1 -e GALAXY_TEST_SELENIUM_RETRIES=${GALAXY_TEST_SELENIUM_RETRIES} -e GALAXY_TEST_ERRORS_DIRECTORY=${GALAXY_TEST_ERRORS_DIRECTORY} -e GALAXY_TEST_SCREENSHOTS_DIRECTORY=${GALAXY_TEST_SCREENSHOTS_DIRECTORY} ${DOCKER_RUN_EXTRA_ARGS}"
DOCKER_RUN_EXTRA_ARGS="--shm-size=2g -v $YARN_CACHE_FOLDER:$YARN_CACHE_FOLDER -e YARN_CACHE_FOLDER=$YARN_CACHE_FOLDER -e USE_SELENIUM=1 -e GALAXY_TEST_SELENIUM_RETRIES=${GALAXY_TEST_SELENIUM_RETRIES} -e GALAXY_TEST_ERRORS_DIRECTORY=${GALAXY_TEST_ERRORS_DIRECTORY} -e GALAXY_TEST_SCREENSHOTS_DIRECTORY=${GALAXY_TEST_SCREENSHOTS_DIRECTORY} ${DOCKER_RUN_EXTRA_ARGS}"
export DOCKER_RUN_EXTRA_ARGS
./run_tests.sh --dockerize --db postgres --external_tmp --clean_pyc --skip_flakey_fails --selenium "$@"
.ci/jenkins/toolshed/run_tests.sh
Regular → Executable
View File
.gitignore
+1
View File
@@ -105,6 +105,7 @@ test-data-cache
run_framework_tests.html
run_functional_tests.html
run_integration_tests.html
run_selenium_tests.html
run_toolshed_tests.html
run_api_tests.html
test/tool_shed/tmp/*
client/README.md
+2 -5
View File
@@ -41,11 +41,8 @@ for inspection of live javascript to facilitate debugging, use:
make client-production-maps
Important Note: The development branch of Galaxy does not include client script
artifacts, and these should not be committed. When issuing a PR to a stable
branch, please run "make client-production-maps", and include those artifacts.
Or, if you'd rather, include only the /client source changes and build
artifacts can be added by maintainers on merge.
Important Note: The Galaxy repository does not include client script artifacts,
and these should not be committed.
Automatic Rebuilding (Watch Mode)
client/galaxy/docs/bootstrap.md
+1 -1
View File
@@ -135,8 +135,8 @@ Disabled
```
<div>
<span class="badge badge-default">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
client/galaxy/scripts/apps/analysis.js
+7 -1
View File
@@ -1,6 +1,7 @@
import $ from "jquery";
import "bootstrap";
import * as _ from "underscore";
import decodeUriComponent from "decode-uri-component";
import GalaxyApp from "galaxy";
import Router from "layout/router";
import ToolPanel from "./panels/tool-panel";
@@ -357,7 +358,12 @@ window.app = function app(options, bootstrapped) {
/** load the center panel with a tool form described by the given params obj */
_loadToolForm: function(params) {
//TODO: load tool form code async
params.id = decodeURIComponent(params.tool_id);
if (params.tool_id) {
params.id = decodeUriComponent(params.tool_id);
}
if (params.version) {
params.version = decodeUriComponent(params.version);
}
this.page.display(new ToolForm.View(params));
},
client/galaxy/scripts/apps/panels/admin-panel.js
+7 -9
View File
@@ -146,7 +146,7 @@ var AdminPanel = Backbone.View.extend({
this.$el.empty();
this.categories.each(category => {
var $section = $(self._templateSection(category.attributes));
var $entries = $section.find(".ui-side-section-body");
var $entries = $section.find(".toolSectionBody");
_.each(category.get("items"), item => {
if (item.enabled === undefined || item.enabled) {
var $link = $("<a/>")
@@ -165,7 +165,7 @@ var AdminPanel = Backbone.View.extend({
}
$entries.append(
$("<div/>")
.addClass("ui-side-section-body-title")
.addClass("toolTitle")
.append($link)
);
}
@@ -175,16 +175,14 @@ var AdminPanel = Backbone.View.extend({
},
_templateSection: function(options) {
return [
"<div>",
`<div class="ui-side-section-title">${_l(options.title)}</div>`,
'<div class="ui-side-section-body"/>',
"</div>"
].join("");
return `<div class="toolSectionWrapper">
<div class="toolSectionTitle">${_l(options.title)}</div>
<div class="toolSectionBody"/>
</div>`;
},
_template: function() {
return '<div class="ui-side-panel"/>';
return '<div class="toolMenuContainer"/>';
},
toString: function() {
client/galaxy/scripts/components/DisplayStructured.vue
+7 -50
View File
@@ -93,7 +93,6 @@ export default {
.bold {
font-weight: bold;
}
.light {
font-weight: lighter;
color: grey;
@@ -101,11 +100,9 @@ export default {
.right-aligned {
text-align: right;
}
.clickable {
cursor: pointer;
}
.workflow {
border: solid gray 1px;
margin-bottom: 1%;
@@ -120,38 +117,17 @@ export default {
.workflow > .body {
border-top: solid gray 1px;
}
.workflow > .body > .toolForm {
.workflow > .body > .tool {
border: 0px;
margin: 0;
}
div.toolForm {
border-width: 1px;
border-radius: 0px;
margin-bottom: 1%;
div.tool {
margin-bottom: 5px;
border: 1px solid gray;
}
.toolForm > .header {
background-color: #ebd9b2;
.tool > .header {
padding: 5px 10px;
}
.workflow div.toolForm:not(:first-child) .header {
border-top: 1px solid #d6b161;
}
div.toolFormTitle {
padding: 0px 0px 4px 0px;
margin: 0px 0px 4px 0px;
border: 0px;
background-color: transparent;
border-bottom: 1px solid #d6b161;
}
/* down from EBD9B2 --> 90743A */
.toolFormTitle > .light {
color: #90743a;
}
.toolForm em {
color: #90743a;
}
.job-inputs {
margin: 0px 6px 0px 6px;
text-align: left;
@@ -159,7 +135,7 @@ div.toolFormTitle {
.job-inputs td:nth-child(1) {
text-align: right;
font-weight: lighter;
color: #90743a;
color: gray;
}
.job-inputs td:nth-child(1):after {
content: ":";
@@ -167,17 +143,13 @@ div.toolFormTitle {
.job-inputs td:nth-child(2) {
padding-left: 4px;
}
.job-inputs em {
}
.job-inputs-show {
float: right;
}
.copied-from {
border: 1px solid lightgrey;
border-width: 1px 1px 0px 1px;
margin-bottom: 1%;
margin-bottom: 5px;
}
.copied-from .header {
border-bottom: 1px solid lightgrey;
@@ -187,19 +159,4 @@ div.toolFormTitle {
.copied-from .header a {
color: #888;
}
.dataset.hda {
min-height: 37px;
border-width: 0px 0px 1px 0px;
}
.toolFormBody > .dataset.hda:last-child {
border-bottom-width: 0px;
}
.dataset.hda:first-child {
border-top: 1px solid #d6b161;
}
.dataset.hda .dataset-title-bar {
padding-top: 8px;
padding-left: 10px;
}
</style>
client/galaxy/scripts/components/PluginList.vue
+1 -1
View File
@@ -33,7 +33,7 @@
<div class="icon-dropdown fa fa-caret-down"/>
</div>
<button type="button" class="ui-button-default float-left mt-3 btn btn-primary" @click="create(plugin)">
<i class="icon fa fa-check ui-margin-right"/>
<i class="icon fa fa-check"/>
<span class="title">Create Visualization</span>
</button>
</div>
client/galaxy/scripts/components/RuleCollectionBuilder.vue
+1 -2
View File
@@ -218,7 +218,7 @@
</column-selector>
</div>
<div class="buttons rule-edit-buttons d-flex justify-content-end">
<button v-b-tooltip.hover :title="titleAddColumnDefinition" type="button" class="dropdown-toggle btn btn-primary mr-1" data-toggle="dropdown" v-if="unmappedTargets.length > 0">
<button type="button" class="dropdown-toggle btn btn-primary mr-1" data-toggle="dropdown" v-if="unmappedTargets.length > 0">
<span class="fa fa-plus rule-add-mapping"></span> {{ "Add Definition" }}<span class="caret"></span>
</button>
<div class="dropdown-menu" role="menu">
@@ -903,7 +903,6 @@ export default {
titleColumMenu: _l("Rules that generate new columns"),
titleRemoveMapping: _l("Remove column definition assignment"),
titleApplyColumnDefinitions: _l("Apply these column definitions and return to rules preview"),
titleAddColumnDefinition: _l("Assign a new piece of metadata as being derived from a column of the table"),
titleErrorOkay: _l("Dismiss this error and return to the rule builder to try again with new rules"),
namePlaceholder: _l("Enter a name for your new collection"),
activeRuleIndex: null,
client/galaxy/scripts/components/Sharing.vue
+33 -6
View File
@@ -1,7 +1,7 @@
<template>
<div v-if="ready">
<h2>Share or Publish {{model_class}} `{{item.title}}`</h2>
<b-alert variant="danger" :show="err_msg">
<b-alert :show="show_danger" variant="danger" dismissible>
{{ err_msg }}
</b-alert>
</br>
@@ -53,9 +53,17 @@
<div v-else>
<p>This {{model_class_lc}} is currently restricted so that only you and the users listed below can access it. You can:</p>
<b-button @click="setSharing('make_accessible_via_link')">Make {{model_class}} Accessible via Link</b-button>
<span v-if="has_possible_members" class="chkk">
Also make all objects within the {{model_class}} accessible.
<input type="checkbox" v-model="make_members_public" id="chk_make_members_public">
</span>
<div class="toolParamHelp">Generates a web link that you can share with other people so that they can view and import the {{model_class_lc}}.</div>
<br/>
<b-button id="make_accessible_and_publish" @click="setSharing('make_accessible_and_publish')">Make {{model_class}} Accessible and Publish</b-button>
<span v-if="has_possible_members" class="chkk">
Also make all objects within the {{model_class}} accessible.
<input type="checkbox" v-model="make_members_public" id="chk_make_members_public">
</span>
<div class="toolParamHelp">Makes the {{model_class_lc}} accessible via link (see above) and publishes the {{model_class_lc}} to Galaxy's <a :href="published_url" target="_top">Published {{plural_name}}</a> section, where it is publicly listed and searchable.</div>
</div>
<br/><br/>
@@ -131,6 +139,12 @@ export default {
},
slug_url() {
return `${Galaxy.root}${this.model_class_lc}/set_slug_async/?id=${this.id}`;
},
has_possible_members() {
return ["history"].indexOf(this.model_class_lc) > -1;
},
show_danger() {
return this.err_msg !== null;
}
},
data() {
@@ -147,7 +161,8 @@ export default {
published: false,
users_shared_with: []
},
share_fields: ["email", { key: "id", label: "" }]
share_fields: ["email", { key: "id", label: "" }],
make_members_public: false
};
},
created: function() {
@@ -180,13 +195,20 @@ export default {
.catch(error => (this.err_msg = error.response.data.err_msg));
},
setSharing: function(action, user_id) {
let data = {
action: action,
user_id: user_id
};
if (this.has_possible_members) {
data.make_members_public = this.make_members_public;
}
axios
.post(`${Galaxy.root}api/${this.plural_name_lc}/${this.id}/sharing`, {
action: action,
user_id: user_id
})
.post(`${Galaxy.root}api/${this.plural_name_lc}/${this.id}/sharing`, data)
.then(response => {
Object.assign(this.item, response.data);
if (response.data.skipped) {
this.err_msg = "Some of the items within this object were not published due to an error.";
}
})
.catch(error => (this.err_msg = error.response.data.err_msg));
},
@@ -233,3 +255,8 @@ export default {
}
};
</script>
<style>
.chkk {
display: inline-block;
}
</style>
client/galaxy/scripts/components/admin/BaseGrid.vue
+8 -3
View File
@@ -1,9 +1,9 @@
<template>
<div class="toolForm">
<div class="toolFormTitle">
<div class="card">
<div class="card-header">
<slot name="title">{{ title }}</slot>
</div>
<div class="toolFormBody">
<div class="card-body">
<table class="manage-table colored" border="0" cellspacing="0" cellpadding="0" width="100%">
<slot name="columns">
<th v-for="column in columns" bgcolor="#D8D8D8">{{ column.text }}</th>
@@ -41,3 +41,8 @@ export default {
}
};
</script>
<style>
.card-body {
overflow: auto;
}
</style>
client/galaxy/scripts/galaxy.pages.js
+5 -1
View File
@@ -447,7 +447,11 @@ WYMeditor.editor.prototype.dialog = function(dialogType, dialogFeatures, bodyHtm
// Get item ID and name.
var item_id = elt.val();
// Use ':first' because there are many labels in table; the first one is the item name.
var item_name = elt.closest('td').next('td').find('label').text();
var item_name = elt
.closest("td")
.next("td")
.find("label")
.text();
if (make_importable) make_item_importable(item_info.controller, item_id, item_info.singular);
client/galaxy/scripts/layout/scratchbook.js
+26 -26
View File
@@ -12,28 +12,28 @@ import _l from "utils/localization";
export default Backbone.View.extend({
initialize: function(options) {
var self = this;
options = options || {};
this.frames = new Frames.View({ visible: false });
this.setElement(this.frames.$el);
this.active = false;
this.buttonActive = options.collection.add({
id: "enable-scratchbook",
icon: "fa-th",
tooltip: _l("Enable/Disable Scratchbook"),
onclick: function() {
self.active = !self.active;
self.buttonActive.set({
toggle: self.active,
show_note: self.active,
note_cls: self.active && "fa fa-check"
onclick: () => {
this.active = !this.active;
this.buttonActive.set({
toggle: this.active,
show_note: this.active,
note_cls: this.active && "fa fa-check"
});
if (!self.active) {
self.frames.hide();
if (!this.active) {
this.frames.hide();
}
},
onbeforeunload: function() {
if (self.frames.length() > 0) {
return `You opened ${self.frames.length()} frame(s) which will be lost.`;
onbeforeunload: () => {
if (this.frames.length() > 0) {
return `You opened ${this.frames.length()} frame(s) which will be lost.`;
}
}
});
@@ -43,28 +43,28 @@ export default Backbone.View.extend({
tooltip: _l("Show/Hide Scratchbook"),
show_note: true,
visible: false,
onclick: function(e) {
if (self.frames.visible) {
self.frames.hide();
onclick: e => {
if (this.frames.visible) {
this.frames.hide();
} else {
self.frames.show();
this.frames.show();
}
}
});
this.frames
.on("add remove", function() {
if (this.visible && this.length() === 0) {
this.hide();
.on("add remove", () => {
if (this.frames.visible && this.frames.length() === 0) {
this.frames.hide();
}
self.buttonLoad.set({
note: this.length(),
visible: this.length() > 0
this.buttonLoad.set({
note: this.frames.length(),
visible: this.frames.length() > 0
});
})
.on("show hide ", function() {
self.buttonLoad.set({
toggle: this.visible,
icon: (this.visible && "fa-eye") || "fa-eye-slash"
.on("show hide ", () => {
this.buttonLoad.set({
toggle: this.frames.visible,
icon: (this.frames.visible && "fa-eye") || "fa-eye-slash"
});
});
this.history_cache = {};
client/galaxy/scripts/mvc/dataset/dataset-edit-attributes.js
+5 -5
View File
@@ -118,7 +118,7 @@ var View = Backbone.View.extend({
var form = new Form({
title: _l("Edit attributes"),
operations: {
submit_attributes: new Ui.ButtonIcon({
submit_attributes: new Ui.Button({
tooltip: _l("Save attributes of the dataset."),
icon: "fa-floppy-o",
title: _l("Save"),
@@ -126,7 +126,7 @@ var View = Backbone.View.extend({
self._submit("attributes", form);
}
}),
submit_autodetect: new Ui.ButtonIcon({
submit_autodetect: new Ui.Button({
tooltip:
"This will inspect the dataset and attempt to correct the values of fields if they are not accurate.",
icon: "fa-undo",
@@ -146,7 +146,7 @@ var View = Backbone.View.extend({
var form = new Form({
title: _l("Convert to new format"),
operations: {
submit_conversion: new Ui.ButtonIcon({
submit_conversion: new Ui.Button({
tooltip: _l("Convert the datatype to a new format."),
title: _l("Convert datatype"),
icon: "fa-exchange",
@@ -165,7 +165,7 @@ var View = Backbone.View.extend({
var form = new Form({
title: _l("Change datatype"),
operations: {
submit_datatype: new Ui.ButtonIcon({
submit_datatype: new Ui.Button({
tooltip: _l("Change the datatype to a new type."),
title: _l("Change datatype"),
icon: "fa-exchange",
@@ -184,7 +184,7 @@ var View = Backbone.View.extend({
var form = new Form({
title: _l("Manage dataset permissions"),
operations: {
submit_permission: new Ui.ButtonIcon({
submit_permission: new Ui.Button({
tooltip: _l("Save permissions."),
title: _l("Save permissions"),
icon: "fa-floppy-o ",
client/galaxy/scripts/mvc/dataset/dataset-error.js
+22 -5
View File
@@ -2,6 +2,12 @@ import _l from "utils/localization";
import Utils from "utils/utils";
import Ui from "mvc/ui/ui-misc";
import Form from "mvc/form/form-view";
import * as Backbone from "backbone";
import * as _ from "underscore";
/* global Galaxy */
/* global $ */
/** Dataset edit attributes view */
var View = Backbone.View.extend({
initialize: function() {
@@ -57,12 +63,23 @@ var View = Backbone.View.extend({
<p>An error occured while running the tool <b>${job.tool_id}</b>.</p>
<p>Tool execution generated the following messages:</p>
<pre class="code">${_.escape(job.stderr)}</pre>
<h2>Report This Error</h2>
<h3>Troubleshoot This Error</h3>
<p>
Usually the local Galaxy administrators regularly review errors that occur on the server
However, if you would like to provide additional information (such as what you were trying
to do when the error occurred) and a contact e-mail address, we will be better able to
investigate your problem and get back to you.
There are a number of help resources to self diagnose and
correct problems.
Start here: <a
href="https://galaxyproject.org/support/tool-error/"
target="_blank"> My job ended with an error. What can I do?</a>
</p>
<h3>Report This Error</h3>
<p>
Usually the local Galaxy administrators regularly review errors
that occur on the server However, if you would like to provide
additional information (such as what you were trying to do when
the error occurred) and a contact e-mail address, we will be
better able to investigate your problem and get back to you.
</p>`);
this.$el.append(this._getBugFormTemplate(dataset, job));
},
client/galaxy/scripts/mvc/dataset/dataset-li-edit.js
+26 -26
View File
@@ -5,6 +5,10 @@ import ANNOTATIONS from "mvc/annotation";
import faIconButton from "ui/fa-icon-button";
import BASE_MVC from "mvc/base-mvc";
import _l from "utils/localization";
import * as _ from "underscore";
/* global Galaxy */
/* global $ */
//==============================================================================
var _super = DATASET_LI.DatasetListItemView;
@@ -100,8 +104,7 @@ var DatasetListItemEdit = _super.extend(
faIcon: "fa-times",
classes: "delete-btn",
onclick: function() {
// ...bler... tooltips being left behind in DOM (hover out never called on deletion)
self.$el.find(".icon-btn.delete-btn").trigger("mouseout");
self.$el.find(".icon-btn.delete-btn").tooltip("dispose");
self.model["delete"]();
}
});
@@ -261,32 +264,29 @@ var DatasetListItemEdit = _super.extend(
}
if (visualizations.length >= 1) {
var url = Galaxy.root + "visualizations?dataset_id=" + this.model.get("id");
return $("<a/>")
.addClass("visualization-link icon-btn")
.attr("href", url)
.append($("<span/>").addClass("fa fa-bar-chart-o"))
.on("click", function(e) {
Galaxy.frame.add({ url: url, title: "Visualization" });
e.preventDefault();
});
let dsid = this.model.get("id");
let url = Galaxy.root + "visualizations?dataset_id=" + dsid;
return faIconButton({
title: _l("Visualize this data"),
href: url,
classes: "visualization-link",
faIcon: "fa-bar-chart-o",
onclick: ev => {
if (Galaxy.frame && Galaxy.frame.active) {
ev.preventDefault();
Galaxy.frame.add({ url: url, title: "Visualization" });
} else if (Galaxy.router) {
ev.preventDefault();
Galaxy.router.push("visualizations", {
dataset_id: dsid
});
Galaxy.trigger("activate-hda", dsid);
}
}
});
}
},
/** add scratchbook functionality to visualization links */
_addScratchBookFn: function($links) {
$links.click(ev => {
if (Galaxy.frame && Galaxy.frame.active) {
Galaxy.frame.add({
title: _l("Visualization"),
url: $(this).attr("href")
});
ev.preventDefault();
ev.stopPropagation();
}
});
},
//TODO: if possible move these to readonly view - but display the owner's tags/annotation (no edit)
/** Render the tags list/control */
_renderTags: function($where) {
@@ -393,7 +393,7 @@ var DatasetListItemEdit = _super.extend(
/** listener for item purge (in the messages section) */
_clickPurgeLink: function(ev) {
if (confirm(_l("This will permanently remove the data in your dataset. Are you sure?"))) {
if (window.confirm(_l("This will permanently remove the data in your dataset. Are you sure?"))) {
this.model.purge();
}
return false;
client/galaxy/scripts/mvc/form/form-input.js
+4 -4
View File
@@ -95,7 +95,7 @@ export default Backbone.View.extend({
// render error messages
var error_text = this.model.get("error_text");
this.$error[error_text ? "show" : "hide"]();
this.$el[error_text ? "addClass" : "removeClass"]("ui-error");
this.$el[error_text ? "addClass" : "removeClass"]("alert alert-danger");
this.$error_text.html(error_text);
// render backdrop
this.$backdrop[this.model.get("backdrop") ? "show" : "hide"]();
@@ -134,8 +134,8 @@ export default Backbone.View.extend({
.addClass("ui-form-element")
.append(
$("<div/>")
.addClass("ui-form-error ui-error")
.append($("<span/>").addClass("fa fa-arrow-down"))
.addClass("ui-form-error")
.append($("<span/>").addClass("fa fa-arrow-down mr-1"))
.append($("<span/>").addClass("ui-form-error-text"))
)
.append(
@@ -152,7 +152,7 @@ export default Backbone.View.extend({
.append(
$("<div/>")
.addClass("ui-form-field")
.append($("<span/>").addClass("ui-form-info"))
.append($("<span/>").addClass("ui-form-info form-text text-muted"))
.append($("<div/>").addClass("ui-form-backdrop"))
)
.append($("<div/>").addClass("ui-form-preview"));
client/galaxy/scripts/mvc/form/form-repeat.js
+5 -5
View File
@@ -13,11 +13,11 @@ export var View = Backbone.View.extend({
max: null,
min: null
});
this.button_new = new Ui.ButtonIcon({
this.button_new = new Ui.Button({
icon: "fa-plus",
title: `Insert ${this.options.title}`,
tooltip: `Add new ${this.options.title} block`,
cls: "ui-button-icon ui-clear-float form-repeat-add",
cls: "btn btn-secondary float-none form-repeat-add",
onclick: function() {
if (options.onnew) {
options.onnew();
@@ -42,7 +42,7 @@ export var View = Backbone.View.extend({
Galaxy.emit.debug("form-repeat::add()", "Duplicate or invalid repeat block id.");
return;
}
var button_delete = new Ui.ButtonIcon({
var button_delete = new Ui.Button({
icon: "fa-trash-o",
tooltip: _l("Delete this repeat block"),
cls: "ui-button-icon-plain form-repeat-delete",
@@ -55,7 +55,7 @@ export var View = Backbone.View.extend({
var portlet = new Portlet.View({
id: options.id,
title: _l("placeholder"),
cls: options.cls || "ui-portlet-repeat",
cls: options.cls || "ui-portlet-section",
operations: { button_delete: button_delete }
});
portlet.append(options.$el);
@@ -96,7 +96,7 @@ export var View = Backbone.View.extend({
if (_.isEmpty(this.list)) {
this.$el.append(
$("<div/>")
.addClass("ui-form-info")
.addClass("form-text text-muted")
.html(this.options.empty_text)
);
}
client/galaxy/scripts/mvc/form/form-section.js
+2 -2
View File
@@ -59,7 +59,7 @@ var View = Backbone.View.extend({
var sub_section = new View(this.app, {
inputs: input_def.cases[i].inputs
});
this._append(sub_section.$el.addClass("ui-form-section"), `${input_def.id}-section-${i}`);
this._append(sub_section.$el.addClass("ui-portlet-section pl-2"), `${input_def.id}-section-${i}`);
}
field.model.set("onchange", value => {
var selectedCase = self.app.data.matchCase(input_def, value);
@@ -148,7 +148,7 @@ var View = Backbone.View.extend({
portlet.append(new View(this.app, { inputs: input_def.inputs }).$el);
portlet.append(
$("<div/>")
.addClass("ui-form-info")
.addClass("form-text text-muted")
.html(input_def.help)
);
this.app.on("expand", input_id => {
client/galaxy/scripts/mvc/form/form-view.js
+2 -2
View File
@@ -9,7 +9,7 @@ export default Backbone.View.extend({
initialize: function(options) {
this.model = new Backbone.Model({
initial_errors: false,
cls: "ui-portlet-limited",
cls: "ui-portlet",
icon: null,
always_refresh: true,
status: "warning",
@@ -131,8 +131,8 @@ export default Backbone.View.extend({
icon: options.icon,
title: options.title,
title_id: options.title_id,
cls: options.cls,
operations: !options.hide_operations && options.operations,
cls: options.cls,
buttons: options.buttons,
collapsible: options.collapsible,
collapsed: options.collapsed,
client/galaxy/scripts/mvc/form/form-wrapper.js
+1 -1
View File
@@ -35,7 +35,7 @@ var View = Backbone.View.extend({
tooltip: options.submit_tooltip,
title: options.submit_title || "Save",
icon: options.submit_icon || "fa-save",
cls: "btn btn-primary ui-clear-float",
cls: "btn btn-primary",
onclick: function() {
self._submit(form);
}
client/galaxy/scripts/mvc/history/history-view-edit-current.js
+20 -6
View File
@@ -1,7 +1,10 @@
import HISTORY_MODEL from "mvc/history/history-model";
import HISTORY_VIEW_EDIT from "mvc/history/history-view-edit";
import BASE_MVC from "mvc/base-mvc";
import _l from "utils/localization";
import * as _ from "underscore";
/* global Galaxy */
/* global $ */
// ============================================================================
/** session storage for history panel preferences (and to maintain state)
@@ -386,7 +389,18 @@ var CurrentHistoryView = _super.extend(
},
// when the center panel is given a new view, clear the current indicator
"center-panel:load": function(view) {
this._setCurrentContentById();
try {
let hdaId = view.model.attributes.dataset_id || null;
if (hdaId === null) {
throw "Invalid id";
}
this._setCurrentContentById(`dataset-${hdaId}`);
} catch (e) {
this._setCurrentContentById();
}
},
"activate-hda": function(hdaId) {
this._setCurrentContentById(`dataset-${hdaId}`);
}
});
},
@@ -443,7 +457,7 @@ var CurrentHistoryView = _super.extend(
/** unhide any hidden datasets */
unhideHidden: function() {
var self = this;
if (confirm(_l("Really unhide all hidden datasets?"))) {
if (window.confirm(_l("Really unhide all hidden datasets?"))) {
// get all hidden, regardless of deleted/purged
return self.model.contents
._filterAndUpdate({ visible: false, deleted: "", purged: "" }, { visible: true })
@@ -454,13 +468,13 @@ var CurrentHistoryView = _super.extend(
}
});
}
return jQuery.when();
return $.when();
},
/** delete any hidden datasets */
deleteHidden: function() {
var self = this;
if (confirm(_l("Really delete all hidden datasets?"))) {
if (window.confirm(_l("Really delete all hidden datasets?"))) {
return self.model.contents._filterAndUpdate(
// get all hidden, regardless of deleted/purged
{ visible: false, deleted: "", purged: "" },
@@ -468,7 +482,7 @@ var CurrentHistoryView = _super.extend(
{ deleted: true, visible: true }
);
}
return jQuery.when();
return $.when();
},
/** Return a string rep of the history */
client/galaxy/scripts/mvc/history/history-view.js
+1 -1
View File
@@ -646,7 +646,7 @@ export function historyEntry(options) {
window.location = "${ switch_to_url }";
}
});
// use_panels effects where the the center_panel() is rendered:
// use_panels affects where the the center_panel() is rendered:
// w/o it renders to the body, w/ it renders to #center - we need to adjust a few things for scrolling to work
if (options.hasMasthead) {
$("#center").addClass("flex-vertical-container");
client/galaxy/scripts/mvc/lazy/lazy-limited.js
+2 -1
View File
@@ -10,7 +10,8 @@ export default Backbone.View.extend({
this.content_list = {};
this.$message = $("<div/>")
.addClass("ui-limitloader")
.append(`...only the first ${this.max} entries are visible.`);
.append(`...only the first ${this.max} entries are visible.`)
.hide();
this.$container.append(this.$message);
this.listenTo(this.collection, "reset", this._reset, this);
this.listenTo(this.collection, "add", this._refresh, this);
client/galaxy/scripts/mvc/rules/rule-definitions.js
+3 -3
View File
@@ -346,7 +346,7 @@ const RULES = {
},
save: (component, rule) => {
rule.target_column = component.addColumnSubstrTarget;
rule.length = component.addColumnSubstrLength;
rule.length = parseInt(component.addColumnSubstrLength);
rule.substr_type = component.addColumnSubstrType;
},
apply: (rule, data, sources, columns) => {
@@ -476,13 +476,13 @@ const RULES = {
component.addFilterCountWhich = "first";
component.addFilterCountInvert = false;
} else {
component.addFilterCountN = rule.count;
component.addFilterCountN = parseInt(rule.count);
component.addFilterCountWhich = rule.which;
component.addFilterCountInvert = rule.inverse;
}
},
save: (component, rule) => {
rule.count = component.addFilterCountN;
rule.count = parseInt(component.addFilterCountN);
rule.which = component.addFilterCountWhich;
rule.invert = component.addFilterCountInvert;
},
client/galaxy/scripts/mvc/tool/tool-form-base.js
+4 -3
View File
@@ -82,13 +82,13 @@ export default FormBase.extend({
if (!this.model.get("collapsible")) {
this.$el.append(
$("<div/>")
.addClass("ui-margin-top-large")
.addClass("mt-2")
.append(this._footer())
);
}
options.tool_errors &&
this.message.update({
status: 'danger',
status: "danger",
message: options.tool_errors,
persistent: true
});
@@ -258,7 +258,8 @@ export default FormBase.extend({
/** Templates */
_templateHelp: function(options) {
var $tmpl = $("<div/>")
.addClass("ui-form-help")
.addClass("form-help")
.addClass("form-text")
.append(options.help);
$tmpl.find("a").attr("target", "_blank");
$tmpl.find("img").each(function() {
client/galaxy/scripts/mvc/tool/tool-form-composite.js
+11 -15
View File
@@ -26,7 +26,7 @@ var View = Backbone.View.extend({
this.setElement(
$("<div/>")
.addClass("ui-form-composite")
.append((this.$message = $("<div/>")))
.append((this.$message = $("<div/>").addClass("mb-4")))
.append((this.$header = $("<div/>")))
.append((this.$steps = $("<div/>")))
);
@@ -71,7 +71,7 @@ var View = Backbone.View.extend({
cls_disable: "fa fa-undo",
errors: step.messages,
initial_errors: true,
cls: "ui-portlet-narrow",
cls: "ui-portlet-section",
hide_operations: true,
needs_refresh: false,
always_refresh: step.step_type != "tool"
@@ -129,14 +129,14 @@ var View = Backbone.View.extend({
this.wp_inputs = {};
function _ensureWorkflowParameter(wp_name) {
return self.wp_inputs[wp_name] = self.wp_inputs[wp_name] || {
return (self.wp_inputs[wp_name] = self.wp_inputs[wp_name] || {
label: wp_name,
name: wp_name,
type: "text",
color: `hsl( ${++wp_count * 100}, 70%, 30% )`,
style: "ui-form-wp-source",
links: []
};
});
}
function _handleWorkflowParameter(value, callback) {
@@ -228,14 +228,10 @@ var View = Backbone.View.extend({
}
});
this.$header
.addClass("ui-form-header")
.addClass("h4")
.empty()
.append(
new Ui.Label({
title: `Workflow: ${this.model.get("name")}`
}).$el
)
.append(this.execute_btn.$el);
.append(`<b>Workflow: ${this.model.get("name")}<b>`)
.append(this.execute_btn.$el.addClass("float-right mt-3"));
},
/** Render message */
@@ -274,7 +270,7 @@ var View = Backbone.View.extend({
this.wp_form = new Form({
title: "<b>Workflow Parameters</b>",
inputs: this.wp_inputs,
cls: "ui-portlet-narrow",
cls: "ui-portlet-section",
onchange: function() {
_.each(self.wp_form.input_list, (input_def, i) => {
_.each(input_def.links, step => {
@@ -290,7 +286,7 @@ var View = Backbone.View.extend({
/** Render workflow parameters */
_renderHistory: function() {
this.history_form = new Form({
cls: "ui-portlet-narrow",
cls: "ui-portlet-section",
title: "<b>History Options</b>",
inputs: [
{
@@ -327,7 +323,7 @@ var View = Backbone.View.extend({
this.workflow_resource_parameters_form = null;
if (!_.isEmpty(this.model.get("workflow_resource_parameters"))) {
this.workflow_resource_parameters_form = new Form({
cls: "ui-portlet-narrow",
cls: "ui-portlet-section",
title: "<b>Workflow Resource Options</b>",
inputs: this.model.get("workflow_resource_parameters")
});
@@ -348,7 +344,7 @@ var View = Backbone.View.extend({
this.display_use_cached_job_checkbox = display_use_cached_job_checkbox === "true";
if (this.display_use_cached_job_checkbox) {
this.job_options_form = new Form({
cls: "ui-portlet-narrow",
cls: "ui-portlet-section",
title: "<b>Job re-use Options</b>",
inputs: [
{
client/galaxy/scripts/mvc/tool/tool-form.js
+4 -5
View File
@@ -55,8 +55,7 @@ var View = Backbone.View.extend({
new Ui.Message({
message: error_message,
status: "danger",
persistent: true,
large: true
persistent: true
}).$el
);
} else {
@@ -121,8 +120,8 @@ var View = Backbone.View.extend({
icon: "fa-check",
tooltip: `Execute: ${options.name} (${options.version})`,
title: _l("Execute"),
cls: "btn btn-primary ui-clear-float",
wait_cls: "btn btn-info ui-clear-float",
cls: "btn btn-primary",
wait_cls: "btn btn-info",
onclick: function() {
execute_button.wait();
form.portlet.disable();
@@ -323,7 +322,7 @@ var View = Backbone.View.extend({
var index = {};
for (let i in job_def.inputs) {
let input = job_def.inputs[i];
if ($.isArray(input.values)) {
if (input && $.isArray(input.values)) {
for (let j of input.values) {
if (j.src && !index[j.id]) {
inputs.push(j);
client/galaxy/scripts/mvc/tool/tools.js
+1 -1
View File
@@ -828,7 +828,7 @@ var templates = {
'<a class="<%- id %> tool-link" href="<%= link %>" target="<%- target %>" minsizehint="<%- min_width %>">',
'<span class="labels">',
"<% _.each( labels, function( label ){ %>",
'<span class="badge badge-default badge-<%- label %>">',
'<span class="badge badge-primary badge-<%- label %>">',
"<%- label %>",
"</span>",
"<% }); %>",
client/galaxy/scripts/mvc/toolshed/repository-view.js
-1
View File
@@ -153,7 +153,6 @@ var ToolShedRepositoryView = Backbone.View.extend({
changeset: changeset
};
$.get(api_url, params, data => {
data.cls = "ui-portlet-plain";
var toolform = new FormView(data);
Utils.deepeach(data.inputs, input => {
if (input.type) {
client/galaxy/scripts/mvc/ui/ui-buttons.js
+22 -67
View File
@@ -5,7 +5,7 @@ import * as Backbone from "backbone";
/* global $ */
/** This renders the default button which is used e.g. at the bottom of the upload modal. */
var ButtonDefault = Backbone.View.extend({
var Button = Backbone.View.extend({
initialize: function(options) {
this.model =
(options && options.model) ||
@@ -53,13 +53,17 @@ var ButtonDefault = Backbone.View.extend({
this.$title.removeClass().addClass("title");
if (options.wait) {
this.$el.addClass(options.wait_cls).prop("disabled", true);
this.$icon.addClass("fa-spinner fa-spin ui-margin-right");
this.$icon.addClass("fa-spinner fa-spin mr-1");
this.$title.html(options.wait_text);
} else {
this.$el.addClass(options.cls);
this.$icon.addClass(options.icon);
this.$title.html(options.title);
options.icon && options.title && this.$icon.addClass("ui-margin-right");
if (options.title) {
this.$title.html(options.title);
if (options.icon) {
this.$icon.addClass("mr-1");
}
}
}
},
@@ -100,7 +104,7 @@ var ButtonDefault = Backbone.View.extend({
});
/** This button allows the right-click/open-in-new-tab feature, its used e.g. for panel buttons. */
var ButtonLink = ButtonDefault.extend({
var ButtonLink = Button.extend({
initialize: function(options) {
this.model =
(options && options.model) ||
@@ -153,6 +157,7 @@ var ButtonCheck = Backbone.View.extend({
}).set(options);
this.setElement(
$("<div/>")
.addClass("mb-2")
.append((this.$icon = $("<span/>")))
.append((this.$title = $("<span/>")))
);
@@ -173,7 +178,7 @@ var ButtonCheck = Backbone.View.extend({
this.$title.html(options.title);
this.$icon
.removeClass()
.addClass("icon fa ui-margin-right")
.addClass("icon fa mr-1")
.addClass(options.icons[options.value]);
},
@@ -195,56 +200,8 @@ var ButtonCheck = Backbone.View.extend({
}
});
/** This renders a differently styled, more compact button version. */
var ButtonIcon = ButtonDefault.extend({
initialize: function(options) {
this.model =
(options && options.model) ||
new Backbone.Model({
id: Utils.uid(),
title: "",
icon: "",
visible: true,
cls: "ui-button-icon",
disabled: false
}).set(options);
this.setElement(
$("<div/>").append(
(this.$button = $("<div/>")
.append((this.$icon = $("<i/>")))
.append((this.$title = $("<span/>"))))
)
);
this.listenTo(this.model, "change", this.render, this);
this.render();
},
render: function(options) {
var options = this.model.attributes;
this.$el
.removeClass()
.addClass(options.cls)
.addClass(options.disabled && "disabled")
.css("display", options.visible ? "inline-block" : "none")
.attr("disabled", options.disabled)
.attr("id", options.id)
.off("click")
.on("click", () => {
$(".tooltip").hide();
!options.disabled && options.onclick && options.onclick();
});
this.$button.addClass("button").tooltip({ title: options.tooltip || "", placement: "bottom" });
this.$icon
.removeClass()
.addClass("icon fa")
.addClass(options.icon);
this.$title.addClass("title").html(options.title);
options.icon && options.title && this.$icon.addClass("ui-margin-right");
}
});
/** This class creates a button with dropdown menu. */
var ButtonMenu = ButtonDefault.extend({
var ButtonMenu = Backbone.View.extend({
$menu: null,
initialize: function(options) {
this.model =
@@ -255,7 +212,7 @@ var ButtonMenu = ButtonDefault.extend({
pull: "right",
icon: null,
onclick: null,
cls: "ui-button-icon ui-button-menu",
cls: "btn btn-secondary float-right",
tooltip: "",
target: "",
href: "",
@@ -266,7 +223,7 @@ var ButtonMenu = ButtonDefault.extend({
this.collection = new Backbone.Collection();
this.setElement(
$("<div/>").append(
(this.$root = $("<div/>")
(this.$root = $("<button/>")
.append((this.$icon = $("<i/>")))
.append((this.$title = $("<span/>"))))
)
@@ -281,13 +238,12 @@ var ButtonMenu = ButtonDefault.extend({
this.$el
.removeClass()
.addClass("dropdown")
.addClass(options.cls)
.attr("id", options.id)
.css({
display: options.visible && this.collection.where({ visible: true }).length > 0 ? "block" : "none"
});
this.$root
.addClass("root button dropdown-toggle")
.addClass(options.cls)
.attr("data-toggle", "dropdown")
.tooltip({ title: options.tooltip || "", placement: "bottom" })
.off("click")
@@ -300,11 +256,11 @@ var ButtonMenu = ButtonDefault.extend({
.removeClass()
.addClass("icon fa")
.addClass(options.icon);
this.$title
.removeClass()
.addClass("title")
.html(options.title);
options.icon && options.title && this.$icon.addClass("ui-margin-right");
options.title &&
this.$title
.removeClass()
.addClass("title ml-1")
.html(options.title);
this.$menu && this.$menu.remove();
if (this.collection.length > 0) {
this.$menu = $("<ul/>")
@@ -324,7 +280,7 @@ var ButtonMenu = ButtonDefault.extend({
})
.append(
$("<i/>")
.addClass("fa")
.addClass("fa mr-2")
.addClass(suboptions.icon)
.css("display", suboptions.icon ? "inline-block" : "none")
)
@@ -359,9 +315,8 @@ var ButtonMenu = ButtonDefault.extend({
});
export default {
ButtonDefault: ButtonDefault,
Button: Button,
ButtonLink: ButtonLink,
ButtonIcon: ButtonIcon,
ButtonCheck: ButtonCheck,
ButtonMenu: ButtonMenu
};
client/galaxy/scripts/mvc/ui/ui-list.js
+30 -49
View File
@@ -1,45 +1,35 @@
// dependencies
import Utils from "utils/utils";
import Portlet from "mvc/ui/ui-portlet";
import Ui from "mvc/ui/ui-misc";
// ui list element
var View = Backbone.View.extend({
// create portlet to keep track of selected list elements
initialize: function(options) {
// link this
var self = this;
// initialize options
this.options = options;
this.name = options.name || "element";
this.multiple = options.multiple || false;
// create message handler
this.message = new Ui.Message();
this.message = new Ui.Message({ cls: "col mb-0" });
// create portlet
this.portlet = new Portlet.View({ cls: "ui-portlet-section" });
// create selections area
this.selections = $("<div/>");
// create select field containing the options which can be inserted into the list
this.select = new Ui.Select.View({ optional: options.optional });
// create insert new list element button
this.button = new Ui.ButtonIcon({
icon: "fa fa-sign-in",
tooltip: `Insert new ${this.name}`,
onclick: function() {
self.add({
id: self.select.value(),
name: self.select.text()
});
}
this.$button = $(`<button class="fa fa-sign-in"/>`);
this.$button.on("click", () => {
this.add({
id: this.select.value(),
name: this.select.text()
});
});
// build main element
this.setElement(this._template(options));
this.$(".ui-list-message").append(this.message.$el);
this.$(".ui-list-portlet").append(this.portlet.$el);
this.$(".ui-list-button").append(this.button.$el);
this.$(".ui-list-selections").append(this.selections);
this.$(".ui-list-button").append(this.$button);
this.$(".ui-list-select").append(this.select.$el);
},
@@ -47,7 +37,7 @@ var View = Backbone.View.extend({
value: function(val) {
// set new value
if (val !== undefined) {
this.portlet.empty();
this.selections.empty();
if ($.isArray(val)) {
for (var i in val) {
var v = val[i];
@@ -96,17 +86,11 @@ var View = Backbone.View.extend({
name: options.name
})
);
$el.on("click", () => {
$el.find("button").on("click", () => {
$el.remove();
self._refresh();
});
$el.on("mouseover", () => {
$el.addClass("portlet-highlight");
});
$el.on("mouseout", () => {
$el.removeClass("portlet-highlight");
});
this.portlet.append($el);
this.selections.append($el);
this._refresh();
} else {
this.message.update({
@@ -129,36 +113,33 @@ var View = Backbone.View.extend({
/** Refresh view */
_refresh: function() {
if (this.$(".ui-list-id").length > 0) {
!this.multiple && this.button.disable();
this.$(".ui-list-portlet").show();
!this.multiple && this.$button.attr("disabled", true);
} else {
this.button.enable();
this.$(".ui-list-portlet").hide();
this.$button.attr("disabled", false);
}
this.options.onchange && this.options.onchange();
},
/** Main Template */
_template: function(options) {
return (
'<div class="ui-list">' +
'<div class="ui-margin-top">' +
'<span class="ui-list-button"/>' +
'<span class="ui-list-select"/>' +
"</div>" +
'<div class="ui-list-message"/>' +
'<div class="ui-list-portlet"/>' +
"</div>"
);
return `<div class="ui-list container">
<div class="row">
<div class="col-1 pl-0 mb-2">
<div class="ui-list-button"/>
</div>
<div class="ui-list-select col pr-0"/>
</div>
<div class="ui-list-message mt-2 row"/>
<div class="ui-list-selections mt-2"/>
</div>`;
},
/** Row Template */
_templateRow: function(options) {
return `<div id="${
options.id
}" class="ui-list-id"><span class="ui-list-delete fa fa-trash"/><span class="ui-list-name">${
options.name
}</span></div>`;
return `<div id="${options.id}" class="ui-list-id row mt-2">
<button class="ui-list-delete fa fa-trash mr-3"/>
<div class="ui-list-name">${options.name}</span>
</div>`;
}
});
client/galaxy/scripts/mvc/ui/ui-misc.js
+5 -41
View File
@@ -8,32 +8,6 @@ import Drilldown from "mvc/ui/ui-drilldown";
import Buttons from "mvc/ui/ui-buttons";
import Modal from "mvc/ui/ui-modal";
/** Label wrapper */
export var Label = Backbone.View.extend({
tagName: "label",
initialize: function(options) {
this.model = (options && options.model) || new Backbone.Model(options);
this.tagName = options.tagName || this.tagName;
this.setElement($(`<${this.tagName}/>`));
this.listenTo(this.model, "change", this.render, this);
this.render();
},
title: function(new_title) {
this.model.set("title", new_title);
},
value: function() {
return this.model.get("title");
},
render: function() {
this.$el
.removeClass()
.addClass("ui-label")
.addClass(this.model.get("cls"))
.html(this.model.get("title"));
return this;
}
});
/** Displays messages used e.g. in the tool form */
export var Message = Backbone.View.extend({
initialize: function(options) {
@@ -56,18 +30,11 @@ export var Message = Backbone.View.extend({
this.model.set(options);
},
render: function() {
var status = this.model.get("status");
this.$el
.removeClass()
.addClass("ui-message")
.addClass(`alert alert-${status} mt-2`)
.addClass(this.model.get("cls"));
var status = this.model.get("status");
if (this.model.get("large")) {
this.$el.addClass(
`${(status == "success" && "done") || (status == "danger" && "error") || status}messagelarge`
);
} else {
this.$el.addClass("alert").addClass(`alert-${status}`);
}
if (this.model.get("message")) {
this.$el.html(this.messageForDisplay());
this.$el[this.model.get("fade") ? "fadeIn" : "show"]();
@@ -242,7 +209,7 @@ export var Upload = Backbone.View.extend({
.append(
(this.$file = $("<input/>")
.attr("type", "file")
.addClass("ui-margin-bottom"))
.addClass("mb-1"))
)
.append(
(this.$text = $("<textarea/>")
@@ -287,8 +254,7 @@ export var Upload = Backbone.View.extend({
* what we need where we need it, allowing for better package optimization.
*/
export let Button = Buttons.ButtonDefault;
export let ButtonIcon = Buttons.ButtonIcon;
export let Button = Buttons.Button;
export let ButtonCheck = Buttons.ButtonCheck;
export let ButtonMenu = Buttons.ButtonMenu;
export let ButtonLink = Buttons.ButtonLink;
@@ -298,13 +264,11 @@ export let Radio = Options.Radio;
export { Select, Slider, Drilldown };
export default {
Button: Buttons.ButtonDefault,
ButtonIcon: Buttons.ButtonIcon,
Button: Buttons.Button,
ButtonCheck: Buttons.ButtonCheck,
ButtonMenu: Buttons.ButtonMenu,
ButtonLink: Buttons.ButtonLink,
Input: Input,
Label: Label,
Message: Message,
UnescapedMessage: UnescapedMessage,
Upload: Upload,
client/galaxy/scripts/mvc/ui/ui-options.js
+9 -7
View File
@@ -37,7 +37,7 @@ var Base = Backbone.View.extend({
.empty()
.removeClass()
.addClass("ui-options")
.append((this.$message = $("<div/>")))
.append((this.$message = $("<div/>").addClass("mt-2")))
.append((this.$menu = $("<div/>").addClass("ui-options-menu")))
.append((this.$options = $(this._template())));
@@ -188,7 +188,7 @@ var Base = Backbone.View.extend({
this.$message
.show()
.removeClass()
.addClass(`ui-message alert alert-${status}`)
.addClass(`alert alert-${status}`)
.html(text);
},
@@ -271,11 +271,13 @@ RadioButton.View = Base.extend({
);
}
$el.append(
$("<input/>").attr({
type: "radio",
name: this.model.id,
value: pair.value
})
$("<input/>")
.attr({
type: "radio",
name: this.model.id,
value: pair.value
})
.hide()
);
if (pair.label) {
$el.append(pair.label);
client/galaxy/scripts/mvc/ui/ui-popover.js
+26 -177
View File
@@ -6,198 +6,47 @@ import * as _ from "underscore";
import Utils from "utils/utils";
/* global $ */
var View = Backbone.View.extend({
optionsDefault: {
with_close: true,
title: null,
placement: "top",
container: "body",
body: null
export default Backbone.View.extend({
initialize: function(options) {
this.options = _.defaults(options || {}, {
title: null,
placement: "top",
container: "body"
});
this.uid = Utils.uid();
this.$target = this.options.container;
},
initialize: function(options) {
this.setElement(this._template());
this.uid = Utils.uid();
this.options = _.defaults(options || {}, this.optionsDefault);
this.options.container.parent().append(this.el);
this.$title = this.$(".popover-title-label");
this.$close = this.$(".popover-close");
this.$body = this.$(".popover-content");
// add initial content
if (this.options.body) {
this.append(this.options.body);
}
/**
* Show popover
*/
show: function($content) {
let btn = "<i class='fa fa-times-circle'/>";
$(this.$target).popover({
title: `${this.options.title} ${btn}`,
placement: this.options.placement,
content: $content,
html: true,
trigger: "manual"
});
$(this.$target).popover("show");
// add event to hide if click is outside of popup and not on container
var self = this;
let $popover = $(this.$target.data("bs.popover").tip);
$popover.find(".popover-header > i").on("click", () => this.hide());
$("body").on(`mousedown.${this.uid}`, e => {
// the 'is' for buttons that trigger popups
// the 'has' for icons within a button that triggers a popup
if (
self.visible &&
!$(self.options.container).is(e.target) &&
!$(self.el).is(e.target) &&
$(self.el).has(e.target).length === 0
) {
if (!$($popover).is(e.target) && $($popover).has(e.target).length === 0) {
self.hide();
}
});
},
/**
* Render popover
*/
render: function() {
this.$title.html(this.options.title);
this.$el
.removeClass()
.addClass("ui-popover popover in")
.addClass(this.options.placement);
this.$el.css(this._get_placement(this.options.placement));
// configure close option
var self = this;
if (this.options.with_close) {
this.$close
.on("click", () => {
self.hide();
})
.show();
} else {
this.$close.off().hide();
}
},
/**
* Set the popover title
* @params{ String } newTitle - New popover title
*/
title: function(newTitle) {
if (newTitle !== undefined) {
this.options.title = newTitle;
this.$title.html(newTitle);
}
},
/**
* Show popover
*/
show: function() {
this.render();
this.$el.show();
this.visible = true;
},
/**
* Hide popover
*/
hide: function() {
this.$el.hide();
this.visible = false;
},
/**
* Append new content to the popover
* @params{ Object } $el - Dom element
*/
append: function($el) {
this.$body.append($el);
},
/**
* Remove all content
*/
empty: function() {
this.$body.empty();
},
/**
* Remove popover
*/
remove: function() {
$(this.$target).popover("dispose");
$("body").off(`mousedown.${this.uid}`);
this.$el.remove();
},
/**
* Improve popover location/placement
*/
_get_placement: function(placement) {
// get popover dimensions
var width = this._get_width(this.$el);
var height = this.$el.height();
// get container details
var $container = this.options.container;
var container_width = this._get_width($container);
var container_height = this._get_height($container);
var container_position = $container.position();
// get position
var top;
var left;
top = left = 0;
if (["top", "bottom"].indexOf(placement) != -1) {
left = container_position.left - width + (container_width + width) / 2;
switch (placement) {
case "top":
top = container_position.top - height - 5;
break;
case "bottom":
top = container_position.top + container_height + 5;
break;
}
} else {
top = container_position.top - height + (container_height + height) / 2;
switch (placement) {
case "right":
left = container_position.left + container_width;
break;
}
}
return { top: top, left: left };
},
/**
* Returns padding/margin corrected width
*/
_get_width: function($el) {
return (
$el.width() +
parseInt($el.css("padding-left")) +
parseInt($el.css("margin-left")) +
parseInt($el.css("padding-right")) +
parseInt($el.css("margin-right"))
);
},
/**
* Returns padding corrected height
*/
_get_height: function($el) {
return $el.height() + parseInt($el.css("padding-top")) + parseInt($el.css("padding-bottom"));
},
/**
* Return the popover template
*/
_template: function(options) {
return (
'<div class="ui-popover popover fade in">' +
'<div class="arrow"/>' +
'<div class="popover-title">' +
'<div class="popover-title-label"/>' +
'<div class="popover-close fa fa-times-circle"/>' +
"</div>" +
'<div class="popover-content"/>' +
"</div>"
);
}
});
export default {
View: View
};
client/galaxy/scripts/mvc/ui/ui-portlet.js
+7 -13
View File
@@ -15,10 +15,9 @@ export var View = Backbone.View.extend({
buttons: null,
body: null,
scrollable: true,
nopadding: false,
operations: null,
collapsible: false,
collapsible_button: false,
collapsible_button: true,
collapsed: false,
onchange_title: null
}).set(options);
@@ -39,7 +38,7 @@ export var View = Backbone.View.extend({
this.model.get("body") && this.append(this.model.get("body"));
// add icon for collapsible option
this.collapsible_button = new Ui.ButtonIcon({
this.collapsible_button = new Ui.Button({
icon: "fa-eye",
tooltip: "Collapse/Expand",
cls: "ui-button-icon-plain",
@@ -62,15 +61,12 @@ export var View = Backbone.View.extend({
if (options.title_id) {
this.$title.attr("id", options.title_id);
}
_.each([this.$content, this.$body], $el => {
$el[options.nopadding ? "addClass" : "removeClass"]("no-padding");
});
// render title icon
if (options.icon) {
this.$title_icon
.removeClass()
.addClass("portlet-title-icon fa")
.addClass("portlet-title-icon fa mr-1")
.addClass(options.icon)
.show();
} else {
@@ -108,7 +104,7 @@ export var View = Backbone.View.extend({
// render operations
this.$operations.empty;
if (options.collapsible_button) {
if (options.collapsible && options.collapsible_button) {
this.$operations.append(this.collapsible_button.$el);
}
if (options.operations) {
@@ -189,16 +185,14 @@ export var View = Backbone.View.extend({
/** Collapse portlet */
collapse: function() {
this.collapsed = true;
this.$content.height("0%");
this.$body.hide();
this.$content.hide();
this.collapsible_button.setIcon("fa-eye-slash");
},
/** Expand portlet */
expand: function() {
this.collapsed = false;
this.$content.height("100%");
this.$body.fadeIn("fast");
this.$content.show();
this.collapsible_button.setIcon("fa-eye");
},
@@ -229,7 +223,7 @@ export var View = Backbone.View.extend({
$("<div/>")
.addClass("portlet-content")
.append($("<div/>").addClass("portlet-body"))
.append($("<div/>").addClass("portlet-buttons"))
.append($("<div/>").addClass("portlet-buttons mt-3 mb-3"))
)
.append($("<div/>").addClass("portlet-backdrop"));
}
client/galaxy/scripts/mvc/ui/ui-rules-edit.js
+1 -1
View File
@@ -19,7 +19,7 @@ var View = Backbone.View.extend({
const view = this;
// create insert new list element button
this.browse_button = new Ui.ButtonIcon({
this.browse_button = new Ui.Button({
title: _l("Edit"),
icon: "fa fa-edit",
tooltip: _l("Edit Rules"),
client/galaxy/scripts/mvc/ui/ui-select-content.js
+1 -1
View File
@@ -145,7 +145,7 @@ var View = Backbone.View.extend({
]
});
var $batch_div = $("<div/>")
.addClass("ui-form-info")
.addClass("form-text text-muted")
.append($("<i/>").addClass("fa fa-sitemap"))
.append(
$("<span/>").html(
client/galaxy/scripts/mvc/ui/ui-select-default.js
+1 -1
View File
@@ -204,7 +204,7 @@ var View = Backbone.View.extend({
}
return `
${_.escape(result.text)}
<div class="ui-tags">
<div>
${_.reduce(
filteredTags.slice(0, 5),
(memo, tag) => {
client/galaxy/scripts/mvc/ui/ui-select-genomespace.js
+8 -11
View File
@@ -14,9 +14,10 @@ var View = Backbone.View.extend({
this.options = options;
// create insert new list element button
this.browse_button = new Ui.ButtonIcon({
this.browse_button = new Ui.Button({
title: _l("Browse"),
icon: "fa fa-sign-in",
cls: "btn btn-secondary float-left",
tooltip: _l("Browse GenomeSpace"),
onclick: function() {
self.browseGenomeSpace(options);
@@ -28,8 +29,8 @@ var View = Backbone.View.extend({
// create elements
this.setElement(this._template(options));
this.$(".ui-gs-browse-button").append(this.browse_button.$el);
this.$(".ui-gs-filename-textbox").append(this.filename_textbox.$el);
this.$(".ui-browse-button").append(this.browse_button.$el);
this.$(".ui-filename-textbox").append(this.filename_textbox.$el);
},
/** Browse GenomeSpace */
@@ -44,14 +45,10 @@ var View = Backbone.View.extend({
/** Main Template */
_template: function(options) {
return (
'<div class="ui-gs-select-file">' +
'<div class="ui-gs-browse-field">' +
'<span class="ui-gs-browse-button" />' +
'<span class="ui-gs-filename-textbox" />' +
"</div>" +
"</div>"
);
return `<div class="row">
<div class="ui-browse-button col-3" />
<div class="ui-filename-textbox col"/>
</div>`;
},
/** Return/Set currently selected genomespace filename */
client/galaxy/scripts/mvc/ui/ui-select-library.js
+3 -8
View File
@@ -113,14 +113,9 @@ var View = Backbone.View.extend({
/** Template */
_template: function() {
return (
'<div class="ui-select-library">' +
'<div class="library ui-margin-bottom">' +
'<span class="library-title">Select Library</span>' +
'<span class="library-select"/>' +
"</div>" +
"</div>"
);
return `<div class="ui-select-library">
<div class="library-select mb-2"/>
</div>`;
}
});
client/galaxy/scripts/mvc/ui/ui-slider.js
+18 -12
View File
@@ -44,7 +44,7 @@ var View = Backbone.View.extend({
v == 13 ||
v == 37 ||
v == 39 ||
(v >= 48 && v <= 57 && !pressed[16]) ||
(v >= 48 && v <= 57) ||
(v >= 96 && v <= 105) ||
((v == 190 || v == 110) &&
$(this)
@@ -76,12 +76,9 @@ var View = Backbone.View.extend({
}
}
if (this.has_slider) {
this.$text.addClass("ui-form-slider-left");
this.$slider.slider({ min: opts.min, max: opts.max, step: step }).on("slide", (event, ui) => {
self.value(ui.value);
});
} else {
this.$slider.hide();
}
// add listeners
@@ -91,8 +88,17 @@ var View = Backbone.View.extend({
render: function() {
var value = this.model.get("value");
this.has_slider && this.$slider.slider("value", value);
value !== this.$text.val() && this.$text.val(value);
if (this.has_slider) {
this.$slider.slider("value", value);
this.$slider.show();
this.$text.addClass("col-3 mr-3");
} else {
this.$slider.hide();
this.$text.removeClass("col-3 mr-3");
}
if (value !== this.$text.val()) {
this.$text.val(value);
}
},
/** Set and return the current value */
@@ -127,12 +133,12 @@ var View = Backbone.View.extend({
/** Slider template */
_template: function() {
return (
'<div class="ui-form-slider">' +
'<input class="ui-form-slider-text" type="text"/>' +
'<div class="ui-form-slider-element"/>' +
"</div>"
);
return `<div class="ui-form-slider container">
<div class="row">
<input class="ui-form-slider-text form-control" type="text"/>
<div class="ui-form-slider-element col mt-1"/>
</div>
</div>`;
}
});
client/galaxy/scripts/mvc/ui/ui-table.js
+4 -10
View File
@@ -7,15 +7,14 @@ var View = Backbone.View.extend({
onchange: null,
ondblclick: null,
onconfirm: null,
cls: "ui-table",
selectable: true,
cls_tr: ""
cls: "grid",
selectable: true
});
this.setElement(this._template());
this.$thead = this.$("thead");
this.$tbody = this.$("tbody");
this.$tmessage = this.$("tmessage");
this.row = this._row();
this.row = $("<tr/>");
this.row_count = 0;
},
@@ -119,16 +118,11 @@ var View = Backbone.View.extend({
this.row.hide();
this.row.fadeIn();
}
this.row = this._row();
this.row = $("<tr/>");
this.row_count++;
this._refresh();
},
/** Helper to create new row */
_row: function() {
return $(`<tr class="${this.options.cls_tr}"></tr>`);
},
/** Handles onclick events */
_onclick: function(e) {
var old_value = this.value();
client/galaxy/scripts/mvc/ui/ui-tabs.js
+10 -9
View File
@@ -143,7 +143,7 @@ export var View = Backbone.View.extend({
/** Main template */
_template: function() {
return $("<div/>")
.addClass("ui-tabs tabbable tabs-left")
.addClass("tabbable tabs-left")
.append(
$("<ul/>")
.attr("style", "display: flex")
@@ -155,7 +155,7 @@ export var View = Backbone.View.extend({
/** Tab template */
_template_tab: function(options) {
var $tmpl = $("<li/>")
.addClass("tab-element nav-item")
.addClass("nav-item")
.attr("id", `tab-${options.id}`)
.append(
$("<a/>")
@@ -166,15 +166,16 @@ export var View = Backbone.View.extend({
options.icon &&
$href.append(
$("<i/>")
.addClass("tab-icon fa")
.addClass("fa")
.addClass(options.icon)
);
$href.append(
$("<span/>")
.attr("id", `tab-title-text-${options.id}`)
.addClass("tab-title-text")
.append(options.title)
);
options.title &&
$href.append(
$("<span/>")
.attr("id", `tab-title-text-${options.id}`)
.addClass("tab-title-text ml-1")
.append(options.title)
);
return $tmpl;
}
});
client/galaxy/scripts/mvc/upload/collection/collection-row.js
+2 -8
View File
@@ -32,7 +32,7 @@ export default Backbone.View.extend({
this.$percentage = this.$(".upload-percentage");
// append popup to settings icon
this.settings = new Popover.View({
this.settings = new Popover({
title: _l("Upload configuration"),
container: this.$(".upload-settings"),
placement: "bottom"
@@ -151,13 +151,7 @@ export default Backbone.View.extend({
/** Attach file info popup */
_showSettings: function() {
if (!this.settings.visible) {
this.settings.empty();
this.settings.append(new UploadSettings(this).$el);
this.settings.show();
} else {
this.settings.hide();
}
this.settings.show(new UploadSettings(this).$el);
},
/** View template */
client/galaxy/scripts/mvc/upload/collection/collection-view.js
+21 -27
View File
@@ -144,7 +144,7 @@ export default Backbone.View.extend({
});
// add ftp file viewer
this.ftp = new Popover.View({
this.ftp = new Popover({
title: _l("FTP files"),
container: this.btnFtp.$el
});
@@ -308,32 +308,26 @@ export default Backbone.View.extend({
/** Show/hide ftp popup */
_eventFtp: function() {
if (!this.ftp.visible) {
this.ftp.empty();
var self = this;
this.ftp.append(
new UploadFtp({
collection: this.collection,
ftp_upload_site: this.ftp_upload_site,
onadd: function(ftp_file) {
return self.uploadbox.add([
{
mode: "ftp",
name: ftp_file.path,
size: ftp_file.size,
path: ftp_file.path
}
]);
},
onremove: function(model_index) {
self.collection.remove(model_index);
}
}).$el
);
this.ftp.show();
} else {
this.ftp.hide();
}
var self = this;
this.ftp.show(
new UploadFtp({
collection: this.collection,
ftp_upload_site: this.ftp_upload_site,
onadd: function(ftp_file) {
return self.uploadbox.add([
{
mode: "ftp",
name: ftp_file.path,
size: ftp_file.size,
path: ftp_file.path
}
]);
},
onremove: function(model_index) {
self.collection.remove(model_index);
}
}).$el
);
},
/** Create a new file */
client/galaxy/scripts/mvc/upload/composite/composite-row.js
+22 -34
View File
@@ -91,14 +91,14 @@ export default Backbone.View.extend({
});
// add ftp file viewer
this.ftp = new Popover.View({
title: "Choose FTP file:",
container: this.$source.find(".ui-button-menu"),
this.ftp = new Popover({
title: "Select a file",
container: this.$source.find(".dropdown"),
placement: "right"
});
// append popup to settings icon
this.settings = new Popover.View({
this.settings = new Popover({
title: _l("Upload configuration"),
container: this.$settings,
placement: "bottom"
@@ -256,41 +256,29 @@ export default Backbone.View.extend({
/** Show/hide ftp popup */
_showFtp: function() {
if (!this.ftp.visible) {
var self = this;
this.ftp.empty();
this.ftp.append(
new UploadFtp({
ftp_upload_site: this.app.ftp_upload_site,
onchange: function(ftp_file) {
self.ftp.hide();
if (self.model.get("status") != "running" && ftp_file) {
self.model.reset({
file_mode: "ftp",
file_name: ftp_file.path,
file_size: ftp_file.size,
file_path: ftp_file.path
});
self._refreshReady();
}
var self = this;
this.ftp.show(
new UploadFtp({
ftp_upload_site: this.app.ftp_upload_site,
onchange: function(ftp_file) {
self.ftp.hide();
if (self.model.get("status") != "running" && ftp_file) {
self.model.reset({
file_mode: "ftp",
file_name: ftp_file.path,
file_size: ftp_file.size,
file_path: ftp_file.path
});
self._refreshReady();
}
}).$el
);
this.ftp.show();
} else {
this.ftp.hide();
}
}
}).$el
);
},
/** Show/hide settings popup */
_showSettings: function() {
if (!this.settings.visible) {
this.settings.empty();
this.settings.append(new UploadSettings(this).$el);
this.settings.show();
} else {
this.settings.hide();
}
this.settings.show(new UploadSettings(this).$el);
},
/** Template */
client/galaxy/scripts/mvc/upload/composite/composite-view.js
-1
View File
@@ -4,7 +4,6 @@ import Utils from "utils/utils";
import UploadModel from "mvc/upload/upload-model";
import UploadRow from "mvc/upload/composite/composite-row";
import UploadExtension from "mvc/upload/upload-extension";
import Popover from "mvc/ui/ui-popover";
import Select from "mvc/ui/ui-select";
import Ui from "mvc/ui/ui-misc";
export default Backbone.View.extend({
client/galaxy/scripts/mvc/upload/default/default-row.js
+42 -13
View File
@@ -36,7 +36,7 @@ export default Backbone.View.extend({
this.$percentage = this.$(".upload-percentage");
// append popup to settings icon
this.settings = new Popover.View({
this.settings = new Popover({
title: _l("Upload configuration"),
container: this.$(".upload-settings"),
placement: "bottom"
@@ -220,6 +220,7 @@ export default Backbone.View.extend({
this.model.set("enabled", status == "init");
var enabled = this.model.get("enabled");
this.$text_content.attr("disabled", !enabled);
this.$title.attr("disabled", !enabled);
if (enabled) {
this.select_genome.enable();
this.select_extension.enable();
@@ -255,13 +256,7 @@ export default Backbone.View.extend({
/** Attach file info popup */
_showSettings: function() {
if (!this.settings.visible) {
this.settings.empty();
this.settings.append(new UploadSettings(this).$el);
this.settings.show();
} else {
this.settings.hide();
}
this.settings.show(new UploadSettings(this).$el);
},
/** Make extension popover */
@@ -276,10 +271,44 @@ export default Backbone.View.extend({
/** View template */
_template: function(options) {
return `<tr id="upload-row-${
options.id
}" class="upload-row"><td><div class="upload-text-column"><div class="upload-mode"/><input class="upload-title"/><div class="upload-text"><div class="upload-text-info">You can tell Galaxy to download data from web by entering URL in this box (one per line). You can also directly paste the contents of a file.</div><textarea class="upload-text-content form-control"/></div></div></td><td><div class="upload-size"/></td><td><div class="upload-extension" style="float: left;"/>&nbsp;&nbsp<div class="upload-extension-info upload-icon-button fa fa-search"/></td><td><div class="upload-genome"/></td><td><div class="upload-settings upload-icon-button fa fa-gear"/></td><td><div class="upload-info"><div class="upload-info-text"/><div class="upload-info-progress progress"><div class="upload-progress-bar progress-bar progress-bar-success"/><div class="upload-percentage">0%</div></div></div></td><td><div class="upload-symbol ${
this.status_classes.init
}"/></td></tr>`;
return `<tr id="upload-row-${options.id}" class="upload-row">
<td>
<div class="upload-text-column">
<div class="upload-mode"/>
<input class="upload-title ml-2 border rounded"/>
<div class="upload-text">
<div class="upload-text-info">
You can tell Galaxy to download data from web by entering URL in this box (one per line). You can also directly paste the contents of a file.
</div>
<textarea class="upload-text-content form-control"/>
</div>
</div>
</td>
<td>
<div class="upload-size"/>
</td>
<td>
<div class="upload-extension float-left mr-1"/>
<div class="upload-extension-info upload-icon-button fa fa-search"/>
</td>
<td>
<div class="upload-genome"/>
</td>
<td>
<div class="upload-settings upload-icon-button fa fa-gear"/>
</td>
<td>
<div class="upload-info">
<div class="upload-info-text"/>
<div class="upload-info-progress progress">
<div class="upload-progress-bar progress-bar progress-bar-success"/>
<div class="upload-percentage">0%</div>
</div>
</div>
</td>
<td>
<div class="upload-symbol ${this.status_classes.init}"/>
</td>
</tr>`;
}
});
client/galaxy/scripts/mvc/upload/default/default-view.js
+21 -27
View File
@@ -140,7 +140,7 @@ export default Backbone.View.extend({
});
// add ftp file viewer
this.ftp = new Popover.View({
this.ftp = new Popover({
title: _l("FTP files"),
container: this.btnFtp.$el
});
@@ -322,32 +322,26 @@ export default Backbone.View.extend({
/** Show/hide ftp popup */
_eventFtp: function() {
if (!this.ftp.visible) {
this.ftp.empty();
var self = this;
this.ftp.append(
new UploadFtp({
collection: this.collection,
ftp_upload_site: this.ftp_upload_site,
onadd: function(ftp_file) {
return self.uploadbox.add([
{
mode: "ftp",
name: ftp_file.path,
size: ftp_file.size,
path: ftp_file.path
}
]);
},
onremove: function(model_index) {
self.collection.remove(model_index);
}
}).$el
);
this.ftp.show();
} else {
this.ftp.hide();
}
var self = this;
this.ftp.show(
new UploadFtp({
collection: this.collection,
ftp_upload_site: this.ftp_upload_site,
onadd: function(ftp_file) {
return self.uploadbox.add([
{
mode: "ftp",
name: ftp_file.path,
size: ftp_file.size,
path: ftp_file.path
}
]);
},
onremove: function(model_index) {
self.collection.remove(model_index);
}
}).$el
);
},
/** Create a new file */
client/galaxy/scripts/mvc/upload/upload-extension.js
+3 -5
View File
@@ -15,14 +15,12 @@ export default Backbone.View.extend({
id: options.extension
});
this.extension_popup && this.extension_popup.remove();
this.extension_popup = new Popover.View({
this.extension_popup = new Popover({
title: options.title,
placement: options.placement || "bottom",
container: options.$el
});
this.extension_popup.title(options.title);
this.extension_popup.empty();
this.extension_popup.append(this._templateDescription(description));
this.extension_popup.show();
this.extension_popup.show(this._templateDescription(description));
},
/** Template for extensions description */
client/galaxy/scripts/mvc/upload/upload-ftp.js
+35 -11
View File
@@ -177,20 +177,44 @@ export default Backbone.View.extend({
/** Template of row */
_templateRow: function(options) {
return `<tr class="upload-ftp-row"><td class="_has_collection" style="display: none;"><div class="icon"/></td><td class="ftp-name">${_.escape(
options.path
)}</td><td class="ftp-size">${Utils.bytesToString(options.size)}</td><td class="ftp-time">${
options.ctime
}</td></tr>`;
return `<tr class="upload-ftp-row">
<td class="_has_collection" style="display: none;">
<div class="icon"/>
</td>
<td class="ftp-name">${_.escape(options.path)}</td>
<td class="ftp-size">${Utils.bytesToString(options.size)}</td>
<td class="ftp-time">${options.ctime}</td>
</tr>`;
},
/** Template of main view */
_template: function() {
return `<div class="${this.model.get(
"cls"
)}"><div class="upload-ftp-wait fa fa-spinner fa-spin"/><div class="upload-ftp-help">${this.model.get(
"help_text"
)}</div><div class="upload-ftp-content"><span style="whitespace: nowrap; float: left;">Available files: </span><span style="whitespace: nowrap; float: right;"><span class="upload-icon fa fa-file-text-o"/><span class="upload-ftp-number"/>&nbsp;&nbsp;<span class="upload-icon fa fa-hdd-o"/><span class="upload-ftp-disk"/></span><table class="grid" style="float: left;"><thead><tr><th class="_has_collection" style="display: none;"><div class="upload-ftp-select-all"></th><th>Name</th><th>Size</th><th>Created</th></tr></thead><tbody class="upload-ftp-body"/></table></div><div class="upload-ftp-warning warningmessage">Your FTP directory does not contain any files.</div>`;
("<div>");
return `<div class="${this.model.get("cls")}">
<div class="upload-ftp-wait fa fa-spinner fa-spin"/>
<div class="upload-ftp-help">${this.model.get("help_text")}</div>
<div class="upload-ftp-content">
<span style="whitespace: nowrap; float: left;">Available files: </span>
<span style="whitespace: nowrap; float: right;">
<span class="upload-icon fa fa-file-text-o"/>
<span class="upload-ftp-number"/>
<span class="upload-icon fa fa-hdd-o"/>
<span class="upload-ftp-disk"/>
</span>
<table class="grid" style="float: left;">
<thead>
<tr>
<th class="_has_collection" style="display: none;">
<div class="upload-ftp-select-all">
</th>
<th>Name</th>
<th>Size</th>
<th>Created</th>
</tr>
</thead>
<tbody class="upload-ftp-body"/>
</table>
</div>
<div class="upload-ftp-warning warningmessage">Your FTP directory does not contain any files.</div>
</div>`;
}
});
client/galaxy/scripts/mvc/upload/upload-settings.js
+7 -8
View File
@@ -23,7 +23,7 @@ export default Backbone.View.extend({
this.$el.append($("<div/>").addClass("upload-settings-cover"));
this.$el.append(
$("<table/>")
.addClass("upload-settings-table ui-table-striped")
.addClass("upload-settings-table grid")
.append("<tbody/>")
);
this.$cover = this.$(".upload-settings-cover");
@@ -37,16 +37,15 @@ export default Backbone.View.extend({
this.$table.empty();
_.each(this.options.parameters, parameter => {
var $checkbox = $("<div/>")
.addClass(`upload-${parameter.id} upload-icon-button fa`)
.addClass((self.model.get(parameter.id) && self.options.class_check) || self.options.class_uncheck)
.addClass(`upload-${parameter.id} fa`)
.addClass((self.model.get(parameter.id) && self.options.class_check) || self.options.class_uncheck);
let $row = $("<tr/>")
.append($("<td/>").append($checkbox))
.append($("<td/>").append(parameter.title))
.on("click", () => {
self.model.get("enabled") && self.model.set(parameter.id, !self.model.get(parameter.id));
});
self.$table.append(
$("<tr/>")
.append($("<td/>").append($checkbox))
.append($("<td/>").append(parameter.title))
);
self.$table.append($row);
});
this.$cover[(this.model.get("enabled") && "hide") || "show"]();
}
client/galaxy/scripts/mvc/user/user-custom-builds.js
+8 -8
View File
@@ -45,25 +45,25 @@ var View = Backbone.View.extend({
.append(
$("<h4/>")
.text("System Installed Builds")
.addClass("ui-margin-top")
.addClass("mt-1")
)
.append(this.installed_builds.$el))
)
.append(
$("<h4/>")
.text("Add a Custom Build")
.addClass("ui-margin-top")
.addClass("mt-4")
)
.append(
$("<span/>")
.addClass("ui-column")
.addClass("row")
.append(
$("<div/>")
.addClass("ui-column-left")
.addClass("col")
.append(this.message.$el)
.append((this.$form = $("<div/>").addClass("ui-margin-top")))
.append((this.$form = $("<div/>").addClass("mt-1")))
)
.append((this.$help = $("<div/>").addClass("ui-column-right")))
.append((this.$help = $("<div/>").addClass("col m-2")))
)
);
this.listenTo(this.collection, "add remove reset", () => {
@@ -90,7 +90,7 @@ var View = Backbone.View.extend({
self.table.add(model.id);
self.table.add(model.get("count") !== undefined ? model.get("count") : "Processing...");
self.table.add(
new Ui.ButtonIcon({
new Ui.Button({
icon: "fa-trash-o",
cls: "ui-button-icon-plain",
tooltip: _l("Delete custom build."),
@@ -186,7 +186,7 @@ var View = Backbone.View.extend({
icon: "fa-save",
tooltip: _l("Create new Build"),
title: _l("Save"),
cls: "btn btn-primary ui-clear-float",
cls: "btn btn-primary",
onclick: function() {
var data = form.data.create();
if (!data.id || !data.name) {
client/galaxy/scripts/mvc/user/user-preferences.js
+12 -9
View File
@@ -113,10 +113,9 @@ var View = Backbone.View.extend({
var config = Galaxy.config;
$.getJSON(`${Galaxy.root}api/users/${Galaxy.user.id}`, data => {
self.$preferences = $("<div/>")
.addClass("ui-panel")
.append($("<h2/>").append("User preferences"))
.append($("<p/>").append(`You are logged in as <strong>${_.escape(data.email)}</strong>.`))
.append((self.$table = $("<table/>").addClass("ui-panel-table")));
.append((self.$table = $("<table/>")));
var message = QueryStringParsing.get("message");
var status = QueryStringParsing.get("status");
if (message && status) {
@@ -161,19 +160,23 @@ var View = Backbone.View.extend({
},
_templateLink: function(options) {
return `<tr><td><div class="ui-panel-icon fa ${
options.icon
}"></td><td><a class="ui-panel-anchor" href="javascript:void(0)">${
options.title
}</a><div class="ui-form-info">${options.description}</div></td></tr>`;
return `<tr>
<td class="align-top">
<i class="ml-3 mr-3 fa fa-lg ${options.icon}">
</td>
<td>
<a href="javascript:void(0)"><b>${options.title}</b></a>
<div class="form-text text-muted">${options.description}</div>
</td>
</tr>`;
},
_templateFooter: function(options) {
return `<p class="ui-panel-footer">You are using <strong>${
return `<p class="mt-2">You are using <strong>${
options.nice_total_disk_usage
}</strong> of disk space in this Galaxy instance. ${
Galaxy.config.enable_quotas ? `Your disk quota is: <strong>${options.quota}</strong>. ` : ""
}Is your usage more than expected? See the <a href="https://galaxyproject.org/learn/managing-datasets/" target="_blank">documentation</a> for tips on how to find all of the data in your account.</p>`;
}Is your usage more than expected? See the <a href="https://galaxyproject.org/learn/managing-datasets/" target="_blank"><b>documentation</b></a> for tips on how to find all of the data in your account.</p>`;
}
});
client/galaxy/scripts/mvc/visualization/chart/views/description.js
+2 -2
View File
@@ -27,11 +27,11 @@ export default Backbone.View.extend({
<img class="charts-description-image"/>
</td>
<td>
<div class="charts-description-title ui-form-info"/>
<div class="charts-description-title"/>
</td>
</tr>
</table>
<div class="charts-description-text ui-form-info"/>
<div class="charts-description-text"/>
</div>`;
}
});
client/galaxy/scripts/mvc/visualization/chart/views/editor.js
+2 -2
View File
@@ -25,11 +25,11 @@ export default Backbone.View.extend({
icon: "fa fa-gear",
tooltip: "Change settings.",
$el: $("<div/>")
.append(new Ui.Label({ title: "Provide a title:" }).$el)
.append("<label><b>Provide a title</b><label>")
.append(this.title.$el)
.append(
$("<div/>")
.addClass("ui-form-info ui-margin-bottom")
.addClass("form-text text-muted")
.html("This title will appear in the list of 'Saved Visualizations'.")
)
.append(new Settings(this.app).$el)
client/galaxy/scripts/mvc/visualization/chart/views/groups.js
-2
View File
@@ -63,7 +63,6 @@ var GroupView = Backbone.View.extend({
self.chart.state("ok", "Metadata initialized...");
self.form = new Form({
inputs: inputs,
cls: "ui-portlet-plain",
onchange: function() {
self.group.set(self.form.data.create());
self.chart.set("modified", true);
@@ -105,7 +104,6 @@ export default Backbone.View.extend({
this.listenTo(this.chart.groups, "add", function(group) {
self.repeat.add({
id: group.id,
cls: "ui-portlet-panel",
$el: new GroupView(self.app, { group: group }).$el,
ondel: function() {
self.chart.groups.remove(group);
client/galaxy/scripts/mvc/visualization/chart/views/menu.js
+4 -4
View File
@@ -7,7 +7,7 @@ export default Backbone.View.extend({
initialize: function(app) {
this.app = app;
this.model = new Backbone.Model({ visible: true });
this.execute_button = new Ui.ButtonIcon({
this.execute_button = new Ui.Button({
icon: "fa-check-square",
tooltip: "Confirm",
onclick: () => {
@@ -79,7 +79,7 @@ export default Backbone.View.extend({
});
}
});
this.left_button = new Ui.ButtonIcon({
this.left_button = new Ui.Button({
icon: "fa-angle-double-left",
tooltip: "Show",
onclick: () => {
@@ -87,7 +87,7 @@ export default Backbone.View.extend({
window.dispatchEvent(new Event("resize"));
}
});
this.right_button = new Ui.ButtonIcon({
this.right_button = new Ui.Button({
icon: "fa-angle-double-right",
tooltip: "Hide",
onclick: () => {
@@ -95,7 +95,7 @@ export default Backbone.View.extend({
window.dispatchEvent(new Event("resize"));
}
});
this.save_button = new Ui.ButtonIcon({
this.save_button = new Ui.Button({
icon: "fa-save",
tooltip: "Save",
onclick: () => {
client/galaxy/scripts/mvc/visualization/chart/views/settings.js
+1 -2
View File
@@ -26,7 +26,7 @@ export default Backbone.View.extend({
} else {
this.chart.settings.set("__use_panels", panel_option == "yes" ? "true" : "false");
}
this.$el.empty().addClass("ui-margin-bottom");
this.$el.empty();
if (_.size(inputs) > 0) {
FormData.visitInputs(inputs, function(input, name) {
var model_value = self.chart.settings.get(name);
@@ -36,7 +36,6 @@ export default Backbone.View.extend({
});
this.form = new Form({
inputs: inputs,
cls: "ui-portlet-plain",
onchange: function() {
self.chart.settings.set(self.form.data.create());
self.chart.trigger("redraw");
client/galaxy/scripts/mvc/workflow/workflow-connector.js
+6 -1
View File
@@ -1,3 +1,5 @@
import * as Toastr from "libs/toastr";
function Connector(handle1, handle2) {
this.canvas = null;
this.dragging = false;
@@ -30,8 +32,11 @@ $.extend(Connector.prototype, {
}
$(this.canvas).remove();
},
destroyIfInvalid: function() {
destroyIfInvalid: function(warn) {
if (this.handle1 && this.handle2 && !this.handle2.attachable(this.handle1)) {
if (warn) {
Toastr.warning("Destroying a connection because collection type has changed.");
}
this.destroy();
}
},
client/galaxy/scripts/mvc/workflow/workflow-forms.js
+28 -11
View File
@@ -42,7 +42,7 @@ var Tool = Backbone.View.extend({
text_disable: "Set at Runtime",
narrow: true,
initial_errors: true,
cls: "ui-portlet-narrow",
cls: "ui-portlet-section",
initialmodel: function(process, form) {
self._customize(form);
process.resolve();
@@ -191,10 +191,27 @@ function _visit(head, head_list, output_id, options) {
}
}
function _makeRenameHelp(name_labels) {
let help_section = `This action will rename the output dataset. Click <a href="https://galaxyproject.org/learn/advanced-workflow/variables/">here</a> for more information. Valid input variables are:`;
let li = `
<ul>
${name_labels
.map(
name_label => `<li><strong>${name_label.name.replace(/\|/g, ".")}</strong>
${name_label.label ? `(${name_label.label})` : ""}
</li>`
)
.join("")}
</ul>
`;
help_section += li;
return help_section;
}
/** Builds sub section with step actions/annotation */
function _makeSection(output_id, options) {
function _makeSection(output_id, label, options) {
var extensions = [];
var input_terminal_names = [];
var name_label_map = [];
var datatypes = options.datatypes;
var node = options.node;
var workflow = options.workflow;
@@ -202,9 +219,10 @@ function _makeSection(output_id, options) {
for (var key in datatypes) {
extensions.push({ 0: datatypes[key], 1: datatypes[key] });
}
for (key in node.input_terminals) {
input_terminal_names.push(node.input_terminals[key].name);
for (var key in node.input_terminals) {
name_label_map.push({ name: node.input_terminals[key].name, label: node.input_terminals[key].label });
}
var rename_help = _makeRenameHelp(name_label_map);
extensions.sort((a, b) => (a.label > b.label ? 1 : a.label < b.label ? -1 : 0));
extensions.unshift({
0: "Sequences",
@@ -220,7 +238,7 @@ function _makeSection(output_id, options) {
});
var output;
var input_config = {
title: `Configure Output: '${output_id}'`,
title: `Configure Output: '${label}'`,
type: "section",
flat: true,
inputs: [
@@ -240,9 +258,7 @@ function _makeSection(output_id, options) {
type: "text",
value: "",
ignore: "",
help: `This action will rename the output dataset. Click <a href="https://galaxyproject.org/learn/advanced-workflow/variables/">here</a> for more information. Valid inputs are: <strong>${input_terminal_names
.join(", ")
.replace(/\|/g, ".")}</strong>.`
help: rename_help
},
{
action: "ChangeDatatypeAction",
@@ -355,8 +371,9 @@ function _addSections(form) {
help:
"Upon completion of this step, delete non-starred outputs from completed workflow steps if they are no longer required as inputs."
});
for (var i in node.output_terminals) {
inputs.push(_makeSection(i, options));
for (let output_id in node.output_terminals) {
let label = node.output_terminals[output_id].label || output_id;
inputs.push(_makeSection(output_id, label, options));
}
}
}
client/galaxy/scripts/mvc/workflow/workflow-manager.js
+1 -1
View File
@@ -278,7 +278,7 @@ class Workflow {
$.each(node.output_terminals, (ot_id, ot) => {
if (node.post_job_actions[`HideDatasetAction${ot.name}`] === undefined) {
node.addWorkflowOutput(ot.name);
var callout = $(node.element).find(`.callout.${ot.name.replace(/(?=[()])/g, '\\')}`);
var callout = $(node.element).find(`.callout.${ot.name.replace(/(?=[()])/g, "\\")}`);
callout.find("img").attr("src", `${Galaxy.root}static/images/fugue/asterisk-small.png`);
wf.has_changes = true;
}
client/galaxy/scripts/mvc/workflow/workflow-terminals.js
+39 -7
View File
@@ -1,6 +1,5 @@
// TODO; tie into Galaxy state?
window.workflow_globals = window.workflow_globals || {};
import * as Toastr from "libs/toastr";
function CollectionTypeDescription(collectionType) {
this.collectionType = collectionType;
@@ -131,6 +130,9 @@ var Terminal = Backbone.Model.extend({
if (this.node) {
this.node.markChanged();
this.resetMappingIfNeeded();
if (!connector.dragging) {
connector.handle2.resetCollectionTypeSource();
}
}
},
redraw: function() {
@@ -176,6 +178,17 @@ var Terminal = Backbone.Model.extend({
this.terminalMapping.disableMapOver();
},
resetCollectionTypeSource: function() {
let node = this.node;
_.each(node.output_terminals, function(output_terminal) {
let type_source = output_terminal.attributes.collection_type_source;
if (type_source && output_terminal.attributes.collection_type) {
output_terminal.attributes.collection_type = null;
output_terminal.update(output_terminal.attributes);
}
});
},
resetMappingIfNeeded: function() {} // Subclasses should override this...
});
@@ -438,6 +451,24 @@ var InputCollectionTerminal = BaseInputTerminal.extend({
var other = connector.handle1;
if (!other) {
return;
} else {
let node = this.node;
_.each(node.output_terminals, function(output_terminal) {
if (output_terminal.attributes.collection_type_source && !connector.dragging) {
if (other.isMappedOver()) {
if (other.isCollection) {
output_terminal.attributes.collection_type = other.terminalMapping.mapOver.append(
other.collectionType
).collectionType;
} else {
output_terminal.attributes.collection_type = other.terminalMapping.mapOver.collectionType;
}
} else {
output_terminal.attributes.collection_type = other.attributes.collection_type;
}
output_terminal.update(output_terminal.attributes);
}
});
}
var effectiveMapOver = this._effectiveMapOver(other);
@@ -523,14 +554,15 @@ var OutputCollectionTerminal = Terminal.extend({
newCollectionType = ANY_COLLECTION_TYPE_DESCRIPTION;
}
if (newCollectionType.collectionType != this.collectionType.collectionType) {
_.each(this.connectors, connector => {
// TODO: consider checking if connection valid before removing...
Toastr.warning("Destroying a connection because collection type has changed.");
connector.destroy();
let oldCollectionType = this.collectionType;
this.collectionType = newCollectionType;
// we need to iterate over a copy, as we slice this.connectors in the process of destroying connections
var connectors = this.connectors.slice(0);
if (newCollectionType.collectionType != oldCollectionType.collectionType) {
_.each(connectors, connector => {
connector.destroyIfInvalid(true);
});
}
this.collectionType = newCollectionType;
}
});
client/galaxy/scripts/mvc/workflow/workflow-view-data.js
+1 -1
View File
@@ -40,7 +40,7 @@ var DataOutputView = Backbone.View.extend({
this.nodeView = options.nodeView;
var output = this.output;
var label = output.name;
var label = output.label || output.name;
var node = this.nodeView.node;
var isInput = output.extensions.indexOf("input") >= 0 || output.extensions.indexOf("input_collection") >= 0;
client/galaxy/scripts/mvc/workflow/workflow-view-terminals.js
+2
View File
@@ -84,6 +84,7 @@ var BaseInputTerminalView = TerminalView.extend({
terminal.node = node;
terminal.name = name;
terminal.label = input.label;
node.input_terminals[name] = terminal;
},
events: {
@@ -185,6 +186,7 @@ var BaseOutputTerminalView = TerminalView.extend({
this.$el.attr("id", id);
terminal.node = node;
terminal.name = name;
terminal.label = output.label;
node.output_terminals[name] = terminal;
},
events: {
client/galaxy/scripts/mvc/workflow/workflow-view.js
+27 -20
View File
@@ -278,46 +278,51 @@ export default Backbone.View.extend({
let workflow_versions = JSON.parse(
$.ajax({
url: `${Galaxy.root}api/workflows/${self.options.id}/versions`,
async: false,
async: false
}).responseText
);
for (let i = 0; i < workflow_versions.length; i++) {
let current_wf = workflow_versions[i];
let version_text = `Version ${current_wf['version']}, ${current_wf['steps']} steps`;
let version_text = `Version ${current_wf["version"]}, ${current_wf["steps"]} steps`;
let selected = false;
if (i == self.workflow.workflow_version) {
version_text = `${version_text} (active)`;
selected = true;
};
}
_workflow_version_dropdown[version_text] = {
version: i,
selected: selected,
}
selected: selected
};
}
return _workflow_version_dropdown
}
return _workflow_version_dropdown;
};
this.build_version_select = function() {
let versions = this.get_workflow_versions();
$("#workflow-version-switch").empty();
$.each(versions, function(k, v) {
$('#workflow-version-switch').append($('<option></option>').html(k).val(v.version).selected(v.selected));
$("#workflow-version-switch").append(
$("<option></option>")
.html(k)
.val(v.version)
.selected(v.selected)
);
});
$("#workflow-version-switch").on('change', function () {
$('#workflow-version-switch').unbind('change');
$("#workflow-version-switch").on("change", function() {
$("#workflow-version-switch").unbind("change");
if (this.value != self.workflow.workflow_version) {
if (self.workflow && self.workflow.has_changes) {
let r = confirm("There are unsaved changes to your workflow which will be lost. Continue ?");
if (r == false) {
// We rebuild the version select list, to reset the selected version
self.build_version_select();
return
return;
}
}
self.load_workflow(self.options.id, this.value);
}
})
});
};
this.load_workflow = function load_workflow(id, version) {
@@ -360,19 +365,21 @@ export default Backbone.View.extend({
self.showWorkflowParameters();
},
error: function(response) {
window.show_modal("Loading workflow failed.", response.err_msg, { Ok: function( response ){
window.onbeforeunload = undefined;
window.document.location = workflow_index;
}})
window.show_modal("Loading workflow failed.", response.err_msg, {
Ok: function(response) {
window.onbeforeunload = undefined;
window.document.location = workflow_index;
}
});
},
beforeSubmit: function(data) {
show_message("Loading workflow", "progress");
}
});
}
};
// Load workflow definition
this.load_workflow(self.options.id, self.options.version)
this.load_workflow(self.options.id, self.options.version);
if (window.make_popupmenu) {
make_popupmenu($("#workflow-options-button"), {
Save: save_current_workflow,
@@ -547,7 +554,7 @@ export default Backbone.View.extend({
);
_.each(this.options.workflows, workflow => {
if (workflow.id !== self.options.id) {
var copy = new Ui.ButtonIcon({
var copy = new Ui.Button({
icon: "fa fa-copy",
cls: "ui-button-icon-plain",
tooltip: _l("Copy and insert individual steps"),
@@ -770,7 +777,7 @@ export default Backbone.View.extend({
content.workflow = this.workflow;
content.datatypes = this.datatypes;
content.icon = WorkflowIcons[node.type];
content.cls = "ui-portlet-narrow";
content.cls = "ui-portlet-section";
if (node) {
var form_type = node.type == "tool" ? "Tool" : "Default";
$el.append(new FormWrappers[form_type](content).form.$el);
client/galaxy/scripts/qunit/test.js
-1
View File
@@ -16,6 +16,5 @@ import hc from "qunit/tests/history_contents_model_tests";
import hda from "qunit/tests/hda_base_tests";
import modal from "qunit/tests/modal_tests";
import page from "qunit/tests/page_tests";
import popover from "qunit/tests/popover_tests";
import utils from "qunit/tests/utils_tests";
import ui from "qunit/tests/ui_tests";
client/galaxy/scripts/qunit/tests/form_tests.js
+1 -1
View File
@@ -62,7 +62,7 @@ QUnit.test("tool-form", function(assert) {
.parent()
.click();
assert.ok(
form.$(".ui-message").html() ===
form.$(".alert").html() ===
'<span>This tool requires req_name_a (Version req_version_a) and req_name_b (Version req_version_b). Click <a target="_blank" href="https://galaxyproject.org/tools/requirements/">here</a> for more information.</span>',
"Check requirements message"
);
client/galaxy/scripts/qunit/tests/popover_tests.js
-40
View File
@@ -1,40 +0,0 @@
/* global define */
import testApp from "qunit/test-app";
import Ui from "mvc/ui/ui-misc";
import Popover from "mvc/ui/ui-popover";
QUnit.module("Popover test", {
beforeEach: function() {
testApp.create();
var self = this;
this.button = new Ui.Button({
title: "Test button",
onclick: function() {
self.popover.show();
}
});
this.$parent = $("<div/>").append(this.button.$el);
this.popover = new Popover.View({
title: "Test Title",
body: "Test Body",
placement: "bottom",
container: this.button.$el
});
$("body").append(this.$parent);
},
afterEach: function() {
testApp.destroy();
}
});
QUnit.test("test popover visibility", function(assert) {
assert.ok(this.popover.$el.css("display") == "none", "Popover is hidden.");
this.button.$el.trigger("click");
assert.ok(this.popover.$el.css("display") == "block", "Popover is shown.");
assert.ok(this.popover.$el.hasClass("bottom"), "Popover at bottom.");
this.popover.hide();
assert.ok(this.popover.$el.css("display") == "none", "Popover is hidden manually.");
assert.ok(this.popover.$title.html() == "Test Title", "Initial title correct.");
this.popover.title("New Title");
assert.ok(this.popover.$title.html() == "New Title", "New title correct.");
});
client/galaxy/scripts/qunit/tests/ui_tests.js
-24
View File
@@ -100,20 +100,6 @@ QUnit.test("button-default", function(assert) {
assert.ok(button.$title.html() == model.get("title"), "Shows correct regular title");
});
QUnit.test("button-icon", function(assert) {
var button = new Ui.ButtonIcon({ title: "title" });
var model = button.model;
$("body").prepend(button.$el);
assert.ok(button.$title.html() == "title", "Has correct title");
model.set("title", "_title");
assert.ok(button.$title.html() == "_title", "Has correct new title");
assert.ok(!button.$el.attr("disabled"), "Button active");
model.set("disabled", true);
assert.ok(button.$el.attr("disabled"), "Button disabled");
model.set("disabled", false);
assert.ok(!button.$el.attr("disabled"), "Button active, again");
});
QUnit.test("button-check", function(assert) {
var button = new Ui.ButtonCheck({ title: "title" });
var model = button.model;
@@ -630,16 +616,6 @@ QUnit.test("select-default", function(assert) {
});
});
QUnit.test("label", function(assert) {
var label = new Ui.Label({
title: "_title"
});
$("body").prepend(label.$el);
assert.ok(label.$el.html() === "_title", "Correct title");
label.model.set("title", "_new_title");
assert.ok(label.$el.html() === "_new_title", "Correct new title");
});
QUnit.test("slider", function(assert) {
var input = new Slider.View({ min: 1, max: 100, value: 10 });
$("body").prepend(input.$el);
client/galaxy/scripts/qunit/tests/upload_dialog_tests.js
-20
View File
@@ -40,15 +40,6 @@ QUnit.test("test adding/removing paste/fetch upload item", function(assert) {
.hasClass("fa-trash-o"),
"Should show regular trash icon."
);
$("#upload-row-0")
.find(".upload-settings")
.trigger("click");
assert.ok(
$("#upload-row-0")
.find(".upload-settings-cover")
.css("display") == "none",
"Settings should be enabled."
);
$("#upload-row-0")
.find(".popover-close")
.trigger("click");
@@ -59,17 +50,6 @@ QUnit.test("test adding/removing paste/fetch upload item", function(assert) {
.hasClass("fa-exclamation-triangle"),
"Upload attempt should have failed."
);
assert.ok(
$("#upload-row-0")
.find(".upload-settings")
.trigger("click")
);
assert.ok(
$("#upload-row-0")
.find(".upload-settings-cover")
.css("display") == "block",
"Settings should be disabled."
);
$("#upload-row-0")
.find(".upload-symbol")
.trigger("click");
client/galaxy/scripts/ui/fa-icon-button.js
+9 -2
View File
@@ -1,5 +1,5 @@
import jQuery from "jquery";
("use_strict");
import * as _ from "underscore";
var $ = jQuery;
//============================================================================
@@ -42,7 +42,14 @@ var faIconButton = options => {
].join("");
var $button = $(html).tooltip(options.tooltipConfig);
if (_.isFunction(options.onclick)) {
$button.click(options.onclick);
$button.click(function(ev) {
$button.tooltip("hide");
$button
.parent()
.attr("tabindex", -1)
.focus();
options.onclick.apply(this, arguments);
});
}
return $button;
};
client/galaxy/style/scss/base.scss
+58 -52
View File
@@ -1,21 +1,15 @@
// Bootstrap variables and core framework
@import "../../../node_modules/bootstrap/scss/_functions.scss";
@import "galaxy_bootstrap/variables.scss";
@import "theme/blue.scss";
@import "../../../node_modules/bootstrap/scss/bootstrap.scss";
// Bootstrap-related style overrides
@import "overrides.scss";
// Fontawesome configuration.
$fa-font-path: "../images/fonts";
@import "../../../node_modules/font-awesome/scss/font-awesome.scss";
// Bootstrap-related style overrides
@import "galaxy_bootstrap/overrides.scss";
// Galaxy specific variables
@import "galaxy_variables.scss";
$white: #fff;
$black: #000;
.fa-icon {
// TODO: remove fa-icon and replace with fa
@extend .fa;
@@ -73,8 +67,8 @@ $black: #000;
}
body {
background: $base-bg;
color: $base-text-color;
background: $body-bg;
color: $text-color;
margin: 10px;
// For panel layout pages
@@ -159,13 +153,13 @@ body {
}
#left {
left: 0px;
width: 250px;
width: $panel-width;
z-index: 200;
border-right: solid $layout-border-color 1px;
border-right: $layout-border;
}
#center {
left: 250 + $border-default-color_padding;
right: 250 + $border-default-color_padding;
left: $panel-width;
right: $panel-width;
overflow: hidden;
z-index: 1;
.center-container {
@@ -177,7 +171,7 @@ body {
position: absolute;
width: 100%;
height: 100%;
padding: 10px;
padding: $margin-h $margin-v;
overflow: auto;
}
.center-frame {
@@ -189,10 +183,18 @@ body {
}
#right {
width: 250px;
width: $panel-width;
right: 0px;
z-index: 200;
border-left: solid $layout-border-color 1px;
border-left: $layout-border;
}
#left,
#right,
.unified-panel {
background: $panel-bg-color;
display: flex;
flex-direction: column;
}
#left,
@@ -205,30 +207,19 @@ body {
.unified-panel-header {
@extend .unselectable;
@extend .m-2;
height: $panel_header_height;
z-index: 1000;
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
background: $panel-header-bg-color;
border-bottom: solid $layout-border-color 1px;
margin: 0;
padding: 0;
padding-right: 10px;
padding-left: 10px;
font-size: 1rem;
font-weight: bold;
display: flex;
align-items: center;
color: $panel-header-text-color;
a {
color: $panel-header-text-color;
}
.fa {
font-size: 1.2em;
}
.unified-panel-header-inner {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
@@ -241,6 +232,13 @@ body {
text-decoration: none;
display: inline-block;
cursor: pointer;
width: 1.2rem;
text-align: center;
padding: 0px;
&:not(:last-child) {
margin-right: 2px;
}
// Fade to maroon on hover
&:hover {
color: maroon;
@@ -258,15 +256,18 @@ body {
}
}
.unified-panel-controls {
padding: 0 $margin-v;
}
.unified-panel-footer {
@extend .unselectable;
position: absolute;
bottom: 0;
position: relative;
height: $panel_footer_height;
line-height: $panel_footer_height;
width: 100%;
z-index: 1000; // Above #dd-helper
border-top: solid $layout-border-color 1px;
border-top: $layout-border;
background: $navbar-default-bg;
color: #555;
@@ -319,14 +320,14 @@ body {
line-height: $panel_footer_height;
width: $panel_footer_height - 5;
background: none;
border-right: solid $layout-border-color 1px;
border-top: solid $layout-border-color 1px;
border-right: $layout-border;
border-top: $layout-border;
background: $navbar-default-bg;
&.right {
left: inherit;
right: 0;
border-right: none;
border-left: solid $border-default-color 1px;
border-left: $layout_border;
&.right:before {
content: "\f054";
}
@@ -342,6 +343,7 @@ body {
div.unified-panel-body {
width: 100%;
height: 100%;
padding: 0px;
flex: 1;
}
@@ -378,11 +380,11 @@ div.unified-panel-body-background {
height: $panel-message-height;
line-height: $panel-message-height;
padding: 0px;
padding-left: 26px;
padding-left: 2.5rem;
background-color: $state-danger-bg;
background-image: url(error_small.png);
background-repeat: no-repeat;
background-position: 6px 50%;
background-position: 0.5rem 50%;
}
.panel-warning-message {
@@ -396,8 +398,12 @@ div.unified-panel-body-background {
}
.panel-info-message {
background-image: url(info_small.png);
background-image: url(info_icon.svg);
background-size: 1.5rem;
background-color: $state-info-bg;
svg:path {
fill: black;
}
}
// Masthead
@@ -753,7 +759,7 @@ button {
padding: 4px;
font-size: $font-size-base;
line-height: $line-height-base;
color: $gray;
color: $gray-700;
border: 1px solid $input-border;
padding-left: 14px !important;
padding-right: 14px;
@@ -773,19 +779,19 @@ button {
position: absolute;
display: none;
right: 6px;
top: 9px;
top: 5px;
font-size: 1.4em;
color: #888;
}
#tool-search {
position: relative;
margin: 10px;
margin: 10px 0;
#search-clear-btn {
position: absolute;
right: 6px;
top: 6px;
top: 5px;
display: block;
font-size: 1.4em !important;
text-decoration: none;
@@ -969,7 +975,7 @@ table.colored th {
table.colored tr.header {
background: $table-heading-bg;
color: contrast($complement-color-3);
color: contrast(spin($base-color-3, 180));
background-repeat: repeat-x;
background-position: top;
border-bottom: solid $table-border-color 1px;
@@ -1431,7 +1437,7 @@ ul.dropdown-menu {
font-size: 11px;
font-weight: bold;
line-height: $line-height-base;
color: $gray-light;
color: $gray-500;
text-transform: uppercase;
}
@@ -1605,7 +1611,7 @@ div.permissionContainer {
}
background: $panel-bg-color;
min-height: 100%;
padding: 5px 10px;
padding: $margin-h $margin-v;
}
div.toolSectionPad {
@@ -1625,7 +1631,8 @@ div.toolSectionDetailsInner {
}
div.toolSectionTitle {
font-weight: bold;
font-weight: 500;
font-size: 1rem;
}
div.toolPanelLabel {
@@ -1639,10 +1646,9 @@ div.toolPanelLabel {
div.toolTitle {
padding-top: 5px;
padding-bottom: 5px;
margin-left: 16px;
margin-left: 10px;
margin-right: 10px;
display: list-item;
list-style: square outside;
display: block;
.labels {
float: right;
margin-left: 2px;
client/galaxy/style/scss/charts.scss
+13 -24
View File
@@ -1,17 +1,17 @@
.charts-client {
.charts-buttons {
float: right;
margin: 5px 0px;
@extend .float-right;
position: absolute;
right: 0px;
z-index: 1000;
.ui-button-icon {
display: block;
margin-right: 5px;
width: 170px;
top: 4px;
.btn {
background: white;
color: #666;
border-color: white;
border: none;
.icon {
font-size: 1.2em;
line-height: 1.2em;
font-size: 1.5em;
}
.fa-check-square {
color: $state-success-text;
@@ -30,6 +30,7 @@
position: absolute;
margin: 40px 20px 50px 10px;
width: 50%;
word-break: break-word;
}
.text {
position: relative;
@@ -60,18 +61,18 @@
width: 30%;
height: 100vh;
padding-bottom: 32px;
padding-top: 32px;
overflow: hidden;
display: flex;
flex-direction: column;
.ui-message {
margin: 5px;
width: auto;
.alert {
@extend .m-2;
}
.charts-editor {
display: block;
flex: 1;
overflow: auto;
padding: 5px 10px 10px 5px;
padding: 5px 10px 30px 5px;
.charts-description {
margin-bottom: 20px;
.charts-description-image-td {
@@ -90,18 +91,6 @@
word-break: break-word;
}
}
.tab-icon {
margin-right: 0px;
color: #666;
font-size: 1.2em;
}
.portlet-content {
padding: 0px;
}
.ui-table-section,
.ui-portlet-panel .portlet-content {
padding-left: 5px;
}
}
}
}
client/galaxy/style/scss/frame.scss
+6 -5
View File
@@ -1,4 +1,5 @@
$frame-default-border: darken($gray-lighter, $border-darken-percent);
$frame-zindex: 1000;
$frame-default-border: $gray-300;
.galaxy-frame {
.corner {
@@ -11,7 +12,7 @@ $frame-default-border: darken($gray-lighter, $border-darken-percent);
}
.frame-background {
z-index: $zindex-navbar;
z-index: $frame-zindex;
position: absolute;
top: 0px;
left: 0px;
@@ -23,7 +24,7 @@ $frame-default-border: darken($gray-lighter, $border-darken-percent);
}
.frame-shadow {
z-index: $zindex-navbar + 1;
z-index: $frame-zindex + 1;
position: absolute;
display: none;
top: 0px;
@@ -37,7 +38,7 @@ $frame-default-border: darken($gray-lighter, $border-darken-percent);
panel menu button
*/
.frame-menu {
z-index: $zindex-navbar + 5;
z-index: $frame-zindex + 5;
position: absolute;
cursor: pointer;
color: gold;
@@ -57,7 +58,7 @@ $frame-default-border: darken($gray-lighter, $border-darken-percent);
*/
.frame {
z-index: $zindex-navbar + 2;
z-index: $frame-zindex + 2;
overflow: hidden;
position: absolute;
background: $white;
client/galaxy/style/scss/galaxy_bootstrap/variables.scss
-201
View File
@@ -1,201 +0,0 @@
// Everything is derived from $base-color
// Caveat: currently only works for light colored backgrounds, scss provides functions (contrast) that could be used to improve this
// Base color -- Based on the Galaxy masthead color
$base-color-1: #2c3143;
$base-color-2: lighten($base-color-1, 25%);
$base-color-3: lighten($base-color-1, 50%);
// DB: complement-colors 1, 2 currently unused
//$complement-color-1: spin($base-color-1, 180);
//$complement-color-2: spin($base-color-2, 180);
$complement-color-3: spin($base-color-3, 180);
$base-color: $base-color-2;
// Default border bolor, this is between gray-light and gray-lighter -- classic Galaxy border color
$border-default-color: lighten(black, 75%);
// When making borders for components with other colors, how much to darken
$border-darken-percent: 40%;
// Grays
// These come from Bootstrap 4 _variables.scss
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #868e96 !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;
// These are from Boostrap 2/3 but are used in Galaxy styles, map them to the
// closest gray level defined in Bootstrap 4.
$gray-darker: $gray-900;
$gray-dark: $gray-800;
$gray: $gray-700;
$gray-light: $gray-500;
$gray-lighter: $gray-200;
// Brand colors
// -------------------------
// Galaxy color history: when first moving to bootstrap, we derived a set of
// colors for Galaxy by starting with the Galaxy masthead color (see
// $base-color above), and mixing it with the boostrap default colors. The
// default colors, and their variable names, have all since changed through
// bootstrap 3 and bootstrap 4. We've saved those colors so we can replicate
// our current color scheme.
// These are the Galaxy primary colors original derived by mixing the Galaxy
// $base-color with Bootstrap 2 and 3 colors. These are now hardcoded as the
// derivations get increasingly complicated with each release. See the history
// of this file and `base.less` for details.
$galaxy-bs3-primary: #25537b;
$galaxy-bs3-success: #3a873a;
$galaxy-bs3-warning: #ae7628;
$galaxy-bs3-danger: #c8524f;
$galaxy-bs3-info: #3189a3;
// Lightening and saturating gets to alert backgrounds that are *very close*
// to the Boostrap 3 Galaxy styles.
$brand-primary: $galaxy-bs3-primary;
$brand-success: saturate(lighten($galaxy-bs3-success, 5%), 30%);
$brand-info: saturate(lighten($galaxy-bs3-info, 10%), 30%);
$brand-warning: saturate(lighten($galaxy-bs3-warning, 10%), 30%);
$brand-danger: saturate(lighten($galaxy-bs3-danger, 10%), 30%);
// These variables don't actually determine the colors in Bootstrap 4, instead
// they use a map called $theme-colors, so here we override that
$theme-colors: ();
$theme-colors: map-merge(
(
"primary": $brand-primary,
"secondary": $gray-300,
"success": $brand-success,
"info": $brand-info,
"warning": $brand-warning,
"danger": $brand-danger,
"light": $gray-100,
"dark": $gray-800
),
$theme-colors
);
// This is the default but we need to use it here.
$theme-color-interval: 5% !default;
// Alerts and states
$alert-bg-level: -13 !default;
$alert-border-level: -6 !default;
$alert-color-level: 8 !default;
// These are not Bootstrap styles but are used extensively in Galaxy. This
// duplicated the way that Bootstrap 4 alerts are derived.
$state-warning-text: theme-color-level("warning", $alert-color-level);
$state-warning-bg: theme-color-level("warning", $alert-bg-level);
$state-warning-border: theme-color-level("warning", $alert-border-level);
$state-danger-text: theme-color-level("danger", $alert-color-level);
$state-danger-bg: theme-color-level("danger", $alert-bg-level);
$state-danger-border: theme-color-level("danger", $alert-border-level);
$state-info-text: theme-color-level("info", $alert-color-level);
$state-info-bg: theme-color-level("info", $alert-bg-level);
$state-info-border: theme-color-level("info", $alert-border-level);
$state-success-text: theme-color-level("success", $alert-color-level);
$state-success-bg: theme-color-level("success", $alert-bg-level);
$state-success-border: theme-color-level("success", $alert-border-level);
// Body text and link colors
$body-bg: $white;
$text-color: $gray-dark;
$link-color: #303030;
$link-hover-color: darken($link-color, 15%);
// Fonts and sizes
$font-family-sans-serif: "Lucida Grande", verdana, arial, helvetica, sans-serif; //JT "Helvetica Neue", Helvetica, Arial, sans-serif;
//$font-family-serif: Georgia, "Times New Roman", Times, serif;
$font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
$font-family-base: $font-family-sans-serif;
$font-size-base: 0.75rem; // default 1rem
$h1-font-size: $font-size-base * 2; // default 2.5
$h2-font-size: $font-size-base * 1.75; // default 2
$h3-font-size: $font-size-base * 1.5; // default 1.75
$h4-font-size: $font-size-base * 1.25; // default 1.5
$h5-font-size: $font-size-base; // default 1.25
$h6-font-size: $font-size-base * 0.85; // default 1
// This is the default for $line-height-base, but we use $line-height-computed
// in base.css, that should be removed.
$line-height-base: 1.5; // for scaling, as a multiplier -- not concrete units.
$line-height-computed: floor($font-size-base * $line-height-base);
$line-height-computed-px: 16px;
$headings-font-weight: 800; // default 500
$headings-line-height: 1.1; // default 1.2
// Increase contrast of dropdown items
$dropdown-link-hover-color: white;
$dropdown-link-hover-bg: $brand-primary;
$dropdown-link-active-color: gold;
// BOOTSTRAP 4 STYLE REFACTORING BREAK POINT
// Anything that is actually used should be moved above this line and
// documented, everything else should be removed.
// JT: I've deleted a lot of unused variables from below but there are still
// likely some left.
// Components
// -------------------------
$padding-base-vertical: 0.25rem;
$padding-base-horizontal: 0.625rem;
$line-height-large: 1.33;
$border-radius-base: 0.1875rem;
$border-radius-large: 0.3125rem;
// Tables
// -------------------------
$table-border-color: $border-default-color; // table and cell border
// Buttons
// -------------------------
$btn-default-color: #333;
$btn-default-bg: darken($white, 5%);
$btn-default-border: $border-default-color;
// Forms
// -------------------------
$input-bg: $white;
$input-bg-disabled: $gray-lighter;
// COMPONENT VARIABLES
// --------------------------------------------------
// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
$zindex-navbar: 1000;
client/galaxy/style/scss/galaxy_variables.scss
-56
View File
@@ -1,56 +0,0 @@
// Additional variables that are not used by bootstrap but are used
// in Galaxy stylesheets
$base-bg: $white;
$base-text-color: $black;
// Masthead
$masthead-height: 2.5rem;
// Side panels
$panel-bg-color: #dfe5f9;
$panel-text-color: $gray-900;
$side-panel-bg: $panel-bg-color;
$panel-header-bg-color: $gray-lighter;
$panel-header-text-color: #555;
$panel-message-height: 2rem; //1.875rem;
$layout_top_padding: 0px;
$border-default-color_padding: 0px;
$panel_header_height: 2rem;
$panel_footer_height: 25px;
$layout-border-color: $gray-900; // darken($border-default-color, 15%);
// Forms
$form-heading-bg: $complement-color-3;
$form-border: $complement-color-3;
$table-heading-bg: $complement-color-3;
$table-border: $complement-color-3;
$table-bg-accent: #f9f9f9; // for striping
// Additional state colors
$state-default-bg: $gray-lighter;
$state-default-border: $border-default-color;
$state-paused-bg: #d9edf7;
$state-running-border: #aaaa66;
$state-running-bg: #ffffcc;
$navbar-height: 36px; // 2.062500rem;
$navbar-default-bg: $gray-lighter; // JT #f8f8f8;
$navbar-default-border: darken($navbar-default-bg, $border-darken-percent);
@import "theme/blue.scss";
// Theme: plain
//@import "theme/plain.scss";
client/galaxy/style/scss/history.scss
+1 -20
View File
@@ -3,7 +3,7 @@
@extend .flex-vertical-container;
> .controls {
margin: 8px 8px 1px;
margin: $margin-h $margin-v;
padding: 0px;
flex: 0 0 auto;
@@ -374,25 +374,6 @@
// ---------------------------------------------------------------------------- analyze data page - right panel
#right.history-right-panel {
background-color: $panel-bg-color;
.unified-panel-header {
.unified-panel-header-inner {
.panel-header-buttons {
.panel-header-button {
display: inline-block;
height: $icon-btn-size;
width: $icon-btn-size;
text-align: center;
line-height: $icon-btn-size - 3;
font-size: 1.2em;
padding: 0px;
&:not(:last-child) {
margin-right: 2px;
}
}
}
}
}
.unified-panel-body {
display: -webkit-flex;
.middle {
client/galaxy/style/scss/library.scss
+2 -3
View File
@@ -1,5 +1,4 @@
@import "galaxy_bootstrap/variables.scss";
@import "galaxy_variables.scss";
@import "theme/blue.scss";
.library_style_container {
width: 95%;
@@ -31,7 +30,7 @@
}
li.folderRow,
li.datasetRow {
border-top: solid 1px $table-border;
border-top: solid 1px $table-border-color;
}
li.folderRow:hover,
li.datasetRow:hover {
client/galaxy/style/scss/list-item.scss
+4 -6
View File
@@ -28,9 +28,9 @@ $vertical-gap: 8px;
}
$spacing-top: 6px;
$spacing-right: 10px;
$spacing-right: $margin-v * 0.5;
$spacing-bottom: 6px;
$spacing-left: 8px;
$spacing-left: $margin-v * 0.5;
.padded {
padding: $spacing-top $spacing-right $spacing-bottom $spacing-left;
}
@@ -61,11 +61,9 @@ $vertical-gap: 8px;
float: left;
// always initially hidden and zero width
display: none;
width: 32px;
width: 15px;
height: 32px;
//HACK: neg. on the bottom due to padding-bottom in title-bar - very tweakish
margin: 0px 0px - ($spacing-bottom) 0px;
padding: ($spacing-top + 2) 0px 2px ($spacing-left - 1);
margin: 9px;
font-size: 80%;
color: $btn-default-color;
cursor: pointer;
client/galaxy/style/scss/galaxy_bootstrap/overrides.scss → client/galaxy/style/scss/overrides.scss
+4 -25
View File
@@ -11,6 +11,10 @@ pre {
white-space: pre;
}
.alert {
word-wrap: break-word;
}
.btn.hover {
$btn: hover();
}
@@ -62,31 +66,6 @@ input[type="radio"] {
}
}
}
/*
NOTE: these styles do not currently work.
.modal {
position: absolute;
top: 50px;
width: 660px;
margin-left: -330px;
}
.modal:after {
content: "";
height: 0px;
position: relative;
top: 50px;
display: block;
border: solid transparent 1px;
}
.modal-body {
height: auto;
max-height: none;
}
*/
// Scroll modal body.
.modal-body {
client/galaxy/style/scss/theme/blue.scss
+148 -12
View File
@@ -1,20 +1,156 @@
// Override colors to closely resemble the style as of Fall 2013
// Everything is derived from $base-color
// Caveat: currently only works for light colored backgrounds, scss provides functions (contrast) that could be used to improve this
$layout-border-color: #999;
// Base color -- Based on the Galaxy masthead color
$base-color-1: #2c3143;
$base-color-2: lighten($base-color-1, 25%);
$base-color-3: lighten($base-color-1, 50%);
$base-color: $base-color-2;
// Default border bolor, this is between gray-light and gray-lighter -- classic Galaxy border color
$border-default-color: lighten(black, 75%);
// Grays from Bootstrap 4 _variables.scss
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;
// Brand colors
$brand-primary: #25537b;
$brand-success: #66cc66;
$brand-info: #2077b3;
$brand-warning: #fe7f02;
$brand-danger: #e31a1e;
// These variables don't actually determine the colors in Bootstrap 4, instead
// they use a map called $theme-colors, so here we override that
$theme-colors: ();
$theme-colors: map-merge(
(
"primary": $brand-primary,
"secondary": $gray-300,
"success": $brand-success,
"info": $brand-info,
"warning": $brand-warning,
"danger": $brand-danger,
"light": $gray-100,
"dark": $gray-800
),
$theme-colors
);
// This is the default but we need to use it here.
$theme-color-interval: 5% !default;
// Alerts and states
$alert-bg-level: -12 !default;
$alert-border-level: -6 !default;
$alert-color-level: 8 !default;
// These are not Bootstrap styles but are used extensively in Galaxy. This
// duplicated the way that Bootstrap 4 alerts are derived.
$state-warning-text: theme-color-level("warning", $alert-color-level);
$state-warning-bg: theme-color-level("warning", $alert-bg-level);
$state-warning-border: theme-color-level("warning", $alert-border-level);
$state-danger-text: theme-color-level("danger", $alert-color-level);
$state-danger-bg: theme-color-level("danger", $alert-bg-level);
$state-danger-border: theme-color-level("danger", $alert-border-level);
$state-info-text: theme-color-level("info", $alert-color-level);
$state-info-bg: theme-color-level("info", $alert-bg-level);
$state-info-border: theme-color-level("info", $alert-border-level);
$state-success-text: theme-color-level("success", $alert-color-level);
$state-success-bg: theme-color-level("success", $alert-bg-level);
$state-success-border: theme-color-level("success", $alert-border-level);
// Fonts and sizes
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
$font-family-base: $font-family-sans-serif;
$font-size-base: 0.8rem; // default 1rem
// Header font sizes
$h1-font-size: $font-size-base * 2; // default 2.5
$h2-font-size: $font-size-base * 1.75; // default 2
$h3-font-size: $font-size-base * 1.5; // default 1.75
$h4-font-size: $font-size-base * 1.25; // default 1.5
$h5-font-size: $font-size-base; // default 1.25
$h6-font-size: $font-size-base * 0.85; // default 1
// Increase contrast of dropdown items
$dropdown-link-hover-color: white;
$dropdown-link-hover-bg: $brand-primary;
$dropdown-link-active-color: gold;
// Additional variables that are not used by bootstrap but are used
// in Galaxy stylesheets
$body-bg: $white;
$text-color: $gray-900;
// Masthead
$masthead-height: 3rem;
// Side panels
$panel-bg-color: $gray-100; // #dfe5f9;
$panel-text-color: $gray-900;
$panel-header-bg-color: $gray-100;
$panel-header-text-color: #555;
$panel-message-height: 2.5rem; //1.875rem;
$panel-width: 18rem;
$panel_header_height: 2.5rem;
$panel_footer_height: 25px;
// Layout
$layout_top_padding: 0px;
$layout-border-color: $gray-900;
$layout-border: none;
// Borders
$border-radius-base: 0.1875rem;
$border-radius-large: 0.3125rem;
// Buttons
$btn-default-color: #333;
$btn-default-bg: darken($white, 5%);
$btn-default-border: $border-default-color;
// Forms
$form-heading-bg: #ebd9b2;
$form-border: darken($form-heading-bg, 20%);
$table-heading-bg: #ebd9b2;
// Table
$table-heading-bg: $panel-bg-color;
$table-bg-accent: #f9f9f9; // for striping
$table-border-color: darken($table-heading-bg, 20%);
// Additional state colors
$state-default-bg: $gray-200;
$state-default-border: $border-default-color;
$state-paused-bg: #d9edf7;
$state-running-border: #aaaa66;
$state-running-bg: #ffffcc;
// Navbar
$navbar-height: 36px; // 2.062500rem;
$navbar-default-bg: $gray-100; // JT #f8f8f8;
$navbar-default-border: darken($navbar-default-bg, 20%);
// Margins
$spacer: 1rem; // Not sure why this is not coming from Bootstrap
$margin-v: $spacer * 1.5;
$margin-h: $spacer;
// Inputs
$input-border: #aaa;
a {
text-decoration: underline;
}
// Label is used in places it probably shouldn't be (grid cells), replace with data- attributes and remove this.
label {
font-weight: normal;
}
client/galaxy/style/scss/theme/plain.scss
-406
View File
@@ -1,406 +0,0 @@
$panel-bg-color: white;
$side-panel-bg: white;
$base-text-color: black;
$brand-primary: #8181f3;
$base-color-1: black;
$navbar-inverse-color: black;
$navbar-inverse-bg: white;
$navbar-inverse-link-color: black;
$navbar-inverse-link-hover-color: $gray-dark;
$jumbotron-bg: white;
$form-heading-bg: black;
$border-radius-large: 0px;
$border-radius-base: 0px;
$input-border-radius: 0px;
// y'all're seriously obsesed with round edges.
* {
border-radius: 0px !important;
}
.state-icon {
border-radius: 8px !important;
}
// Tables
$table-heading-bg: black;
$table-border-color: black;
th a {
color: white;
&:hover {
color: black;
background: white;
}
}
.jumbotron {
box-shadow: 0 0 11px black;
}
.dropdown-menu {
border: 1px solid black;
}
li.dropdown:hover a.dropdown-toggle:focus {
color: white;
}
#masthead .navbar-brand a {
color: black !important;
}
$navbar-hover-thingy-link-color: darken(white, 10%);
$navbar-hover-thingy-background: lighten(black, 10%);
#masthead {
.nav > li > a {
&:hover {
color: $navbar-hover-thingy-link-color !important;
}
}
.navbar-tabs {
.toggle {
color: $navbar-hover-thingy-link-color !important;
}
.dropdown-note {
color: $navbar-hover-thingy-link-color !important;
}
}
li.dropdown:hover {
background: $navbar-hover-thingy-background;
}
li.dropdown > a:hover .caret {
border-top-color: $navbar-hover-thingy-link-color !important;
border-bottom-color: $navbar-hover-thingy-link-color !important;
}
li.dropdown.active > a:hover {
color: $navbar-hover-thingy-link-color !important;
background: $navbar-hover-thingy-background !important;
}
}
// Tool links
a.tool-link {
//display: block;
//padding: 0.5em;
&:hover {
background: $gray-lighter;
}
}
$navbar-default-bg: white;
#masthead {
border-bottom: 1px solid black;
}
.search-clear.fa.fa-times-circle {
color: #d82c2c;
}
div.toolMenuContainer {
padding-left: 0px !important;
padding-right: 0px !important;
#tool-search {
padding-left: 1em;
background: white;
//border-bottom: 1px solid $gray-light
top: 65px; // seems to be the real / correct value.
padding-bottom: 5px;
}
#tool-search-query {
border: 1px solid transparent;
background: #eee;
&:focus,
&:active {
background: white;
border: 1px solid black;
box-shadow: none;
}
}
}
#tool-search {
padding-left: 1em;
background: white;
//border-bottom: 1px solid $gray-light
top: 65px; // seems to be the real / correct value.
padding-bottom: 5px;
}
div.search div.search-input input {
border: 1px solid transparent;
background: #eee;
&:focus,
&:active {
background: white;
border: 1px solid black;
box-shadow: none;
}
}
// Easy to click tool section titles
div.toolSectionWrapper {
margin-bottom: 0px !important;
padding-bottom: 0px !important;
padding-left: 0px;
border-left: 1px solid black;
margin-left: 0.2em;
div.toolSectionTitle {
padding-left: 0.2em;
border-left: 2px solid black;
}
}
div.toolTitleNoSection {
margin-bottom: 0px !important;
padding-bottom: 0px !important;
padding-left: 0.5em;
font-weight: normal;
}
div.toolSectionTitle,
div.toolSectionWrapper {
a {
padding-top: 0.4em;
padding-bottom: 0.4em;
display: block;
text-decoration: none;
}
}
div.toolPanelLabel {
margin-left: 0.7em !important;
}
div.toolSectionBody div.toolPanelLabel {
margin-left: 1em !important;
}
div.toolTitle,
div.toolTitleNoSection {
margin-left: 0em !important;
padding-left: 1em !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
a {
font-weight: normal;
padding-top: 0.4em;
padding-bottom: 0.4em;
display: block;
}
&:hover {
background: $gray-lighter;
}
}
input[type="submit"] {
background: $brand-primary !important;
border: 1px solid black !important;
color: contrast($brand-primary) !important;
}
// Adjust older tool forms
.toolFormTitle,
.form .form-title {
color: white;
a {
color: white !important;
border: 1px solid white !important;
}
}
// portlets
.portlet-header {
.portlet-operations > div {
color: white !important;
background: transparent;
}
.portlet-title {
color: white !important;
}
}
.ui-portlet-repeat {
border-left-width: 1px !important;
}
.form-row .help,
.toolParamHelp {
color: $gray-dark !important;
}
// History
$state-default-text: $gray-dark;
$state-default-bg: $gray-lighter;
$state-default-border: $border-default-color;
$state-paused-border: $gray-lighter;
$state-paused-bg: white;
$state-running-border: black;
$state-running-bg: $gray-light;
$state-danger-border: black;
$state-danger-bg: lighten(red, 5%);
$state-success-border: black;
$state-success-bg: lighten(green, 15%);
.current-history-panel {
.annotation-display {
.annotation {
border: 1px solid $gray-light !important;
background: white !important;
textarea {
border: none;
}
textarea:focus {
background: white;
}
}
}
}
a.icon-btn,
div.icon-btn,
div.icon-btn > a {
background: transparent;
color: black;
border: 0px;
}
a.icon-btn:hover {
background: $gray-light;
}
ul.list-items {
border: 0px;
.dataset {
border: 0px;
div.summary {
.help-text {
color: black;
}
.job-error-text {
background: $gray-darker;
color: white;
border: 0px;
}
}
.dataset-peek {
background: $gray-darker !important;
color: white !important;
}
.primary-actions,
.left,
.right {
a.icon-btn,
div.icon-btn,
div.icon-btn > a {
background: transparent;
color: white;
border: 0px;
}
a.icon-btn:hover {
background: $gray-dark;
}
}
}
.warnings {
div {
border: 1px solid black;
background-color: white;
}
}
.dataset.state-running {
.title-bar {
color: white;
}
}
.dataset.state-paused,
.dataset.state-new,
.dataset.state-queued {
.title-bar {
color: black;
}
.primary-actions,
.left,
.right {
a.icon-btn,
div.icon-btn,
div.icon-btn > a {
color: black;
}
}
}
}
.current-history-panel .list-item.history-content.current-content {
border-left: 5px solid $gray-darker !important;
}
// Modals
//
div.modal {
div.modal-footer {
button {
border: 1px solid black;
background: white;
}
}
}
// Select2
.select2-container {
box-shadow: none;
ul.select2-choices {
border: 1px solid $gray-dark;
box-shadow: none;
li.select2-search-choice {
background: white;
color: black;
border: 1px solid black;
}
}
}
// pages
.unified-panel-header {
.panel-header-text {
color: black !important;
}
}
// Library
.library_style_container tr:hover td {
background-color: $gray-lighter !important;
}
.library_style_container tr.dark td {
background-color: $gray-light !important;
border-bottom-color: $gray-light !important;
}
// Pagination
.pagination > .active > a {
background-color: $brand-primary !important;
}
.pagination a {
padding-left: 0.8em !important;
padding-right: 0.8em !important;
}
client/galaxy/style/scss/ui.scss
+75 -707
View File
@@ -6,11 +6,7 @@
-ms-user-select: none; /* IE10+ */
}
// remove padding
.no-padding {
padding: 0px !important;
}
// prevents transitions i.e. when reseting a progress bar
.no-transition {
-webkit-transition: none !important;
-moz-transition: none !important;
@@ -19,6 +15,7 @@
transition: none !important;
}
// rotates an element i.e. used for font-awesome icons
.fa-rotate-45 {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
@@ -28,79 +25,11 @@
}
// default margins
$ui-margin-vertical: 5px;
$ui-margin-vertical-large: 10px;
$ui-margin-horizontal: 5px;
$ui-margin-horizontal-small: 4px;
$ui-margin-horizontal-large: 10px;
// helpers
.ui-clear-float {
clear: both !important;
float: none !important;
}
// margins
.ui-margin-top {
padding-top: $ui-margin-vertical !important;
}
.ui-margin-top-large {
padding-top: $ui-margin-vertical-large !important;
}
.ui-margin-bottom {
margin-bottom: $ui-margin-vertical !important;
}
.ui-margin-right {
margin-right: $ui-margin-horizontal-small !important;
}
.ui-margin-both {
@extend .ui-margin-top;
@extend .ui-margin-bottom;
}
// non-interactive elements
.ui-error {
-moz-border-radius: $border-radius-base;
border-radius: $border-radius-base;
background: $state-danger-bg;
padding: $ui-margin-vertical;
}
.ui-label {
font-weight: bold;
}
.ui-tags {
word-wrap: break-word;
padding-right: 25px;
}
.ui-column {
.ui-column-left {
width: 49%;
float: left;
.ui-message {
margin-top: 5px;
}
}
.ui-column-right {
width: 49%;
float: right;
margin-top: 5px;
}
}
.ui-message {
padding: 2px 10px 2px 10px;
margin-top: $ui-margin-vertical-large;
margin-bottom: 0px;
width: 100%;
word-wrap: break-word;
}
$ui-margin-vertical: $margin-v * 0.25;
$ui-margin-vertical-large: $margin-v * 0.5;
$ui-margin-horizontal: $margin-h;
$ui-margin-horizontal-small: $margin-h * 0.5;
$ui-margin-horizontal-large: $margin-v * 2;
.ui-modal {
display: none;
@@ -123,34 +52,10 @@ $ui-margin-horizontal-large: 10px;
}
}
.ui-modal-styled {
@extend .ui-modal;
ul {
list-style-type: square;
padding: 5px 25px;
}
}
// icons
.ui-icon {
font-size: 1.2em;
width: 1.2em;
}
.ui-icon-button {
@extend .ui-icon;
cursor: pointer;
}
// buttons
.ui-button-default {
float: right;
.icon {
font-size: 1.1em;
}
.progress {
height: 4px;
margin: 0px;
margin-top: 2px;
.progress-bar {
@extend .no-transition;
background: darken($state-success-bg, 30%);
@@ -158,121 +63,25 @@ $ui-margin-horizontal-large: 10px;
}
}
.ui-button-icon {
@extend .icon-btn;
@extend .no-highlight;
height: auto !important;
width: auto !important;
float: right;
ul {
i {
width: 1.2em;
font-size: 1.2em;
margin-right: $ui-margin-horizontal;
position: relative;
top: 1px;
}
}
.button {
margin-right: $ui-margin-horizontal;
margin-left: $ui-margin-horizontal;
.title {
position: relative;
font-size: 0.8em;
font-weight: normal;
top: -1px;
word-wrap: break-word;
}
}
.button.disabled {
opacity: 0.65;
}
}
.ui-button-menu {
.dropdown-menu {
min-width: 50px;
}
.dropdown-item {
text-align: left;
}
.dropdown-toggle::after {
display: none;
}
}
.ui-button-icon-plain {
@extend .icon-btn;
@extend .p-0;
border: none !important;
background: none !important;
height: inherit !important;
width: inherit !important;
padding-right: 3px !important;
float: right;
}
// side panel
.ui-side-panel {
color: $base-text-color;
background: $side-panel-bg;
padding: 10px;
min-height: 100%;
.ui-side-section-title {
font-weight: bold;
}
.ui-side-section-body {
.ui-side-section-body-title {
padding-top: 5px;
padding-bottom: 5px;
margin-left: 16px;
margin-right: 10px;
display: list-item;
list-style: square outside;
}
.ui-side-section-body-title:last-child {
padding-bottom: 15px;
}
}
}
// panel
.ui-panel {
.ui-panel-table {
margin-left: 20px;
margin-right: 20px;
.ui-panel-icon {
margin: 10px;
margin-right: 20px;
font-size: 1.6em;
}
.ui-panel-anchor {
font-weight: bold;
}
}
.ui-panel-footer {
margin-top: 10px;
.ui-button-check {
.icon {
font-size: 1.2em;
width: 1em;
}
cursor: pointer;
}
// tabs
.ui-tabs {
.tab-operations {
float: right;
margin-bottom: 4px;
.ui-button-icon {
margin-left: 4px;
}
}
.tab-element {
cursor: pointer;
}
.tab-icon {
font-size: 1.1em;
margin-right: $ui-margin-horizontal;
}
.tab-delete {
font-size: 0.8em;
margin-left: $ui-margin-horizontal;
.tabbable {
.nav-item {
cursor: pointer;
}
}
@@ -307,57 +116,6 @@ $ui-margin-horizontal-large: 10px;
}
}
// tables
.ui-table {
@extend .grid;
tbody {
cursor: pointer;
td {
// TODO: Fixme -- figure out what this actually pulled in.
//@extend .grid.tbody.td;
}
}
}
.ui-table-striped {
@extend .table;
@extend .table-striped;
width: 100%;
margin-bottom: 0px;
th {
text-align: center;
white-space: nowrap;
padding: 0.5rem;
}
td {
margin: 0px;
padding: 0.5rem;
.ui-button-icon {
line-height: 1.2em;
}
}
}
.ui-table-plain {
@extend .ui-table;
table-layout: fixed;
tbody {
cursor: auto !important;
td {
padding: 0px !important;
border: none !important;
}
}
.ui-table-section {
border-left: solid 3px $form-heading-bg;
border-radius: $border-radius-large !important;
margin-bottom: $ui-margin-vertical;
padding-left: 10px;
}
}
// table form elements
.ui-form-element {
margin-top: $ui-margin-vertical;
@@ -411,9 +169,6 @@ $ui-margin-horizontal-large: 10px;
box-shadow: none !important;
height: auto !important;
}
.workflow-right .right-content {
margin-bottom: 10px;
}
}
.ui-form-element-disabled {
@@ -423,142 +178,45 @@ $ui-margin-horizontal-large: 10px;
}
}
.ui-form-separator {
font-weight: bold;
font-size: 0.9em;
}
.ui-form-help {
overflow: auto;
word-wrap: break-word;
}
.ui-form-info {
@extend .toolParamHelp;
clear: both !important;
word-wrap: break-word;
i {
font-size: 1.2em;
padding: 2px 5px;
}
.ui-form-title {
clear: both;
font-weight: bold;
padding-right: $ui-margin-horizontal;
}
}
.ui-form-error {
display: none;
.ui-form-error-text {
padding-left: $ui-margin-horizontal;
}
}
.ui-form-section {
border-left: solid 3px $form-heading-bg;
border-radius: $border-radius-large !important;
padding-left: 10px;
}
.ui-form-composite {
max-width: 900px;
height: 100%;
flex-direction: column;
display: flex;
.ui-form-header {
@extend h3;
margin-top: 0px;
.ui-label {
width: calc(100% - 200px);
}
}
.ui-steps {
overflow: auto;
margin-top: 15px;
border: dashed 1px darken($form-heading-bg, 30%);
border-radius: $border-radius-base;
padding: $ui-margin-horizontal;
.ui-portlet-narrow {
.portlet-header {
padding: 1px 5px 0px 8px;
}
padding: 0px $ui-margin-horizontal 0px $ui-margin-horizontal;
.portlet-content {
padding: 0px $ui-margin-horizontal 0px $ui-margin-horizontal;
}
.ui-table-section,
.ui-portlet-repeat .portlet-content {
padding-left: $ui-margin-horizontal-large;
}
}
}
.ui-message {
margin-top: 0px;
margin-bottom: 10px;
}
}
// portlets
.ui-portlet {
border: solid $form-border 1px;
border-radius: $border-radius-base;
position: relative;
clear: both;
width: auto;
height: auto;
.portlet-header {
background: $form-heading-bg;
border-bottom: solid $form-border 1px;
padding: 2px 8px;
overflow: visible;
width: 100%;
@extend .card;
border: none;
height: 100%;
.portlet-header:first-child {
@extend .card-header;
@extend .rounded;
background: $gray-200;
.portlet-title {
word-wrap: break-word;
display: inline;
vertical-align: middle;
font-weight: bold;
.portlet-title-text {
vertical-align: middle;
line-height: 22px;
}
.portlet-title-text.no-highlight.collapsible {
.portlet-title-text.collapsible {
cursor: pointer;
text-decoration: underline;
}
.portlet-title-icon {
font-size: 1.2em;
vertical-align: middle;
margin-right: 5px;
}
}
.portlet-operations {
.ui-button-icon {
margin-left: $ui-margin-horizontal;
button {
@extend .ml-1;
}
}
}
.portlet-content {
height: inherit;
padding-left: 10px;
padding-right: 10px;
clear: both;
.portlet-body {
padding: 0px;
height: 100%;
width: 100%;
}
.portlet-buttons {
margin-top: $ui-margin-vertical-large;
margin-bottom: $ui-margin-vertical-large;
> .btn {
margin-right: 5px;
}
.portlet-buttons {
button {
@extend .float-left;
@extend .mr-1;
}
}
.portlet-content.nopadding,
.portlet-body.nopadding {
padding: 0px;
> .portlet-content {
@extend .card-body;
@extend .p-0;
}
.portlet-backdrop {
display: none;
@@ -573,212 +231,52 @@ $ui-margin-horizontal-large: 10px;
}
}
.ui-portlet-repeat {
@extend .ui-portlet;
border: none;
border-left: solid 3px $form-heading-bg;
border-radius: $border-radius-large;
margin-bottom: $ui-margin-vertical;
.portlet-header {
background: $form-heading-bg;
border-radius: $border-radius-large;
border-bottom-left-radius: 0px;
border-top-left-radius: 0px;
padding: 0px 2px;
.portlet-title-text {
vertical-align: middle;
line-height: 20px !important;
}
}
.portlet-content {
padding-right: 0px;
}
}
.ui-portlet-panel {
@extend .ui-portlet-repeat;
margin-top: $ui-margin-vertical;
border-left: solid 3px $side-panel-bg;
.portlet-header {
background: $side-panel-bg;
border-bottom: solid darken($side-panel-bg, 10%) 1px;
}
}
.ui-portlet-section {
@extend .ui-portlet-panel;
.portlet-highlight {
text-decoration: underline;
}
}
.ui-portlet-narrow {
@extend .ui-portlet-limited;
border: none;
margin-bottom: $ui-margin-vertical-large;
.portlet-header {
border-radius: $border-radius-base;
.portlet-operations {
.ui-button-icon {
margin-left: 3px;
}
}
}
.ui-portlet-repeat {
.portlet-header {
border-radius: $border-radius-large;
border-bottom-left-radius: 0px;
border-top-left-radius: 0px;
}
}
.portlet-content {
padding: 0px;
}
.ui-table-section,
.ui-portlet-repeat .portlet-content {
padding-left: $ui-margin-horizontal;
}
}
.ui-portlet-limited {
@extend .ui-portlet;
max-width: 900px;
}
.ui-portlet-plain {
@extend .ui-portlet;
@extend .mb-2;
border: none;
.portlet-content {
padding: 0px;
border-left: solid 3px $gray-200;
border-radius: $border-radius-large;
.portlet-header:first-child {
background: $gray-200;
@extend .rounded-0;
border-top-right-radius: $border-radius-large !important;
padding: 5px;
}
> .portlet-content {
@extend .pl-2;
@extend .pr-0;
}
}
// popovers
.ui-popover {
.popover {
max-width: 700px;
display: none;
opacity: 1;
margin-top: 0.5rem;
position: absolute;
top: 0;
left: 0;
z-index: 1010;
display: none;
padding: 1px;
text-align: left;
background-color: #ffffff;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.25rem;
-webkit-box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
white-space: normal;
.popover-close {
position: absolute;
right: 10px;
top: 7px;
font-size: 1.2em;
cursor: pointer;
}
.popover-title {
margin: 0;
padding: 0.5em 1rem;
font-size: inherit;
font-weight: normal;
line-height: 1rem;
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
border-radius: 0.25rem 0.25rem 0 0;
}
.popover-content {
padding: 0.6em 1rem;
}
.arrow {
border-width: 0.68rem;
}
.arrow::after {
border-width: 0.68rem;
content: "";
}
.arrow,
.arrow::after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-bottom-color: transparent;
border-style: solid;
}
&.bottom {
.arrow {
left: 50%;
margin-left: -0.65rem;
border-top-width: 0;
border-bottom-color: #999;
border-bottom-color: rgba(0, 0, 0, 0.25);
top: -0.72rem;
}
.arrow::after {
content: " ";
top: 0.05rem;
margin-left: -0.6rem;
border-top-width: 0;
border-bottom-color: #ffffff;
}
}
&.top {
margin-top: -0.6rem;
.arrow {
left: 50%;
margin-left: -0.65rem;
border-width: 0.4rem;
border-bottom-width: 0;
border-top-color: #999;
border-top-color: rgba(0, 0, 0, 0.25);
bottom: -0.65rem;
}
.arrow::after {
content: " ";
bottom: 0.05rem;
margin-left: -0.6rem;
border-bottom-width: 0;
border-top-color: #ffffff;
.popover-header {
i {
@extend .float-right;
@extend .pl-4;
font-size: 1.1em;
cursor: pointer;
}
}
}
// input elements
.ui-input {
width: 100%;
display: block;
@extend .form-control;
@extend .pt-1;
@extend .pl-2;
height: $input-height;
padding: $padding-base-vertical $ui-margin-horizontal !important;
font-size: $font-size-base;
line-height: $line-height-base;
color: $input-color;
border: 1px solid $input-border;
border-radius: $input-border-radius;
@include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075));
background-image: none;
background: transparent;
-webkit-appearance: none;
-moz-border-radius: $border-radius-base;
&[disabled],
&[readonly],
fieldset[disabled] & {
cursor: not-allowed;
background-color: $input-bg-disabled;
background-color: $gray-200;
}
}
.ui-input-basic {
@extend .ui-input;
@include box-shadow(inset 0 -1px 1px rgba(0, 0, 0, 0.075));
}
.ui-textarea {
@extend .ui-input;
height: 100px !important;
@@ -838,46 +336,6 @@ $ui-margin-horizontal-large: 10px;
}
}
.ui-form-slider {
display: inline-block;
width: 100%;
.ui-form-slider-text {
@extend .ui-input;
}
.ui-form-slider-left {
float: left;
width: 100px;
}
.ui-form-slider-element {
width: calc(100% - 110px);
float: left;
top: 8px;
left: 10px;
}
}
.ui-radiobutton {
top: -2px;
input {
display: none;
}
label {
padding: 2px 10px;
margin: 0px;
}
}
.ui-button-check {
.icon {
font-size: 1.2em;
width: 1.2em;
}
cursor: pointer;
margin-bottom: $ui-margin-vertical;
}
.ui-color-picker {
.ui-color-picker-header {
cursor: pointer;
@@ -937,78 +395,29 @@ $ui-margin-horizontal-large: 10px;
}
}
.ui-list {
.ui-list-select {
float: left;
width: calc(100% - 30px);
}
.ui-list-button {
.ui-button-icon {
margin-top: 3px;
margin-right: 5px;
float: left;
}
}
.ui-list-message,
.ui-list-portlet {
clear: both;
padding-top: 1px;
}
.ui-list-id {
cursor: pointer;
margin-top: 5px;
.ui-list-delete {
font-size: 1.2em;
margin-right: 5px;
}
}
}
.ui-gs-select-file {
.ui-gs-filename-textbox {
float: right;
width: calc(100% - 76px);
}
.ui-gs-browse-button {
float: left;
.ui-button-icon {
margin-top: 3px;
margin-right: 5px;
}
}
.ui-gs-browse-field {
height: $input-height;
line-height: $line-height-base;
}
}
.ui-select {
position: relative;
.icon-dropdown {
position: absolute;
top: 7px;
right: 8px;
top: 0.7rem;
right: 0.5rem;
cursor: pointer;
}
.icon-resize {
display: none;
}
select {
position: relative;
top: 0px;
height: 27px;
width: 100%;
padding-right: 20px;
@extend .ui-input-basic;
@extend .ui-input;
cursor: pointer;
padding-left: 5px;
-webkit-appearance: none;
-moz-border-radius: $border-radius-base;
}
.select2-container {
width: 100%;
.select2-choice {
height: 27px;
@extend .ui-input-basic;
padding-left: 5px;
@extend .ui-input;
background-image: none;
background: transparent;
-webkit-appearance: none;
-moz-border-radius: $border-radius-base;
line-height: 1.5rem;
.select2-arrow {
display: none;
}
@@ -1017,36 +426,29 @@ $ui-margin-horizontal-large: 10px;
.select2-container-multi {
.select2-choices {
@extend .ui-input;
padding: 0px;
}
}
}
.ui-select-multiple {
.icon-resize {
display: block;
position: absolute;
bottom: 0px;
right: 0px;
width: 20px;
height: 20px;
right: 0rem;
cursor: row-resize;
i {
position: absolute;
right: 3px;
bottom: 2px;
right: 0.2rem;
bottom: 0.2rem;
}
}
select {
height: 80px;
@include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075));
min-height: 8rem;
}
}
.ui-select-content {
.ui-options {
float: left;
padding-top: 2px;
@extend .float-left;
}
}
@@ -1069,45 +471,11 @@ $ui-margin-horizontal-large: 10px;
background: lighten($state-success-bg, 10%) !important;
}
.ui-limitloader {
padding: 10px;
float: left;
font-weight: bold;
display: none;
}
// global select2 adjustments
.select2-container .select2-choice,
.select2-container .select2-choices {
// select2 adjustments
.select2-drop-active,
.select2-drop-above.select2-drop-active {
border: 1px solid $input-border;
}
.select2-dropdown-open .select2-choice,
.select2-dropdown-open .select2-choices {
border: 1px solid $input-border;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.select2-dropdown-open.select2-drop-above .select2-choice,
.select2-dropdown-open.select2-drop-above .select2-choices {
border: 1px solid $input-border;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.select2-drop-active {
border: 1px solid $input-border;
border-radius: $input-border-radius;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
.select2-search {
padding-top: 5px;
}
}
.select2-drop.select2-drop-above.select2-drop-active {
border: 1px solid $input-border;
border-radius: $input-border-radius;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
.select2-search {
padding-top: 0px;
@extend .pt-1;
}
}
client/galaxy/style/scss/upload.scss
+33 -20
View File
@@ -29,7 +29,7 @@
}
.panel-header-button {
position: absolute;
width: 31px;
width: 31px !important;
text-align: center;
font-size: 1.2em;
padding: 0px;
@@ -45,13 +45,23 @@
color: $table-border-color !important;
}
}
.upload-icon {
font-size: 1.2em;
width: 1.2em;
position: relative;
top: 1px;
cursor: default;
}
.upload-icon-button {
@extend .upload-icon;
cursor: pointer;
}
.upload-box {
width: 100%;
height: 310px;
text-align: center;
overflow: scroll;
font-size: $font-size-base;
line-height: $line-height-large;
-moz-border-radius: $border-radius-large;
border-radius: $border-radius-large;
border: 1px dashed $btn-default-border;
@@ -86,6 +96,7 @@
word-wrap: break-word;
font-size: $font-size-sm;
float: left;
background: inherit;
}
/* Add back in lenght of extension, genome, and settings. */
.upload-title-extended {
@@ -109,11 +120,8 @@
font-size: $font-size-sm;
}
.upload-mode {
font-size: 1.2em;
width: 1.2em;
float: left;
position: relative;
top: 2px;
@extend .upload-icon;
@extend .float-left;
}
.upload-text-column {
position: relative;
@@ -146,7 +154,7 @@
width: 100%;
padding: 0px;
margin: 0px;
line-height: 1.55em;
line-height: 1.6em;
.progress-bar {
border-radius: inherit;
-moz-border-radius: inherit;
@@ -163,7 +171,6 @@
}
.upload-rule-option {
padding-top: 20px;
.upload-rule-option-title {
font-weight: bold;
padding-bottom: 5px;
@@ -178,14 +185,6 @@
margin-left: 5px;
}
}
.upload-icon {
@extend .ui-icon;
}
.upload-icon-button {
@extend .ui-icon-button;
position: relative;
top: 1px;
}
}
.upload-view-composite {
@@ -196,8 +195,9 @@
width: 175px;
}
.upload-source {
.ui-button-menu {
width: 70px !important;
width: 80px;
.btn {
padding: 0px 10px;
}
}
}
@@ -233,7 +233,6 @@
}
}
.upload-ftp-row:hover {
@extend .grid;
@extend .current;
}
th {
@@ -274,6 +273,14 @@
}
}
.upload-table {
@extend .table;
@extend .table-striped;
td {
padding: 0.5rem;
}
}
.upload-settings {
position: relative;
.upload-settings-cover {
@@ -286,6 +293,12 @@
opacity: 0.4;
cursor: no-drop;
}
tr {
cursor: pointer;
}
tr:hover {
@extend .current;
}
}
.upload-footer {
client/galaxy/style/source_material/error_icon.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="4in" height="4in" version="1"><svg:g><svg:path d="M 179.5176,40.035156 A 138.9825,138.9825 0 0 0 40.5352,179.01758 138.9825,138.9825 0 0 0 179.5176,318 138.9825,138.9825 0 0 0 318.5,179.01758 138.9825,138.9825 0 0 0 179.5176,40.035156 Z m -54.6797,47.087891 55.4512,60.787113 55.4492,-60.787113 29.5508,26.957033 -57.9297,63.50586 57.9297,63.50586 -29.5508,26.95898 -55.4512,-60.78711 -55.4492,60.78711 -29.5508,-26.95898 57.9297,-63.50586 -57.9297,-63.50586 29.5508,-26.957033 z" fill="#ff4343" fill-opacity="1" fill-rule="evenodd" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-opacity="1"/></svg:g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 730 B

client/galaxy/style/source_material/galaxy_icons.svg
+65 -239
View File
@@ -1,20 +1,20 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://web.resource.org/cc/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="24in"
width="4in"
height="4in"
id="svg2"
sodipodi:version="0.32"
inkscape:version="0.43"
inkscape:version="0.91 r13725"
version="1.0"
sodipodi:docbase="/Users/james/Desktop"
sodipodi:docname="galaxy_icons.svg"
inkscape:export-filename="/Users/james/Desktop/galaxy_icons.png"
inkscape:export-xdpi="90"
@@ -28,20 +28,21 @@
borderopacity="1"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.87055056"
inkscape:cx="1969.2512"
inkscape:cy="134.59503"
inkscape:zoom="0.61878453"
inkscape:cx="134.27218"
inkscape:cy="180.48242"
inkscape:document-units="px"
inkscape:current-layer="layer1"
inkscape:current-layer="layer5"
inkscape:showpageshadow="false"
showgrid="true"
showguides="false"
inkscape:guide-bbox="true"
inkscape:window-width="956"
inkscape:window-height="784"
inkscape:window-x="161"
inkscape:window-y="46"
inkscape:grid-points="true">
inkscape:window-width="1438"
inkscape:window-height="821"
inkscape:window-x="74"
inkscape:window-y="109"
inkscape:grid-points="true"
inkscape:window-maximized="0">
<sodipodi:guide
orientation="vertical"
position="400"
@@ -107,239 +108,64 @@
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:label="ok_icon"
inkscape:groupmode="layer"
id="layer1">
<path
sodipodi:type="arc"
style="fill:#04cd00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
id="path1307"
sodipodi:cx="205"
sodipodi:cy="205"
sodipodi:rx="134.28572"
sodipodi:ry="134.28572"
d="M 339.28572 205 A 134.28572 134.28572 0 1 1 70.714279,205 A 134.28572 134.28572 0 1 1 339.28572 205 z"
transform="matrix(1.034976,0,0,1.034976,-31.24154,-32.6701)" />
<path
sodipodi:type="arc"
style="fill:#838383;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
id="path2220"
sodipodi:cx="205"
sodipodi:cy="205"
sodipodi:rx="134.28572"
sodipodi:ry="134.28572"
d="M 339.28572 205 A 134.28572 134.28572 0 1 1 70.714279,205 A 134.28572 134.28572 0 1 1 339.28572 205 z"
transform="matrix(1.034976,0,0,1.034976,1047.812,-33.15258)" />
<rect
style="fill:#5050ff;fill-opacity:1;stroke:none;stroke-width:40;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect2224"
width="277"
height="278"
x="401"
y="43"
ry="103"
rx="103" />
<path
style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#ffffff;stroke-width:40;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 498.7868,172 L 541.58579,172 L 541.58579,278.00505"
id="path2230"
sodipodi:nodetypes="ccc" />
<path
sodipodi:type="arc"
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:40.00038147;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path2232"
sodipodi:cx="501.33871"
sodipodi:cy="84.935463"
sodipodi:rx="6.3639612"
sodipodi:ry="6.3639612"
d="M 507.70268 84.935463 A 6.3639612 6.3639612 0 1 1 494.97475,84.935463 A 6.3639612 6.3639612 0 1 1 507.70268 84.935463 z"
transform="matrix(1.0731,0,0,0.951722,-0.622656,25.52899)" />
<path
sodipodi:type="star"
style="fill:#ffb400;fill-opacity:1;stroke:none;stroke-width:50;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path2254"
sodipodi:sides="3"
sodipodi:cx="885.29767"
sodipodi:cy="14.931891"
sodipodi:r1="517.84943"
sodipodi:r2="344.36987"
sodipodi:arg1="0.50762901"
sodipodi:arg2="1.5548266"
inkscape:flatsided="false"
inkscape:rounded="0.22"
inkscape:randomized="0"
d="M 1337.846,266.66192 C 1289.0223,354.43494 991.22247,357.65394 890.79693,359.25785 C 790.37139,360.86176 492.62068,367.15437 441.01889,280.98526 C 389.41709,194.81614 535.52926,-64.695565 584.35301,-152.46859 C 633.17675,-240.24161 776.60255,-501.2476 877.02809,-502.8515 C 977.45363,-504.45541 1129.1413,-248.1627 1180.7431,-161.99359 C 1232.3449,-75.824474 1386.6698,178.8889 1337.846,266.66192 z "
transform="matrix(0.306393,0,0,0.318225,624.2074,203.0224)" />
<path
style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#ffffff;stroke-width:40;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 113.97056,196.98066 L 168.17157,236.85786 L 248.34315,104.65685"
id="path2270"
sodipodi:nodetypes="ccc" />
<path
style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#ffffff;stroke-width:40;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 1177.1421,96.07107 L 1263.1421,190 L 1317.1217,162.2807"
id="path2272"
sodipodi:nodetypes="ccc" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:40;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect2280"
width="29.446899"
height="21"
x="1140.5531"
y="170"
ry="0" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:40;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect2326"
width="29.446899"
height="21"
x="1351.5531"
y="169.77354"
ry="0" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:40;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect2328"
width="29.446899"
height="21"
x="60.260208"
y="-1271.2715"
ry="0"
transform="matrix(0,1,-1,0,0,0)" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:40;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect2330"
width="29.446899"
height="21"
x="270"
y="-1270.5857"
ry="0"
transform="matrix(0,1,-1,0,0,0)" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:40;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect2332"
width="131"
height="52"
x="100"
y="-920.58582"
ry="0"
transform="matrix(0,1,-1,0,0,0)" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:40;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect2334"
width="39.027634"
height="52"
x="250"
y="-919.87872"
ry="0"
transform="matrix(0,1,-1,0,0,0)" />
<path
sodipodi:type="arc"
style="fill:#ff4343;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
id="path2338"
sodipodi:cx="205"
sodipodi:cy="205"
sodipodi:rx="134.28572"
sodipodi:ry="134.28572"
d="M 339.28572 205 A 134.28572 134.28572 0 1 1 70.714279,205 A 134.28572 134.28572 0 1 1 339.28572 205 z"
transform="matrix(1.034976,0,0,1.034976,1409.347,-33.15258)" />
<path
style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#ffffff;stroke-width:40;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 1552.0629,100.60072 L 1692.5138,254.57128"
id="path2348"
sodipodi:nodetypes="cc" />
<path
style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#ffffff;stroke-width:40;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 1692.5138,100.60072 L 1552.0629,254.57128"
id="path2357"
sodipodi:nodetypes="cc" />
<path
sodipodi:type="arc"
style="fill:#838383;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
id="path2359"
sodipodi:cx="205"
sodipodi:cy="205"
sodipodi:rx="134.28572"
sodipodi:ry="134.28572"
d="M 339.28572 205 A 134.28572 134.28572 0 1 1 70.714279,205 A 134.28572 134.28572 0 1 1 339.28572 205 z"
transform="matrix(1.034976,0,0,1.034976,1768.416,-30.36099)" />
<g
id="g2389">
id="g3381">
<title
id="title3385">OkIcon</title>
<path
sodipodi:nodetypes="ccccc"
id="path2373"
d="M 1930,170.49538 L 1860,155 C 1857.0248,172.3719 1855.5,189.5625 1860,206 L 1930,189.58727 C 1929.1741,183.22331 1928.9462,176.85934 1930,170.49538 z "
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
sodipodi:nodetypes="ccccc"
id="path2375"
d="M 1941,146.46593 L 1888.1259,98.046542 C 1875.1851,112.76897 1868.0802,127.49141 1862.6259,142.21384 L 1931.4541,163 C 1933.471,155.74098 1937.1235,150.93552 1941,146.46593 z "
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
sodipodi:nodetypes="ccccc"
id="path2377"
d="M 1963.7479,130.36947 L 1942.1673,62 C 1927,66 1912.7224,73.141087 1898,87.50001 L 1947.2139,139.91545 C 1952.1833,135.10778 1957.8405,132.36324 1963.7479,130.36947 z "
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
<g
id="g2394"
transform="matrix(0,1,-1,0,2161,-1801.748)">
<path
sodipodi:nodetypes="ccccc"
id="path2396"
d="M 1930,170.49538 L 1860,155 C 1857.0248,172.3719 1855.5,189.5625 1860,206 L 1930,189.58727 C 1929.1741,183.22331 1928.9462,176.85934 1930,170.49538 z "
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
sodipodi:nodetypes="ccccc"
id="path2398"
d="M 1941,146.46593 L 1888.1259,98.046542 C 1875.1851,112.76897 1868.0802,127.49141 1862.6259,142.21384 L 1931.4541,163 C 1933.471,155.74098 1937.1235,150.93552 1941,146.46593 z "
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
sodipodi:nodetypes="ccccc"
id="path2400"
d="M 1963.7479,130.36947 L 1942.1673,62 C 1927,66 1912.7224,73.141087 1898,87.50001 L 1947.2139,139.91545 C 1952.1833,135.10778 1957.8405,132.36324 1963.7479,130.36947 z "
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
<g
id="g2402"
transform="matrix(-1,0,0,-1,3962.168,360.1885)">
<path
sodipodi:nodetypes="ccccc"
id="path2404"
d="M 1930,170.49538 L 1860,155 C 1857.0248,172.3719 1855.5,189.5625 1860,206 L 1930,189.58727 C 1929.1741,183.22331 1928.9462,176.85934 1930,170.49538 z "
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
sodipodi:nodetypes="ccccc"
id="path2406"
d="M 1941,146.46593 L 1888.1259,98.046542 C 1875.1851,112.76897 1868.0802,127.49141 1862.6259,142.21384 L 1931.4541,163 C 1933.471,155.74098 1937.1235,150.93552 1941,146.46593 z "
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
sodipodi:nodetypes="ccccc"
id="path2408"
d="M 1963.7479,130.36947 L 1942.1673,62 C 1927,66 1912.7224,73.141087 1898,87.50001 L 1947.2139,139.91545 C 1952.1833,135.10778 1957.8405,132.36324 1963.7479,130.36947 z "
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
<g
id="g2410"
transform="matrix(0,-1,1,0,1800.429,2161.522)">
<path
sodipodi:nodetypes="ccccc"
id="path2412"
d="M 1930,170.49538 L 1860,155 C 1857.0248,172.3719 1855.5,189.5625 1860,206 L 1930,189.58727 C 1929.1741,183.22331 1928.9462,176.85934 1930,170.49538 z "
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
sodipodi:nodetypes="ccccc"
id="path2414"
d="M 1941,146.46593 L 1888.1259,98.046542 C 1875.1851,112.76897 1868.0802,127.49141 1862.6259,142.21384 L 1931.4541,163 C 1933.471,155.74098 1937.1235,150.93552 1941,146.46593 z "
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
sodipodi:nodetypes="ccccc"
id="path2416"
d="M 1963.7479,130.36947 L 1942.1673,62 C 1927,66 1912.7224,73.141087 1898,87.50001 L 1947.2139,139.91545 C 1952.1833,135.10778 1957.8405,132.36324 1963.7479,130.36947 z "
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
style="fill:#04cd00;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 180.92773,40.517578 A 138.9825,138.9825 0 0 0 41.945312,179.5 138.9825,138.9825 0 0 0 180.92773,318.48242 138.9825,138.9825 0 0 0 319.91016,179.5 138.9825,138.9825 0 0 0 180.92773,40.517578 Z m 50.31446,53.767578 34.20117,20.742184 -91.50977,150.90039 -71.81445,-52.83789 23.70313,-32.21875 36.58593,26.91797 68.83399,-113.503904 z"
id="path1307"
inkscape:connector-curvature="0" />
</g>
</g>
<g
inkscape:groupmode="layer"
id="layer5"
inkscape:label="error_icon">
<path
style="fill:#ff4343;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 179.5176,40.035156 A 138.9825,138.9825 0 0 0 40.5352,179.01758 138.9825,138.9825 0 0 0 179.5176,318 138.9825,138.9825 0 0 0 318.5,179.01758 138.9825,138.9825 0 0 0 179.5176,40.035156 Z m -54.6797,47.087891 55.4512,60.787113 55.4492,-60.787113 29.5508,26.957033 -57.9297,63.50586 57.9297,63.50586 -29.5508,26.95898 -55.4512,-60.78711 -55.4492,60.78711 -29.5508,-26.95898 57.9297,-63.50586 -57.9297,-63.50586 29.5508,-26.957033 z"
id="path2338"
inkscape:connector-curvature="0" />
</g>
<g
inkscape:groupmode="layer"
id="layer4"
inkscape:label="wait_icon">
<path
style="fill:#838383;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 179.9824,40.035156 A 138.9825,138.9825 0 0 0 41,179.01758 138.9825,138.9825 0 0 0 179.9824,318 138.9825,138.9825 0 0 0 318.9648,179.01758 138.9825,138.9825 0 0 0 179.9824,40.035156 Z m -9.7109,20.22461 21,0 0,29.447265 -21,0 0,-29.447265 z m -58.3789,22.304687 75.6933,82.671877 40.4004,-20.7461 18.2715,35.58204 -67.5586,34.6914 -96.3086,-105.1875 29.502,-27.011717 z m 159.6601,87.208987 29.4473,0 0,21 -29.4473,0 0,-21 z M 60.5527,170 90,170 l 0,21 -29.4473,0 0,-21 z m 109.0332,100 21,0 0,29.44727 -21,0 0,-29.44727 z"
id="path2220"
inkscape:connector-curvature="0" />
</g>
<g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="info_icon">
<path
style="fill:#5050ff;fill-opacity:1;stroke:none;stroke-width:40;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 144,41 C 86.938,41 41,86.938 41,144 l 0,72 c 0,57.062 45.938,103 103,103 l 71,0 c 57.062,0 103,-45.938 103,-103 l 0,-72 C 318,86.938 272.062,41 215,41 Z m 33.36328,38.224609 c 15.39938,0 28.34375,11.481114 28.34375,25.138671 0,13.65755 -12.94437,25.13867 -28.34375,25.13867 -15.39937,0 -28.34375,-11.48112 -28.34375,-25.13867 0,-13.657557 12.94438,-25.138671 28.34375,-25.138671 z M 138.78711,150 l 62.79883,0 0,126.00586 -40,0 0,-86.00586 -22.79883,0 z"
id="rect2224"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ssssssssssssssccccccc" />
</g>
<g
inkscape:groupmode="layer"
id="layer3"
inkscape:label="warn_icon">
<path
style="fill:#ffb400;fill-opacity:1;stroke:none;stroke-width:50;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 174.92188,43.001953 C 144.15219,43.512356 100.20925,126.57234 85.25,154.50391 70.29075,182.43548 25.5216,265.01828 41.33203,292.43945 57.14246,319.86062 148.37095,317.85806 179.14062,317.34766 209.91031,316.83725 301.154,315.81243 316.1133,287.88086 331.0725,259.94929 283.7889,178.89382 267.97852,151.47266 252.16809,124.05149 205.69155,42.491551 174.92188,43.001953 Z M 150.58594,100 l 52,0 0,131 -52,0 0,-131 z m -0.70703,150 52,0 0,39.02734 -52,0 0,-39.02734 z"
id="path2254"
inkscape:connector-curvature="0" />
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 7.0 KiB

client/galaxy/style/source_material/info_icon.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="4in" height="4in" version="1"><svg:g><svg:path d="M 144,41 C 86.938,41 41,86.938 41,144 l 0,72 c 0,57.062 45.938,103 103,103 l 71,0 c 57.062,0 103,-45.938 103,-103 l 0,-72 C 318,86.938 272.062,41 215,41 Z m 33.36328,38.224609 c 15.39938,0 28.34375,11.481114 28.34375,25.138671 0,13.65755 -12.94437,25.13867 -28.34375,25.13867 -15.39937,0 -28.34375,-11.48112 -28.34375,-25.13867 0,-13.657557 12.94438,-25.138671 28.34375,-25.138671 z M 138.78711,150 l 62.79883,0 0,126.00586 -40,0 0,-86.00586 -22.79883,0 z" fill="#5050ff" fill-opacity="1" stroke="none" stroke-width="40" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1"/></svg:g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 785 B

client/galaxy/style/source_material/ok_icon.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="4in" height="4in" version="1"><svg:g><svg:g><svg:title>OkIcon</svg:title><svg:path d="M 180.92773,40.517578 A 138.9825,138.9825 0 0 0 41.945312,179.5 138.9825,138.9825 0 0 0 180.92773,318.48242 138.9825,138.9825 0 0 0 319.91016,179.5 138.9825,138.9825 0 0 0 180.92773,40.517578 Z m 50.31446,53.767578 34.20117,20.742184 -91.50977,150.90039 -71.81445,-52.83789 23.70313,-32.21875 36.58593,26.91797 68.83399,-113.503904 z" fill="#04cd00" fill-opacity="1" fill-rule="evenodd" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-opacity="1"/></svg:g></svg:g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 678 B

client/galaxy/style/source_material/wait_icon.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="4in" height="4in" version="1"><svg:g><svg:path d="M 179.9824,40.035156 A 138.9825,138.9825 0 0 0 41,179.01758 138.9825,138.9825 0 0 0 179.9824,318 138.9825,138.9825 0 0 0 318.9648,179.01758 138.9825,138.9825 0 0 0 179.9824,40.035156 Z m -9.7109,20.22461 21,0 0,29.447265 -21,0 0,-29.447265 z m -58.3789,22.304687 75.6933,82.671877 40.4004,-20.7461 18.2715,35.58204 -67.5586,34.6914 -96.3086,-105.1875 29.502,-27.011717 z m 159.6601,87.208987 29.4473,0 0,21 -29.4473,0 0,-21 z M 60.5527,170 90,170 l 0,21 -29.4473,0 0,-21 z m 109.0332,100 21,0 0,29.44727 -21,0 0,-29.44727 z" fill="#838383" fill-opacity="1" fill-rule="evenodd" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-opacity="1"/></svg:g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 824 B

client/galaxy/style/source_material/warn_icon.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="4in" height="4in" version="1"><svg:g><svg:path d="M 174.92188,43.001953 C 144.15219,43.512356 100.20925,126.57234 85.25,154.50391 70.29075,182.43548 25.5216,265.01828 41.33203,292.43945 57.14246,319.86062 148.37095,317.85806 179.14062,317.34766 209.91031,316.83725 301.154,315.81243 316.1133,287.88086 331.0725,259.94929 283.7889,178.89382 267.97852,151.47266 252.16809,124.05149 205.69155,42.491551 174.92188,43.001953 Z M 150.58594,100 l 52,0 0,131 -52,0 0,-131 z m -0.70703,150 52,0 0,39.02734 -52,0 0,-39.02734 z" fill="#ffb400" fill-opacity="1" stroke="none" stroke-width="50" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1"/></svg:g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 796 B

Some files were not shown because too many files have changed in this diff Show More