mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
[6.7][Maps]Remove dark mode and default to kuery (#30007)
* remove dark mode * default to kuery
This commit is contained in:
parent
fbe7667568
commit
db38e66de2
7 changed files with 2 additions and 176 deletions
|
@ -4,10 +4,6 @@
|
|||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import chrome from 'ui/chrome';
|
||||
|
||||
const settings = chrome.getUiSettingsClient();
|
||||
|
||||
export function getInitialQuery({
|
||||
mapStateJSON,
|
||||
appState = {},
|
||||
|
@ -27,6 +23,6 @@ export function getInitialQuery({
|
|||
|
||||
return {
|
||||
query: '',
|
||||
language: userQueryLanguage || settings.get('search:queryLanguage')
|
||||
language: userQueryLanguage || 'kuery'
|
||||
};
|
||||
}
|
||||
|
|
|
@ -9,7 +9,6 @@ import React from 'react';
|
|||
import { I18nContext } from 'ui/i18n';
|
||||
import { render, unmountComponentAtNode } from 'react-dom';
|
||||
import { uiModules } from 'ui/modules';
|
||||
import { applyTheme } from 'ui/theme';
|
||||
import { timefilter } from 'ui/timefilter';
|
||||
import { Provider } from 'react-redux';
|
||||
import { getStore } from '../store/store';
|
||||
|
@ -22,7 +21,6 @@ import {
|
|||
setQuery,
|
||||
} from '../actions/store_actions';
|
||||
import {
|
||||
getIsDarkTheme,
|
||||
enableFullScreen,
|
||||
getIsFullScreen,
|
||||
updateFlyout,
|
||||
|
@ -33,7 +31,6 @@ import { Inspector } from 'ui/inspector';
|
|||
import { inspectorAdapters, indexPatternService } from '../kibana_services';
|
||||
import { SavedObjectSaveModal } from 'ui/saved_objects/components/saved_object_save_modal';
|
||||
import { showSaveModal } from 'ui/saved_objects/show_saved_object_save_modal';
|
||||
import { showOptionsPopover } from '../components/top_nav/show_options_popover';
|
||||
import { toastNotifications } from 'ui/notify';
|
||||
import { getInitialLayers } from './get_initial_layers';
|
||||
import { getInitialQuery } from './get_initial_query';
|
||||
|
@ -48,7 +45,6 @@ const app = uiModules.get('app/maps', []);
|
|||
app.controller('GisMapController', ($scope, $route, config, kbnUrl, localStorage, AppState, globalState) => {
|
||||
|
||||
const savedMap = $scope.map = $route.current.locals.map;
|
||||
let isDarkTheme;
|
||||
let unsubscribe;
|
||||
|
||||
inspectorAdapters.requests.reset();
|
||||
|
@ -177,14 +173,6 @@ app.controller('GisMapController', ($scope, $route, config, kbnUrl, localStorage
|
|||
|
||||
$scope.isFullScreen = false;
|
||||
function handleStoreChanges(store) {
|
||||
const state = store.getState();
|
||||
|
||||
// theme changes must triggered in digest cycle because top nav is still angular
|
||||
if (isDarkTheme !== getIsDarkTheme(state)) {
|
||||
isDarkTheme = getIsDarkTheme(state);
|
||||
updateTheme();
|
||||
}
|
||||
|
||||
const nextIsFullScreen = getIsFullScreen(store.getState());
|
||||
if (nextIsFullScreen !== $scope.isFullScreen) {
|
||||
// Must trigger digest cycle for angular top nav to redraw itself when isFullScreen changes
|
||||
|
@ -269,13 +257,6 @@ app.controller('GisMapController', ($scope, $route, config, kbnUrl, localStorage
|
|||
run() {
|
||||
Inspector.open(inspectorAdapters, {});
|
||||
}
|
||||
}, {
|
||||
key: 'options',
|
||||
description: 'Options',
|
||||
testId: 'optionsButton',
|
||||
run: async (menuItem, navController, anchorElement) => {
|
||||
showOptionsPopover(anchorElement);
|
||||
}
|
||||
}, {
|
||||
key: 'save',
|
||||
description: 'Save map',
|
||||
|
@ -310,22 +291,4 @@ app.controller('GisMapController', ($scope, $route, config, kbnUrl, localStorage
|
|||
showSaveModal(saveModal);
|
||||
}
|
||||
}];
|
||||
|
||||
function updateTheme() {
|
||||
$scope.$evalAsync(() => {
|
||||
isDarkTheme ? setDarkTheme() : setLightTheme();
|
||||
});
|
||||
}
|
||||
|
||||
function setDarkTheme() {
|
||||
chrome.removeApplicationClass(['theme-light']);
|
||||
chrome.addApplicationClass('theme-dark');
|
||||
applyTheme('dark');
|
||||
}
|
||||
|
||||
function setLightTheme() {
|
||||
chrome.removeApplicationClass(['theme-dark']);
|
||||
chrome.addApplicationClass('theme-light');
|
||||
applyTheme('light');
|
||||
}
|
||||
});
|
||||
|
|
|
@ -17,7 +17,6 @@ import {
|
|||
getRefreshConfig,
|
||||
getQuery,
|
||||
} from '../../selectors/map_selectors';
|
||||
import { getIsDarkTheme } from '../../store/ui';
|
||||
import { convertMapExtentToPolygon } from '../../elasticsearch_geo_utils';
|
||||
|
||||
const module = uiModules.get('app/maps');
|
||||
|
@ -84,9 +83,7 @@ module.factory('SavedGisMap', function (Private) {
|
|||
query: _.omit(getQuery(state), 'queryLastTriggeredAt'),
|
||||
});
|
||||
|
||||
this.uiStateJSON = JSON.stringify({
|
||||
isDarkMode: getIsDarkTheme(state),
|
||||
});
|
||||
this.uiStateJSON = JSON.stringify({});
|
||||
|
||||
this.bounds = convertMapExtentToPolygon(getMapExtent(state));
|
||||
};
|
||||
|
|
|
@ -1,40 +0,0 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License;
|
||||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import {
|
||||
EuiForm,
|
||||
EuiFormRow,
|
||||
EuiSwitch,
|
||||
} from '@elastic/eui';
|
||||
|
||||
export function OptionsMenu({ isDarkTheme, onDarkThemeChange }) {
|
||||
|
||||
const handleDarkThemeChange = (evt) => {
|
||||
onDarkThemeChange(evt.target.checked);
|
||||
};
|
||||
|
||||
return (
|
||||
<EuiForm
|
||||
data-test-subj="gisOptionsMenu"
|
||||
>
|
||||
<EuiFormRow>
|
||||
<EuiSwitch
|
||||
label="Use dark theme"
|
||||
checked={isDarkTheme}
|
||||
onChange={handleDarkThemeChange}
|
||||
/>
|
||||
</EuiFormRow>
|
||||
</EuiForm>
|
||||
);
|
||||
}
|
||||
|
||||
OptionsMenu.propTypes = {
|
||||
isDarkTheme: PropTypes.bool.isRequired,
|
||||
onDarkThemeChange: PropTypes.func.isRequired,
|
||||
};
|
|
@ -1,26 +0,0 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License;
|
||||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import { connect } from 'react-redux';
|
||||
import { getIsDarkTheme, updateIsDarkTheme } from '../../store/ui';
|
||||
import { OptionsMenu } from './options_menu';
|
||||
|
||||
function mapStateToProps(state = {}) {
|
||||
return {
|
||||
isDarkTheme: getIsDarkTheme(state),
|
||||
};
|
||||
}
|
||||
|
||||
function mapDispatchToProps(dispatch) {
|
||||
return {
|
||||
onDarkThemeChange: (isDarkTheme) => {
|
||||
dispatch(updateIsDarkTheme(isDarkTheme));
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const connectedOptionsMenu = connect(mapStateToProps, mapDispatchToProps)(OptionsMenu);
|
||||
export { connectedOptionsMenu as OptionsMenu };
|
|
@ -1,53 +0,0 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License;
|
||||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { Provider } from 'react-redux';
|
||||
|
||||
import { OptionsMenu } from './options_menu_container';
|
||||
|
||||
import { getStore } from '../../store/store';
|
||||
|
||||
import {
|
||||
EuiWrappingPopover,
|
||||
} from '@elastic/eui';
|
||||
|
||||
let isOpen = false;
|
||||
|
||||
const container = document.createElement('div');
|
||||
|
||||
const onClose = () => {
|
||||
ReactDOM.unmountComponentAtNode(container);
|
||||
isOpen = false;
|
||||
};
|
||||
|
||||
export async function showOptionsPopover(anchorElement) {
|
||||
if (isOpen) {
|
||||
onClose();
|
||||
return;
|
||||
}
|
||||
|
||||
isOpen = true;
|
||||
|
||||
const store = await getStore();
|
||||
|
||||
document.body.appendChild(container);
|
||||
const element = (
|
||||
<Provider store={store}>
|
||||
<EuiWrappingPopover
|
||||
className="navbar__popover"
|
||||
id="popover"
|
||||
button={anchorElement}
|
||||
isOpen={true}
|
||||
closePopover={onClose}
|
||||
>
|
||||
<OptionsMenu/>
|
||||
</EuiWrappingPopover>
|
||||
</Provider>
|
||||
);
|
||||
ReactDOM.render(element, container);
|
||||
}
|
|
@ -11,7 +11,6 @@ import { RESET_LAYER_LOAD } from '../actions/ui_actions';
|
|||
export const UPDATE_FLYOUT = 'UPDATE_FLYOUT';
|
||||
export const CLOSE_SET_VIEW = 'CLOSE_SET_VIEW';
|
||||
export const OPEN_SET_VIEW = 'OPEN_SET_VIEW';
|
||||
export const UPDATE_IS_DARK_THEME = 'UPDATE_IS_DARK_THEME';
|
||||
export const SET_FULL_SCREEN = 'SET_FULL_SCREEN';
|
||||
export const FLYOUT_STATE = {
|
||||
NONE: 'NONE',
|
||||
|
@ -26,7 +25,6 @@ export const LAYER_LOAD_STATE = {
|
|||
|
||||
const INITIAL_STATE = {
|
||||
flyoutDisplay: FLYOUT_STATE.NONE,
|
||||
isDarkTheme: false,
|
||||
layerLoad: {
|
||||
status: LAYER_LOAD_STATE.inactive,
|
||||
time: Date()
|
||||
|
@ -48,8 +46,6 @@ function ui(state = INITIAL_STATE, action) {
|
|||
time: Date() } };
|
||||
case UPDATE_FLYOUT:
|
||||
return { ...state, flyoutDisplay: action.display };
|
||||
case UPDATE_IS_DARK_THEME:
|
||||
return { ...state, isDarkTheme: action.isDarkTheme };
|
||||
case CLOSE_SET_VIEW:
|
||||
return { ...state, isSetViewOpen: false };
|
||||
case OPEN_SET_VIEW:
|
||||
|
@ -78,12 +74,6 @@ export function openSetView() {
|
|||
type: OPEN_SET_VIEW,
|
||||
};
|
||||
}
|
||||
export function updateIsDarkTheme(isDarkTheme) {
|
||||
return {
|
||||
type: UPDATE_IS_DARK_THEME,
|
||||
isDarkTheme
|
||||
};
|
||||
}
|
||||
export function exitFullScreen() {
|
||||
return {
|
||||
type: SET_FULL_SCREEN,
|
||||
|
@ -100,7 +90,6 @@ export function enableFullScreen() {
|
|||
// Selectors
|
||||
export const getFlyoutDisplay = ({ ui }) => ui && ui.flyoutDisplay
|
||||
|| INITIAL_STATE.flyoutDisplay;
|
||||
export const getIsDarkTheme = ({ ui }) => _.get(ui, 'isDarkTheme', INITIAL_STATE.isDarkTheme);
|
||||
export const getIsSetViewOpen = ({ ui }) => _.get(ui, 'isSetViewOpen', false);
|
||||
export const getIsFullScreen = ({ ui }) => _.get(ui, 'isFullScreen', false);
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue