mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Fine-tune styles of Extensions page (#5921)
This commit is contained in:
Alex Andreev
GitHub
parent
feb2859b5d
commit
5ddd8e8846
@ -270,7 +270,7 @@ exports[`extensions - navigation using application menu when navigating to exten
|
||||
Extensions
|
||||
</h1>
|
||||
<div
|
||||
class="notice mb-14 mt-3"
|
||||
class="notice"
|
||||
>
|
||||
<p>
|
||||
Add new features via Lens Extensions. Check out the
|
||||
@ -292,9 +292,7 @@ exports[`extensions - navigation using application menu when navigating to exten
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
<section
|
||||
class="mt-2"
|
||||
>
|
||||
<section>
|
||||
<div
|
||||
class="SubTitle"
|
||||
>
|
||||
@ -302,16 +300,12 @@ exports[`extensions - navigation using application menu when navigating to exten
|
||||
|
||||
</div>
|
||||
<div
|
||||
class="flex"
|
||||
>
|
||||
<div
|
||||
class="flex-1"
|
||||
/>
|
||||
<div
|
||||
class="flex-initial"
|
||||
class="inputs"
|
||||
>
|
||||
<div />
|
||||
<div>
|
||||
<button
|
||||
class="Button w-80 h-full primary"
|
||||
class="Button button primary"
|
||||
type="button"
|
||||
>
|
||||
Install
|
||||
@ -319,7 +313,7 @@ exports[`extensions - navigation using application menu when navigating to exten
|
||||
</div>
|
||||
</div>
|
||||
<small
|
||||
class="mt-3"
|
||||
class="proTip"
|
||||
>
|
||||
<b>
|
||||
Pro-Tip
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
|
||||
.notice {
|
||||
margin-top: var(--margin);
|
||||
margin-bottom: calc(var(--margin) * 3);
|
||||
}
|
||||
@ -1,43 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
|
||||
.PageLayout.Extensions {
|
||||
$spacing: $padding * 2;
|
||||
width: 100%;
|
||||
|
||||
.contentRegion {
|
||||
.content {
|
||||
max-width: 740px;
|
||||
|
||||
> section {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.InstallingExtensionNotification {
|
||||
.remove-folder-warning {
|
||||
font-size: $font-size-small;
|
||||
font-style: italic;
|
||||
opacity: .8;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
code {
|
||||
display: inline;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.Button {
|
||||
background-color: unset;
|
||||
border: 1px solid currentColor;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
@ -3,7 +3,7 @@
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
|
||||
import "./extensions.scss";
|
||||
import styles from "./extensions.module.scss";
|
||||
import type {
|
||||
IComputedValue } from "mobx";
|
||||
import {
|
||||
@ -82,7 +82,7 @@ class NonInjectedExtensions extends React.Component<Dependencies> {
|
||||
<section>
|
||||
<h1>Extensions</h1>
|
||||
|
||||
<Notice className="mb-14 mt-3">
|
||||
<Notice className={styles.notice}>
|
||||
<p>
|
||||
{"Add new features via Lens Extensions. Check out the "}
|
||||
<a
|
||||
@ -112,8 +112,6 @@ class NonInjectedExtensions extends React.Component<Dependencies> {
|
||||
installPath={this.installPath}
|
||||
/>
|
||||
|
||||
{userExtensions.length > 0 && <hr />}
|
||||
|
||||
<InstalledExtensions
|
||||
extensions={userExtensions}
|
||||
enable={this.props.enableExtension}
|
||||
|
||||
@ -1,4 +1,29 @@
|
||||
.icon {
|
||||
@apply h-5 w-5 mr-3 cursor-pointer;
|
||||
background-color: transparent!important;
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
|
||||
.inputs {
|
||||
display: grid;
|
||||
justify-content: space-between;
|
||||
gap: calc(var(--unit) * 2);
|
||||
grid-template-columns: 1fr 220px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-left: var(--margin);
|
||||
}
|
||||
|
||||
.proTip {
|
||||
margin-top: calc(var(--margin) / 2);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -46,16 +46,15 @@ const NonInjectedInstall: React.FC<Dependencies & InstallProps> = ({
|
||||
installFromSelectFileDialog,
|
||||
extensionInstallationStateStore,
|
||||
}) => (
|
||||
<section className="mt-2">
|
||||
<section>
|
||||
<SubTitle
|
||||
title={`Name or file path or URL to an extension package (${supportedFormats.join(
|
||||
", ",
|
||||
)})`}
|
||||
/>
|
||||
<div className="flex">
|
||||
<div className="flex-1">
|
||||
<div className={styles.inputs}>
|
||||
<div>
|
||||
<Input
|
||||
className="box grow mr-6"
|
||||
theme="round-black"
|
||||
disabled={
|
||||
extensionInstallationStateStore.anyPreInstallingOrInstalling
|
||||
@ -69,6 +68,7 @@ const NonInjectedInstall: React.FC<Dependencies & InstallProps> = ({
|
||||
iconRight={(
|
||||
<Icon
|
||||
className={styles.icon}
|
||||
smallest
|
||||
material="folder_open"
|
||||
onClick={prevDefault(installFromSelectFileDialog)}
|
||||
tooltip="Browse"
|
||||
@ -76,11 +76,11 @@ const NonInjectedInstall: React.FC<Dependencies & InstallProps> = ({
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-initial">
|
||||
<div>
|
||||
<Button
|
||||
className={styles.button}
|
||||
primary
|
||||
label="Install"
|
||||
className="w-80 h-full"
|
||||
disabled={
|
||||
extensionInstallationStateStore.anyPreInstallingOrInstalling
|
||||
}
|
||||
@ -89,7 +89,7 @@ const NonInjectedInstall: React.FC<Dependencies & InstallProps> = ({
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<small className="mt-3">
|
||||
<small className={styles.proTip}>
|
||||
<b>Pro-Tip</b>
|
||||
: you can drag-n-drop tarball-file to this area
|
||||
</small>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user