mirror of
https://github.com/zed-industries/zed.git
synced 2024-12-30 21:16:23 +00:00
Convert chat panel
This commit is contained in:
Nathan Sobo
Keith Simmons
parent
189db6311c
commit
70b15e4c90
3 changed files with 116 additions and 112 deletions
112
styles/app.ts
112
styles/app.ts
|
|
@ -4,6 +4,7 @@ import workspace from "./workspace";
|
|||
import editor from "./editor";
|
||||
import Theme from "./theme";
|
||||
import projectPanel from "./project-panel";
|
||||
import chatPanel from "./chat-panel";
|
||||
|
||||
export const panel = {
|
||||
padding: { top: 12, left: 12, bottom: 12, right: 12 },
|
||||
|
|
@ -30,116 +31,7 @@ export default function app(theme: Theme): Object {
|
|||
},
|
||||
},
|
||||
projectPanel: projectPanel(theme),
|
||||
chatPanel: {
|
||||
extends: "$panel",
|
||||
channelName: {
|
||||
extends: "$text.primary",
|
||||
weight: "bold",
|
||||
},
|
||||
channelNameHash: {
|
||||
text: "$text.muted",
|
||||
padding: {
|
||||
right: 8,
|
||||
},
|
||||
},
|
||||
channelSelect: {
|
||||
activeItem: {
|
||||
extends: "$chatPanel.channel_select.item",
|
||||
name: "$text.primary",
|
||||
},
|
||||
header: {
|
||||
extends: "$chat_panel.channel_select.activeItem",
|
||||
padding: {
|
||||
bottom: 4,
|
||||
left: 0,
|
||||
},
|
||||
},
|
||||
hoveredActiveItem: {
|
||||
extends: "$chatPanel.channelSelect.hoveredItem",
|
||||
name: "$text.primary",
|
||||
},
|
||||
hoveredItem: {
|
||||
background: "$state.hover",
|
||||
cornerRadius: 6,
|
||||
extends: "$chat_panel.channelSelect.item",
|
||||
},
|
||||
item: {
|
||||
name: "$text.secondary",
|
||||
padding: 4,
|
||||
hash: {
|
||||
extends: "$text.muted",
|
||||
margin: {
|
||||
right: 8,
|
||||
},
|
||||
},
|
||||
},
|
||||
menu: {
|
||||
background: "$surface.500",
|
||||
cornerRadius: 6,
|
||||
padding: 4,
|
||||
border: {
|
||||
color: "$border.primary",
|
||||
width: 1,
|
||||
},
|
||||
shadow: {
|
||||
blur: 16,
|
||||
color: "$shadow.0",
|
||||
offset: [0, 2],
|
||||
},
|
||||
},
|
||||
},
|
||||
hoveredSignInPrompt: {
|
||||
color: "$text.secondary.color",
|
||||
extends: "$chatPanel.signInPrompt",
|
||||
},
|
||||
inputEditor: {
|
||||
background: backgroundColor(theme, 300),
|
||||
cornerRadius: 6,
|
||||
placeholderText: "$text.muted",
|
||||
selection: "$selection.host",
|
||||
text: "$text.primary",
|
||||
border: {
|
||||
color: "$border.primary",
|
||||
width: 1,
|
||||
},
|
||||
padding: {
|
||||
bottom: 7,
|
||||
left: 8,
|
||||
right: 8,
|
||||
top: 7,
|
||||
},
|
||||
},
|
||||
message: {
|
||||
body: "$text.secondary",
|
||||
timestamp: "$text.muted",
|
||||
padding: {
|
||||
bottom: 6,
|
||||
},
|
||||
sender: {
|
||||
extends: "$text.primary",
|
||||
weight: "bold",
|
||||
margin: {
|
||||
right: 8,
|
||||
},
|
||||
},
|
||||
},
|
||||
pendingMessage: {
|
||||
extends: "$chatPanel.message",
|
||||
body: {
|
||||
color: "$text.muted.color",
|
||||
},
|
||||
sender: {
|
||||
color: "$text.muted.color",
|
||||
},
|
||||
timestamp: {
|
||||
color: "$text.muted.color",
|
||||
},
|
||||
},
|
||||
signInPrompt: {
|
||||
extends: "$text.primary",
|
||||
underline: true,
|
||||
},
|
||||
},
|
||||
chatPanel: chatPanel(theme),
|
||||
contactsPanel: {
|
||||
extends: "$panel",
|
||||
hostRowHeight: 28,
|
||||
|
|
|
|||
108
styles/chat-panel.ts
Normal file
108
styles/chat-panel.ts
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
import { panel } from "./app";
|
||||
import {
|
||||
backgroundColor,
|
||||
border,
|
||||
player,
|
||||
shadow,
|
||||
text,
|
||||
TextColor,
|
||||
} from "./components";
|
||||
import Theme from "./theme";
|
||||
|
||||
export default function chatPanel(theme: Theme) {
|
||||
function channelSelectItem(
|
||||
theme: Theme,
|
||||
textColor: TextColor,
|
||||
hovered: boolean
|
||||
) {
|
||||
return {
|
||||
name: text(theme, "sans", textColor),
|
||||
padding: 4,
|
||||
hash: {
|
||||
...text(theme, "sans", "muted"),
|
||||
margin: {
|
||||
right: 8,
|
||||
},
|
||||
},
|
||||
background: hovered ? backgroundColor(theme, 300, "hovered") : undefined,
|
||||
cornerRadius: hovered ? 6 : 0,
|
||||
};
|
||||
}
|
||||
|
||||
const message = {
|
||||
body: text(theme, "sans", "secondary"),
|
||||
timestamp: text(theme, "sans", "muted"),
|
||||
padding: {
|
||||
bottom: 6,
|
||||
},
|
||||
sender: {
|
||||
...text(theme, "sans", "primary", { weight: "bold" }),
|
||||
margin: {
|
||||
right: 8,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
...panel,
|
||||
channelName: text(theme, "sans", "primary", { weight: "bold" }),
|
||||
channelNameHash: {
|
||||
...text(theme, "sans", "muted"),
|
||||
padding: {
|
||||
right: 8,
|
||||
},
|
||||
},
|
||||
channelSelect: {
|
||||
header: {
|
||||
...channelSelectItem(theme, "primary", false),
|
||||
padding: {
|
||||
bottom: 4,
|
||||
left: 0,
|
||||
},
|
||||
},
|
||||
item: channelSelectItem(theme, "secondary", false),
|
||||
hoveredItem: channelSelectItem(theme, "secondary", true),
|
||||
activeItem: channelSelectItem(theme, "primary", false),
|
||||
hoveredActiveItem: channelSelectItem(theme, "primary", true),
|
||||
menu: {
|
||||
background: backgroundColor(theme, 500),
|
||||
cornerRadius: 6,
|
||||
padding: 4,
|
||||
border: border(theme, "primary"),
|
||||
shadow: shadow(theme),
|
||||
},
|
||||
},
|
||||
signInPrompt: text(theme, "sans", "secondary", { underline: true }),
|
||||
hoveredSignInPrompt: text(theme, "sans", "primary", { underline: true }),
|
||||
message,
|
||||
pendingMessage: {
|
||||
...message,
|
||||
body: {
|
||||
...message.body,
|
||||
color: theme.textColor.muted.value,
|
||||
},
|
||||
sender: {
|
||||
...message.sender,
|
||||
color: theme.textColor.muted.value,
|
||||
},
|
||||
timestamp: {
|
||||
...message.timestamp,
|
||||
color: theme.textColor.muted.value,
|
||||
},
|
||||
},
|
||||
inputEditor: {
|
||||
background: backgroundColor(theme, 300),
|
||||
cornerRadius: 6,
|
||||
text: text(theme, "mono", "primary"),
|
||||
placeholderText: text(theme, "mono", "muted"),
|
||||
selection: player(theme, 1).selection,
|
||||
border: border(theme, "primary"),
|
||||
padding: {
|
||||
bottom: 7,
|
||||
left: 8,
|
||||
right: 8,
|
||||
top: 7,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
@ -9,7 +9,11 @@ export function text(
|
|||
theme: Theme,
|
||||
fontFamily: keyof typeof core.fontFamily,
|
||||
color: TextColor,
|
||||
properties?: { size?: keyof typeof core["fontSize"]; weight?: Weight }
|
||||
properties?: {
|
||||
size?: keyof typeof core["fontSize"];
|
||||
weight?: Weight;
|
||||
underline?: boolean;
|
||||
}
|
||||
) {
|
||||
const sizeKey = properties.size || fontFamily === "sans" ? "sm" : "md";
|
||||
const size = core.fontSize[sizeKey].value;
|
||||
|
|
@ -74,7 +78,7 @@ export function backgroundColor(
|
|||
return theme.backgroundColor[name][state || "base"].value;
|
||||
}
|
||||
|
||||
export function shadow(theme) {
|
||||
export function shadow(theme: Theme) {
|
||||
return {
|
||||
blur: 16,
|
||||
color: chroma("black").alpha(theme.shadowAlpha.value).hex(),
|
||||
|
|
|
|||
Loading…
Reference in a new issue