Skip to content

GitLab

M
morpheus.js
Commit a6104fdc authored by jgould's avatar jgould
Browse files
Options

made tabs compact

parent d071c474
Show whitespace changes
Inline Side-by-side
Showing with 283 additions and 206 deletions
css/morpheus.all.css
View file @ a6104fdc
......@@ -195,6 +195,143 @@ classes should alter those!
position: absolute;
border: 2px dashed black;
}
.slick-cell {
margin: 0px;
border: none;
padding: 0px;
background-color: inherit;
white-space: normal !important;
}
.slick-row {
font-size: 13px;
line-height: 100%;
padding: 0px;
margin: 0px;
}
.slick-header-column.ui-state-default {
height: 20px;
line-height: 20px;
padding: 0px;
background: none;
background-color: #f6f7f8;
}
.slick-header-columns {
background-color: white;
}
.slick-table .ui-widget-content {
background: none;
}
.slick-table-compact .slick-row {
font-size: 12px;
}
.slick-table .slick-row {
background-color: white;
}
.slick-striped-table .slick-row.odd {
background-color: #fafafa;
}
.slick-bordered-table .ui-widget-content {
border-bottom: 1px solid #eee !important;
}
.slick-header-column {
color: black;
background-color: white;
font-weight: bold;
border-left: 1px solid black;
}
.slick-cell, .slick-headerrow-column {
overflow: hidden;
text-overflow: ellipsis;
}
.slick-header {
background-color: white;
border: none !important;
}
.slick-cell.selected {
background-color: #d9edf7;
}
.slick-stacked .slick-visible-stacked {
display: block;
}
.slick-table:not (.slick-stacked) .slick-visible-not-stacked {
display: block;
}
.slick-visible-not-stacked {
display: none;
}
.slick-visible-stacked {
display: none;
}
.slick-sort-indicator-desc {
background: none;
}
.slick-sort-indicator-asc {
background: none;
}
.slick-sort-indicator-desc::after {
content: "\f0dd";
font-family: FontAwesome;
margin-right: 3px;
margin-left: 4px;
margin-top: -3px;
}
.slick-sort-indicator {
float: none !important;
margin: 0 !important;
}
.slick-header-column-sorted {
font-style: normal;
}
.slick-column-name {
margin-left: 4px;
}
.slick-sort-indicator-asc::after {
content: "\f0de";
font-family: FontAwesome;
margin-right: 3px;
margin-left: 4px;
margin-top: -3px;
float: none;
}
.slick-cell-wrapper {
max-width: 0;
overflow: hidden;
vertical-align: middle;
display: table-cell;
text-overflow: ellipsis;
}
.slick-table-wrapper {
display: table;
height: 100%;
padding-left: 2px;
width: 100%;
}
@charset "UTF-8";
/*!
......@@ -3467,14 +3604,6 @@ Copyright (c) 2015 Daniel Eden
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp;
}
.morpheus-sep {
border-top: 1px solid #eee;
}
.dropdown-checkbox {
margin-left: -16px !important;
}
.ui-dialog .ui-dialog-titlebar {
font-size: 12px !important;
padding: 0.1em 1em !important;
......@@ -3482,25 +3611,22 @@ Copyright (c) 2015 Daniel Eden
}
.ui-widget {
font-family:inherit !important;
font-family: unset;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
border: 1px solid #cccccc;
background: #337ab7;
color: white;
}
.ui-menu-item {
background-color:white;
}
.ui-state-focus {
background: inherit !important;
background-color:#F7F7F7;
border: inherit !important;
color: inherit !important;
font-weight: inherit !important;
background-color: white;
}
.ui-autocomplete {
......@@ -3510,6 +3636,14 @@ Copyright (c) 2015 Daniel Eden
overflow-x: hidden;
}
.morpheus-sep {
border-top: 1px solid #eee;
}
.dropdown-checkbox {
margin-left: -16px !important;
}
.morpheus-button-divider {
width: 6px;
display: inline-block;
......@@ -3519,7 +3653,7 @@ Copyright (c) 2015 Daniel Eden
display: none !important;
}
.morpheus-hover:hover>.morpheus-hover-show {
.morpheus-hover:hover > .morpheus-hover-show {
display: block !important;
}
......@@ -3547,22 +3681,12 @@ Copyright (c) 2015 Daniel Eden
color: black;
text-align: left;
padding: 1px;
border: 1px solid rgba(0, 0, 0, 0.2);
border: 1px solid rgb(0, 0, 0);
/*border-radius: 6px;*/
/*box-shadow: rgba(0, 0, 0, 0.498039) 0px 5px 15px;*/
overflow: hidden;
}
.morpheus-padding-hor {
padding-left: 10px;
padding-right: 10px;
}
.morpheus-padding-ver {
padding-top: 10px;
padding-bottom: 10px;
}
.morpheus-form-control-inline {
display: inline !important;
width: auto !important;
......@@ -3576,119 +3700,17 @@ Copyright (c) 2015 Daniel Eden
background-color: white !important;
}
.slick-cell {
margin: 0px;
border: none;
padding: 0px;
background-color: inherit;
.nav-tabs.compact > li > a {
font-size: 0.9em;
padding: 1px 5px;
margin-right: 4px;
line-height: 16px;
}
.slick-row {
.form-compact .form-control {
padding: 0px 2px;
height: 22px;
font-size: 13px;
line-height: 100%;
padding: 0px;
margin: 0px;
}
.slick-header-column.ui-state-default {
height: 20px;
line-height: 20px;
padding: 0px;
background: none;
background-color: #f6f7f8;
}
.slick-header-columns {
background-color: white;
}
.slick-table .ui-widget-content {
background: none;
}
.slick-table-compact .slick-row {
font-size: 12px;
}
.slick-table .slick-row {
background-color: white;
}
.slick-striped-table .slick-row.odd {
background-color: #fafafa;
}
.slick-header-column {
color: black;
background-color: white;
font-weight: bold;
border-left: 1px solid black;
}
.slick-cell, .slick-headerrow-column {
overflow: hidden;
text-overflow: ellipsis;
}
.slick-header {
background-color: white;
border: none !important;
}
.slick-cell.selected {
background-color: #d9edf7;
}
.slick-stacked .slick-visible-stacked {
display: block;
}
.slick-table:not (.slick-stacked) .slick-visible-not-stacked {
display: block;
}
.slick-visible-not-stacked {
display: none;
}
.slick-visible-stacked {
display: none;
}
.slick-sort-indicator-desc {
background: none;
}
.slick-sort-indicator-asc {
background: none;
}
.slick-sort-indicator-desc::after {
content: "\f0dd";
font-family: FontAwesome;
margin-right: 3px;
margin-left: 4px;
margin-top: -3px;
}
.slick-sort-indicator {
float: none !important;
margin: 0 !important;
}
.slick-header-column-sorted {
font-style: normal;
}
.slick-column-name {
margin-left: 4px;
}
.slick-sort-indicator-asc::after {
content: "\f0de";
font-family: FontAwesome;
margin-right: 3px;
margin-left: 4px;
margin-top: -3px;
float: none;
}
css/morpheus.css
View file @ a6104fdc
......@@ -93,3 +93,18 @@
padding: 2px !important;
background-color: white !important;
}
.nav-tabs.compact > li > a {
font-size: 0.9em;
padding: 1px 5px;
margin-right: 4px;
line-height: 16px;
}
.form-compact .form-control {
padding: 0px 2px;
height: 22px;
font-size: 13px;
}
src/io/buffered_reader.js
View file @ a6104fdc
......@@ -88,6 +88,7 @@ morpheus.BufferedReader.getArrayBuffer = function (fileOrUrl, callback) {
};
oReq.send(null);
return oReq;
} else {
var reader = new FileReader();
reader.onload = function (event) {
......@@ -97,5 +98,6 @@ morpheus.BufferedReader.getArrayBuffer = function (fileOrUrl, callback) {
callback(event);
};
reader.readAsArrayBuffer(fileOrUrl);
return reader;
}
};
src/ui/heat_map.js
View file @ a6104fdc
......@@ -261,7 +261,8 @@ morpheus.HeatMap = function (options) {
});
// var $img = $a.find('img');
var $right = $('<li style="margin-right:2px;" class="pull-right"></li>');
var $right = $('<li data-name="help" style="margin-right:2px;"' +
' class="pull-right"></li>');
$a.appendTo($right);
new morpheus.HelpMenu().$el.appendTo($right);
$right.appendTo(this.tabManager.$nav);
......@@ -393,6 +394,7 @@ morpheus.HeatMap = function (options) {
if (_this.options.focus) {
_this.tabManager.setActiveTab(tab.id);
$(_this.heatmap.canvas).focus();
}
_this.$el.trigger('heatMapLoaded', _this);
};
......@@ -480,6 +482,7 @@ morpheus.HeatMap = function (options) {
message.push(err.message);
}
morpheus.FormBuilder.showInModal({
title: 'Error',
html: message.join('')
......@@ -2294,6 +2297,7 @@ morpheus.HeatMap.prototype = {
if (this.options.inlineTooltip) {
this.tooltipProvider(this, inline[hoverIndex], -1,
options, '<br />', true, tipFollowText);
}
}
this._setTipText(tipText, tipFollowText, options);
......@@ -2414,8 +2418,16 @@ morpheus.HeatMap.prototype = {
if (this.options.inlineTooltip) {
this.tooltipProvider(this, rowIndex, columnIndex,
options, '<br />', true, tipFollowText);
if (this.options.tooltip && rowIndex !== -1 && columnIndex !== -1) {
tipFollowText.push('<div data-name="tip"></div>');
}
}
this._setTipText(tipText, tipFollowText, options);
if (this.options.tooltip && rowIndex !== -1 && columnIndex !== -1) {
this.options.tooltip(this, rowIndex, columnIndex, this.$tipFollow.find('[data-name=tip]'));
}
}
,
......@@ -2446,7 +2458,7 @@ morpheus.HeatMap.prototype = {
_.each(tracks, function (track) {
var existingTrack = _this.getTrack(track.name, track.isColumns);
if (track.visible && existingTrack != null
&& _.keys(existingTrack.renderSettings).length === 0) {
&& _.keys(existingTrack.settings).length === 0) {
existingTrack.settingFromConfig('Text');
}
_this.setTrackVisible(track.name, track.visible, track.isColumns);
......@@ -2914,6 +2926,9 @@ morpheus.HeatMap.prototype = {
this.hscroll.setValue(pos, true);
}
,
isSelectedTrackColumns: function () {
return this.selectedTrackIsColumns;
},
setSelectedTrack: function (name, isColumns) {
if (name !== this.selectedTrackName
|| isColumns !== this.selectedTrackIsColumns) {
......
src/ui/heat_map_key_listener.js
View file @ a6104fdc
morpheus.HeatMapKeyListener = function (controller) {
var keydown = function (e) {
var tagName = e.target.tagName;
if (tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA') {
return;
}
var found = false;
var commandKey = morpheus.Util.IS_MAC ? e.metaKey : e.ctrlKey;
var altKey = e.altKey;
var shiftKey = e.shiftKey;
if (commandKey && shiftKey && e.which === 70) { // ctrl-shift-f
controller.getToolbar().toggleMenu();
found = true;
}
if (commandKey && e.which === 65) { // select all
if (tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA') {
; // skip
} else if (commandKey && e.which === 65) { // select all
var active = controller.getActiveComponent();
if (active !== -1) {
found = true;
......
src/ui/heat_map_toolbar.js
View file @ a6104fdc
......@@ -3,19 +3,19 @@ morpheus.HeatMapToolBar = function (controller) {
this.rowSearchResultModelIndices = [];
this.columnSearchResultModelIndices = [];
var _this = this;
var $el = $('<div class=" hidden-print container-fluid">'
+ '<div class="row"><div data-name="lineOneColumn" class="col-xs-12"></div></div>'
+ '<div class="row"><div data-name="lineTwoColumn" class="col-xs-12" style="border-bottom: 1px solid #e7e7e7;padding-bottom:4px; margin-bottom:14px;"></div></div>'
var $el = $('<div style="white-space:nowrap;" class="hidden-print container-fluid">'
+ '<div class="row"><div class="col-xs-12"><div data-name="lineOneColumn"></div></div></div>'
+ '<div class="row"><div class="col-xs-12"><div data-name="lineTwoColumn" style="border-bottom: 1px solid #e7e7e7;margin-bottom:10px;"></div></div></div>'
+ '</div>');
var searchHtml = [];
var $search = $('<form name="searchForm" class="form form-inline" role="search"></form>');
var $search = $('<form name="searchForm" class="form form-inline form-compact" role="search"></form>');
$search.on('submit', function (e) {
e.preventDefault();
});
// search rows
if (controller.options.toolbar.searchRows) {
searchHtml.push('<div class="form-group">');
searchHtml.push('<div class="input-group input-group-sm">');
searchHtml.push('<div class="input-group">');
searchHtml.push('<div class="input-group-btn">');
searchHtml
.push('<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span data-toggle="tooltip" title="Search rows. Quote search term for exact match. Narrow search with field: modifier. Exclude matches using - modifier. Use min..max to perform a range search.">Rows</span> <span class="caret"></span></button>');
......@@ -48,7 +48,7 @@ morpheus.HeatMapToolBar = function (controller) {
.push('<div class="form-group" style="margin-right:10px;"></div>'); // spacer
// search columns
searchHtml.push('<div class="form-group">');
searchHtml.push('<div class="input-group input-group-sm">'); // group
searchHtml.push('<div class="input-group">'); // group
searchHtml.push('<div class="input-group-btn">');
searchHtml
.push('<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span data-toggle="tooltip" title="Search columns. Quote search term for exact match. Narrow search with field: modifier. Exclude matches using - modifier. Use min..max to perform a range search.">Columns</span> <span class="caret"></span></button>');
......@@ -82,7 +82,7 @@ morpheus.HeatMapToolBar = function (controller) {
searchHtml
.push('<div data-name="searchValuesDiv" class="form-group" style="margin-left:10px;">');
searchHtml
.push('<div class="input-group input-group-sm"><span class="input-group-addon">Values</span><input type="text" style="width:240px;padding-right:25px;" class="form-control input-sm" autocomplete="off" name="searchValues"></div>');
.push('<div class="input-group"><span class="input-group-addon">Values</span><input type="text" style="width:240px;padding-right:25px;" class="form-control input-sm" autocomplete="off" name="searchValues"></div>');
searchHtml.push('</div>');
searchHtml.push('<div class="form-group" style="margin-left:4px;">');
searchHtml
......@@ -94,7 +94,7 @@ morpheus.HeatMapToolBar = function (controller) {
.push('<div style="display: none; margin-left:10px;" data-name="searchRowDendrogramWrapper"' +
' class="form-group">');
searchHtml
.push('<div class="input-group input-group-sm"><span class="input-group-addon">Row Dendrogram</span><input type="text" style="width:240px;" class="form-control input-sm" autocomplete="off" name="searchRowDendrogram"></div>');
.push('<div class="input-group"><span class="input-group-addon">Row Dendrogram</span><input type="text" style="width:240px;" class="form-control input-sm" autocomplete="off" name="searchRowDendrogram"></div>');
searchHtml
.push('<h6 data-name="searchResultsRowDendrogram" style="display: inline;"></h6>');
searchHtml.push('</div>');
......@@ -103,7 +103,7 @@ morpheus.HeatMapToolBar = function (controller) {
.push('<div style="display: none; margin-left:10px;"' +
' data-name="searchColumnDendrogramWrapper" class="form-group">');
searchHtml
.push('<div class="input-group input-group-sm"><span class="input-group-addon">Column Dendrogram</span><input type="text" style="width:240px;" class="form-control input-sm" autocomplete="off" name="searchColumnDendrogram"></div>');
.push('<div class="input-group"><span class="input-group-addon">Column Dendrogram</span><input type="text" style="width:240px;" class="form-control input-sm" autocomplete="off" name="searchColumnDendrogram"></div>');
searchHtml
.push('<h6 data-name="searchResultsColumnDendrogram" style="display: inline;"></h6>');
searchHtml.push('</div>');
......@@ -235,7 +235,6 @@ morpheus.HeatMapToolBar = function (controller) {
// legend
if (controller.options.toolbar.colorKey) {
toolbarHtml.push('<div class="btn-group">');
toolbarHtml
.push('<button type="button" class="btn btn-default btn-xs" data-toggle="dropdown"><span title="Color Key" data-toggle="tooltip" class="fa fa-key"></span></button>');
toolbarHtml.push('<ul data-name="key" class="dropdown-menu" role="menu">');
......@@ -244,15 +243,17 @@ morpheus.HeatMapToolBar = function (controller) {
toolbarHtml.push('</div>');
}
$search.appendTo($el.find('[data-name=lineOneColumn]'));
var $lineOneColumn = $el.find('[data-name=lineOneColumn]');
$search.appendTo($lineOneColumn);
var $toolbarForm = $(toolbarHtml.join(''));
$toolbarForm.appendTo($buttons);
if (controller.options.$help) {
controller.options.$help.appendTo($buttons);
}
$('<div data-name="tip" style="height: 14px; font-size: 12px;overflow:hidden;"></div>').appendTo($el.find('[data-name=lineTwoColumn]'));
$el.prependTo(controller.$content);
// $hide.appendTo($el.find('[data-name=toggleEl]'));
$el.prependTo(controller.$content);
var $tools = $el.find('[data-name=tools]');
this.$tip = $el.find('[data-name=tip]');
$tools.on('click', 'li > a', function (e) {
......@@ -622,6 +623,15 @@ morpheus.HeatMapToolBar = function (controller) {
eventAction: 'resetZoom'
});
});
this.toggleMenu = function () {
if ($lineOneColumn.css('display') === 'none') {
$lineOneColumn.css('display', '');
_this.$rowTextField.focus();
} else {
$lineOneColumn.css('display', 'none');
$(_this.controller.heatmap.canvas).focus();
}
};
this.$el = $el;
var updateFilterStatus = function () {
if (controller.getProject().getRowFilter().isEnabled()
......
src/ui/tab_manager.js
View file @ a6104fdc
......@@ -10,7 +10,7 @@ morpheus.TabManager = function (options) {
this.activeTabObject = null;
this.activeTabId = null;
this.idToTabObject = new morpheus.Map();
this.$nav = $('<ul class="nav nav-tabs"></ul>');
this.$nav = $('<ul class="nav nav-tabs compact"></ul>');
this.$nav.on('click', 'li > a', function (e) {
var tabId = $(this).attr('href');
e.preventDefault();
......@@ -255,6 +255,16 @@ morpheus.TabManager.prototype = {
tab: target
});
},
setOptions: function (options) {
this.options = options;
if (this.options.autohideTabBar) {
this.$nav.css('display', this.idToTabObject.size() > 1 ? ''
: 'none');
}
},
getOptions: function () {
return this.options;
},
setActiveTab: function (id) {
if (id === this.activeTabId) {
this.trigger('change', {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment