mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-01 01:38:07 +08:00
Alex Rudenko
982cb54086
- removed mentions of someIcon in the code. - unified the source for styles and (subjective) made the data flow more top-down. - added support for changing the icon color via CSS as I have started to use it and it is not always possible to change it via JS + it feels like setting the color can be done without a rerender. Follow-ups: - explicit API for masked and background image components - setting colors only via CSS? Change-Id: I3b15dc3a1b1039a59fd5e2c5e8d2136e696f7989 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2489422 Commit-Queue: Alex Rudenko <alexrudenko@chromium.org> Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
96 lines
2.9 KiB
HTML
96 lines
2.9 KiB
HTML
<!--
|
|
Copyright 2020 The Chromium Authors. All rights reserved.
|
|
Use of this source code is governed by a BSD-style license that can be
|
|
found in the LICENSE file.
|
|
-->
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<title>Element explore icon example</title>
|
|
<style>
|
|
#icon-overview {
|
|
width: 80%;
|
|
}
|
|
|
|
td, th {
|
|
text-align: left;
|
|
width: 50%;
|
|
height: 50px;
|
|
}
|
|
|
|
.custom-color {
|
|
--icon-color: blue;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<table id='icon-overview'>
|
|
<tr>
|
|
<th>Icon name</th>
|
|
<th>Icon</th>
|
|
</tr>
|
|
</table>
|
|
|
|
<script type="module">
|
|
import * as ComponentHelpers from '../../component_helpers/component_helpers.js';
|
|
import {Icon} from '../../elements/Icon.js';
|
|
|
|
ComponentHelpers.ComponentServerSetup.setup().then(() => renderComponent())
|
|
|
|
const renderComponent = () => {
|
|
const iconTable = document.getElementById('icon-overview');
|
|
|
|
const row1 = document.createElement('tr');
|
|
const iconName1 = document.createElement('td');
|
|
iconName1.textContent = 'node_search_icon';
|
|
row1.appendChild(iconName1);
|
|
|
|
const icon = new Icon();
|
|
const name = 'node_search_icon';
|
|
icon.data = {iconName: name, color: 'rgb(110, 110, 110)', width: '24px'};
|
|
const icon1 = document.createElement('td');
|
|
icon1.appendChild(icon);
|
|
row1.appendChild(icon1);
|
|
|
|
iconTable.appendChild(row1);
|
|
|
|
icon.onclick = async () => {
|
|
// Change of colour through a data-setter, which rerenders the component. Getting the data first in order not to specify the data fields all over again
|
|
icon.data = { ...icon.data,color: 'blue'};
|
|
};
|
|
|
|
const row2 = document.createElement('tr');
|
|
const iconName2 = document.createElement('td');
|
|
iconName2.textContent = 'breaking_change_icon';
|
|
row2.appendChild(iconName2);
|
|
|
|
const otherIcon = new Icon();
|
|
const otherPath = 'http://localhost:8090/Images/breaking_change_icon.svg';
|
|
otherIcon.data = {iconPath: otherPath, width:'24px', height: '27px'};
|
|
const icon2 = document.createElement('td');
|
|
icon2.appendChild(otherIcon);
|
|
row2.appendChild(icon2);
|
|
|
|
iconTable.appendChild(row2);
|
|
|
|
const row3 = document.createElement('tr');
|
|
const iconName3 = document.createElement('td');
|
|
iconName3.textContent = 'breaking_change_icon';
|
|
row3.appendChild(iconName3);
|
|
|
|
const otherIcon2 = new Icon();
|
|
otherIcon2.classList.add('custom-color');
|
|
otherIcon2.data = {iconName: 'node_search_icon', width:'24px', height: '24px', color: 'black'};
|
|
const icon3 = document.createElement('td');
|
|
icon3.appendChild(otherIcon2);
|
|
row3.appendChild(icon3);
|
|
|
|
iconTable.appendChild(row3);
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|