mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Using css module for <Sidebar/>
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev
parent
d82f591ac1
commit
79fd4c895d
55
src/renderer/components/layout/sidebar.module.css
Normal file
55
src/renderer/components/layout/sidebar.module.css
Normal file
@ -0,0 +1,55 @@
|
||||
/**
|
||||
* Copyright (c) 2021 OpenLens Authors
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
* this software and associated documentation files (the "Software"), to deal in
|
||||
* the Software without restriction, including without limitation the rights to
|
||||
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
* the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
* subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
.sidebarNav {
|
||||
@apply flex overflow-auto flex-col;
|
||||
width: var(--sidebar-width);
|
||||
padding-bottom: calc(var(--padding) * 3);
|
||||
|
||||
/* Shadow above scrolling content from https://gist.github.com/distinctgrey/7548778 */
|
||||
background:
|
||||
linear-gradient(var(--sidebarBackground) 30%, rgba(255,255,255,0)),
|
||||
linear-gradient(rgba(255,255,255,0), var(--sidebarBackground) 70%) 0 100%,
|
||||
radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
|
||||
radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 40px, 100% 40px, 100% 12px, 100% 12px;
|
||||
background-attachment: local, local, scroll, scroll;
|
||||
}
|
||||
|
||||
.sidebarNav :global(.Icon) {
|
||||
box-sizing: content-box;
|
||||
padding: 3px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.cluster {
|
||||
@apply flex items-center m-5;
|
||||
}
|
||||
|
||||
.clusterName {
|
||||
@apply break-words font-bold overflow-hidden;
|
||||
color: var(--textColorAccent);
|
||||
display: -webkit-box;
|
||||
/* Simulate text-overflow:ellipsis styles but for multiple text lines */
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
@ -1,75 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) 2021 OpenLens Authors
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
* this software and associated documentation files (the "Software"), to deal in
|
||||
* the Software without restriction, including without limitation the rights to
|
||||
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
* the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
* subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
.Sidebar {
|
||||
$iconSize: 24px;
|
||||
$itemSpacing: floor($unit / 2.6) floor($unit / 1.6);
|
||||
|
||||
.sidebar-nav {
|
||||
width: var(--sidebar-width);
|
||||
padding-bottom: calc(var(--padding) * 3);
|
||||
overflow: auto;
|
||||
|
||||
/* Shadow above scrolling content from https://gist.github.com/distinctgrey/7548778 */
|
||||
background:
|
||||
linear-gradient(var(--sidebarBackground) 30%, rgba(255,255,255,0)),
|
||||
linear-gradient(rgba(255,255,255,0), var(--sidebarBackground) 70%) 0 100%,
|
||||
radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
|
||||
radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 40px, 100% 40px, 100% 12px, 100% 12px;
|
||||
background-attachment: local, local, scroll, scroll;
|
||||
|
||||
.Icon {
|
||||
--size: #{$iconSize};
|
||||
|
||||
box-sizing: content-box;
|
||||
padding: floor($padding / 2.6);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
padding: $padding;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cluster-description {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.cluster-name {
|
||||
word-break: break-word;
|
||||
font-weight: bold;
|
||||
color: var(--textColorAccent);
|
||||
display: -webkit-box;
|
||||
/* Simulate text-overflow:ellipsis styles but for multiple text lines */
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
@ -19,7 +19,7 @@
|
||||
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
import "./sidebar.scss";
|
||||
import styles from "./sidebar.module.css";
|
||||
import type { TabLayoutRoute } from "./tab-layout";
|
||||
|
||||
import React from "react";
|
||||
@ -186,9 +186,9 @@ export class Sidebar extends React.Component<Props> {
|
||||
const { className } = this.props;
|
||||
|
||||
return (
|
||||
<div className={cssNames(Sidebar.displayName, "flex column", className)}>
|
||||
<div className={cssNames("flex flex-col", className)}>
|
||||
{this.clusterEntity && (
|
||||
<div className="cluster-description">
|
||||
<div className={styles.cluster}>
|
||||
<HotbarIcon
|
||||
uid={this.clusterEntity.metadata.uid}
|
||||
title={this.clusterEntity.metadata.name}
|
||||
@ -196,12 +196,12 @@ export class Sidebar extends React.Component<Props> {
|
||||
src={this.clusterEntity.spec.icon?.src}
|
||||
className="mr-5"
|
||||
/>
|
||||
<div className="cluster-name">
|
||||
<div className={styles.clusterName}>
|
||||
{this.clusterEntity.metadata.name}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className={cssNames("sidebar-nav flex column box grow-fixed")}>
|
||||
<div className={styles.sidebarNav}>
|
||||
<SidebarItem
|
||||
id="cluster"
|
||||
text="Cluster"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user