mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-11 14:14:36 +08:00
Wolfgang Beyer
29c52f9caf
Add a toolbar to the issues pane. Its only content for now is an icon with the number of detected issues next to it. More content will be added later. Explicitly displaying a count of 0 fixes the confusion caused by the issues pane being completely empty when there are no issues to display. Screenshot: https://imgur.com/mWHVYc0 Fixed: chromium:1053466 Change-Id: I8a325f651d15f76960841b9b69a0693eb53fd63f Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2078232 Commit-Queue: Wolfgang Beyer <wolfi@chromium.org> Reviewed-by: Sigurd Schneider <sigurds@chromium.org>
122 lines
2.0 KiB
CSS
122 lines
2.0 KiB
CSS
/*
|
|
* Copyright (c) 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.
|
|
*/
|
|
|
|
.issue {
|
|
padding: 0 8px;
|
|
overflow: hidden;
|
|
flex: none;
|
|
transition: background-color 200ms;
|
|
background: #FFFFFF;
|
|
border: 1px solid #E5E5E5;
|
|
border-width: 0 0 1px;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 12px 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.icon {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.title {
|
|
flex: 1;
|
|
font-size: 14px;
|
|
color: #202124;
|
|
}
|
|
|
|
.priority {
|
|
font-size: 12px;
|
|
color: #C5221F;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.header::after {
|
|
transition: transform 200ms;
|
|
user-select: none;
|
|
-webkit-mask-image: url(Images/treeoutlineTriangles.svg);
|
|
-webkit-mask-size: 32px 24px;
|
|
content: "\00a0\00a0";
|
|
text-shadow: none;
|
|
margin-right: -2px;
|
|
height: 12px;
|
|
width: 13px;
|
|
background: #5F6368;
|
|
transform: rotate(90deg);
|
|
transform-origin: 25% 50%;
|
|
}
|
|
|
|
.body-wrapper {
|
|
max-height: 400px;
|
|
transition: max-height 200ms;
|
|
}
|
|
|
|
.body {
|
|
padding: 6px 0;
|
|
margin-left: 9.5px;
|
|
border-left: 2px solid #F29900;
|
|
padding-left: 21px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.message {
|
|
max-width: 600px;
|
|
line-height: 20px;
|
|
font-size: 14px;
|
|
color: #5F6368;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.code {
|
|
font-size: 12px;
|
|
color:rgba(95, 99, 104, 0.5);
|
|
margin-bottom: 16px;
|
|
user-select: text;
|
|
}
|
|
|
|
.link {
|
|
font-size: 14px;
|
|
color: #1967D2;
|
|
}
|
|
|
|
.link-icon {
|
|
|
|
}
|
|
|
|
.issue.collapsed {
|
|
background: #f3f3f3
|
|
}
|
|
|
|
.issue.collapsed .header::after {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.issue.collapsed .body-wrapper {
|
|
max-height: 0;
|
|
}
|
|
|
|
.issues-toolbar-container {
|
|
display: flex;
|
|
flex: none;
|
|
}
|
|
|
|
.issues-toolbar-container > .toolbar {
|
|
background-color: var(--toolbar-bg-color);
|
|
border-bottom: var(--divider-border);
|
|
}
|
|
|
|
.issues-toolbar-left {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.issues-toolbar-right {
|
|
padding-right: 6px;
|
|
}
|