mirror of
https://github.com/pgadmin-org/pgadmin4.git
synced 2026-08-10 04:58:03 -05:00
Improvements in the UI for both default and dark themes. Fixes #5133
Improve the style of the highlighted code after query execution for Dark mode. Fixes #4996. Changed background pattern for geometry viewer to use #fff for all themes. Fixes #5077 Changed the color of selected and hovered item for Select2 dropdown, also tweak the appearance of the tags in multi-select boxes. Fixes #4955 Fixed Firefox monospaced issue by updating the font to the latest version. Fixes #5184
This commit is contained in:
Aditya Toshniwal
committed by
Akshay Joshi
Akshay Joshi
parent
29c236c33d
commit
9bad590e9e
@@ -468,14 +468,42 @@ define([
|
||||
helpMessage: '',
|
||||
name: '',
|
||||
},
|
||||
events: _.extend({}, Backform.InputControl.prototype.events, {
|
||||
'click label.btn': 'toggle',
|
||||
}),
|
||||
toggle: function(e) {
|
||||
/* Toggle the other buttons to unchecked and current to checked */
|
||||
let $curr = $(e.currentTarget),
|
||||
$btn_group = $curr.closest('.btn-group');
|
||||
|
||||
$btn_group.find('.btn')
|
||||
.removeClass('btn-primary')
|
||||
.addClass('btn-secondary')
|
||||
.find('.fa')
|
||||
.addClass('visibility-hidden')
|
||||
.siblings('input')
|
||||
.prop('checked', false);
|
||||
|
||||
$curr.removeClass('btn-secondary')
|
||||
.addClass('btn-primary')
|
||||
.find('.fa')
|
||||
.removeClass('visibility-hidden')
|
||||
.siblings('input')
|
||||
.prop('checked', true)
|
||||
.trigger('change');
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
},
|
||||
template: _.template([
|
||||
'<label class="<%=controlLabelClassName%>"><%=label%></label>',
|
||||
'<div class="<%=controlsClassName%> <%=extraClasses.join(\' \')%>">',
|
||||
' <div class="btn-group pgadmin-controls-radio-none<% if (disabled) {%> disabled <%}%>" data-toggle="buttons">',
|
||||
' <div class="btn-group pgadmin-controls-radio-none<% if (disabled) {%> disabled <%}%>" >',
|
||||
' <% for (var i=0; i < options.length; i++) { %>',
|
||||
' <% var option = options[i]; %>',
|
||||
' <label class="btn btn-primary<% if (option.value == value) { %> active<%}%><% if (!option.disabled && !disabled) { %>" tabindex="0"<% } else { %> disabled"<% } %>>',
|
||||
' <input type="radio" name="<%=name%>" autocomplete="off" value=<%-formatter.fromRaw(option.value)%> <% if (option.value == value) { %> checked<%}%> <% if (option.disabled || disabled) { %> disabled <%}%>> <%-option.label%>',
|
||||
' <label class="btn btn-radiomodern <% if (option.value == value) { %> btn-primary <%} else {%> btn-secondary <%}%> <% if (!option.disabled && !disabled) { %>" tabindex="0"<% } else { %> disabled"<% } %>>',
|
||||
' <i class="fa fa-check <% if (option.value != value) { %>visibility-hidden <%}%>"></i>',
|
||||
' <input type="radio" name="<%=name%>" autocomplete="off" value=<%-formatter.fromRaw(option.value)%> <% if (option.value == value) { %> checked<%}%> <% if (option.disabled || disabled) { %> disabled <%}%>> <%-option.label%>',
|
||||
' </label>',
|
||||
' <% } %>',
|
||||
' </div>',
|
||||
@@ -539,7 +567,7 @@ define([
|
||||
onText: gettext('Yes'),
|
||||
offText: gettext('No'),
|
||||
onColor: 'success',
|
||||
offColor: 'primary',
|
||||
offColor: 'ternary',
|
||||
size: 'mini',
|
||||
width: null,
|
||||
height: null,
|
||||
@@ -3237,16 +3265,19 @@ define([
|
||||
'<label class="<%=Backform.controlLabelClassName%>"><%=controlLabel%></label>',
|
||||
'<div class="<%=Backform.controlContainerClassName%>">',
|
||||
' <button class="btn btn-secondary btn-checkbox">',
|
||||
' <input type="<%=type%>" class="<%=extraClasses.join(\' \')%>" id="<%=cId%>" name="<%=name%>" <%=value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
|
||||
' <%=label%>',
|
||||
' <div class="custom-control custom-checkbox <%=extraClasses.join(\' \')%>">',
|
||||
' <input tabindex="-1" type="checkbox" class="custom-control-input" id="<%=cId%>" name="<%=name%>" <%=value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
|
||||
' <label class="custom-control-label" for="<%=cId%>">',
|
||||
' <%=label%>',
|
||||
' </label>',
|
||||
' </div>',
|
||||
' </button>',
|
||||
'</div>',
|
||||
].join('\n')),
|
||||
onButtonClick: function(e) {
|
||||
if (e.target.nodeName !== 'BUTTON')
|
||||
return;
|
||||
var $el = this.$el.find('input[type=checkbox]');
|
||||
$el.prop('checked', !$el.prop('checked'));
|
||||
this.$el.find('input[type=checkbox]').trigger('click');
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@@ -621,7 +621,7 @@ define([
|
||||
onText: gettext('Yes'),
|
||||
offText: gettext('No'),
|
||||
onColor: 'success',
|
||||
offColor: 'primary',
|
||||
offColor: 'ternary',
|
||||
size: 'mini',
|
||||
width: null,
|
||||
height: null,
|
||||
|
||||
@@ -59,7 +59,7 @@ export default class QueryHistory {
|
||||
this.parentNode.empty()
|
||||
.removeClass('d-flex')
|
||||
.append(
|
||||
`<div role="status" class='alert alert-info pg-panel-message'>${gettext(
|
||||
`<div role="status" class='pg-panel-message'>${gettext(
|
||||
'No history found'
|
||||
)}</div>`
|
||||
);
|
||||
|
||||
@@ -2,6 +2,7 @@ import moment from 'moment';
|
||||
import $ from 'jquery';
|
||||
import _ from 'underscore';
|
||||
import 'bootstrap.toggle';
|
||||
import gettext from 'sources/gettext';
|
||||
|
||||
const ARROWUP = 38;
|
||||
const ARROWDOWN = 40;
|
||||
@@ -71,7 +72,7 @@ export class QueryHistoryItem {
|
||||
`<li class='list-item' tabindex='0' data-key='${this.dataKey()}'>
|
||||
<div class='entry ${this.entry.status ? '' : 'error'}'>
|
||||
<div class='query'>
|
||||
<i id="query_source_icon" class="query-history-icon sql-icon-lg"></i>
|
||||
<span id="query_source_icon" class="query-history-icon sql-icon-lg"></span>
|
||||
${_.escape(this.entry.query)}
|
||||
</div>
|
||||
<div class='other-info'>
|
||||
@@ -251,12 +252,12 @@ export class QueryHistoryEntries {
|
||||
<div class="toggle-and-history-container">
|
||||
<div class="query-history-toggle">
|
||||
<label class="control-label">
|
||||
Show queries generated internally by pgAdmin?
|
||||
${gettext('Show queries generated internally by pgAdmin')}?
|
||||
</label>
|
||||
<input id="generated-queries-toggle" type="checkbox"
|
||||
class="pgadmin-controls" data-style="quick"
|
||||
data-size="mini" data-on="Yes" data-off="No"
|
||||
data-onstyle="success" data-offstyle="primary" checked>
|
||||
data-size="mini" data-on="${gettext('Yes')}" data-off="${gettext('No')}"
|
||||
data-onstyle="success" data-offstyle="ternary" checked>
|
||||
</div>
|
||||
<div id='query_list' class='query-history' tabindex='0'></div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user