Skip to content

Commit 51da7d4

Browse files
alephpiecealephpiece
committed
fix: long description
1 parent 738ccc2 commit 51da7d4

File tree

2 files changed

+26
-47
lines changed

2 files changed

+26
-47
lines changed

‎src/ui/styles/styles.scss

Lines changed: 10 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -602,20 +602,12 @@
602602
}
603603

604604
/* Setting item */
605-
.setting-item {
605+
.cmdr-setting-item {
606606
display: flex;
607607
align-items: center;
608608
padding: 6px 2px;
609-
border-top: none;
610-
margin: 0;
611609
width: 100%;
612610

613-
&.mod-toggle {
614-
border-top: none;
615-
padding-top: 6px;
616-
padding-bottom: 6px;
617-
}
618-
619611
> *:first-child {
620612
margin-inline-end: var(--size-2-3);
621613
}
@@ -629,20 +621,20 @@
629621
}
630622

631623
/* Setting item info */
632-
.setting-item-info {
624+
.cmdr-item-info {
633625
overflow: hidden;
634626
margin: 0 8px;
635-
max-width: 80%;
627+
max-width: 500px;
636628
text-align: left;
637629

638-
.setting-item-name {
630+
.cmdr-item-name {
639631
font-weight: var(--font-normal);
640632
white-space: nowrap;
641633
overflow: hidden;
642634
text-overflow: ellipsis;
643635
}
644636

645-
.setting-item-description {
637+
.cmdr-item-description {
646638
color: var(--text-muted);
647639
font-size: var(--font-smaller);
648640
white-space: nowrap;
@@ -652,26 +644,13 @@
652644
}
653645

654646
/* Setting item control */
655-
.setting-item-control {
647+
.cmdr-item-control {
648+
flex: 1 1 auto;
649+
text-align: end;
656650
display: flex;
651+
justify-content: flex-end;
657652
align-items: center;
658-
gap: 8px;
659-
660-
button {
661-
margin: 0;
662-
display: flex;
663-
align-items: center;
664-
justify-content: center;
665-
}
666-
667-
.setting-editor-extra-setting-button {
668-
padding: 4px;
669-
border-radius: var(--radius-s);
670-
671-
&:hover {
672-
background-color: var(--background-modifier-hover);
673-
}
674-
}
653+
gap: var(--size-2-2);
675654
}
676655

677656
/* Group collapser button */

‎src/ui/viewer/CommandComponent.tsx

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -57,16 +57,16 @@ export function CommandComponent({
5757
const { triggerModeIcon, triggerModeName } = getTriggerModeInfo(pair.triggerMode);
5858

5959
return (
60-
<div className="setting-item mod-toggle">
60+
<div className="cmdr-setting-item">
6161
<ObsidianIcon
6262
icon={pair.icon}
6363
size="var(--icon-l) + 4px"
6464
aria-label={t("bindings.icon.change")}
6565
onClick={handleNewIcon}
6666
className="cmdr-icon clickable-icon"
6767
/>
68-
<div className="setting-item-info">
69-
<div className="setting-item-name">
68+
<div className="cmdr-item-info">
69+
<div className="cmdr-item-name">
7070
<ChangeableText
7171
ariaLabel={t("bindings.rename.click")}
7272
handleChange={(e): void => {
@@ -77,7 +77,7 @@ export function CommandComponent({
7777
</div>
7878
{cmd && Platform.isDesktop && !isCommandGroup(pair) && (
7979
<div
80-
className="setting-item-description"
80+
className="cmdr-item-description"
8181
aria-label={`id: "${pair.id}"\naction: "${pair.action}"`}
8282
>
8383
{t("bindings.source", {
@@ -93,7 +93,7 @@ export function CommandComponent({
9393
</div>
9494
)}
9595
</div>
96-
<div className="setting-item-control">
96+
<div className="cmdr-item-control">
9797
{isCollapsed !== undefined && handleCollapse && (
9898
<ObsidianIcon
9999
icon={isCollapsed ? "chevron-right" : "chevron-down"}
@@ -107,15 +107,15 @@ export function CommandComponent({
107107
{isRootCommand(pair) && handleAddChild && (
108108
<ObsidianIcon
109109
icon="list-plus"
110-
className="setting-editor-extra-setting-button clickable-icon"
110+
className="clickable-icon"
111111
onClick={handleAddChild}
112112
aria-label={t("bindings.add_child")}
113113
/>
114114
)}
115115
{Platform.isMobile ? (
116116
<ObsidianIcon
117117
icon="pencil"
118-
className="setting-editor-extra-setting-button clickable-icon"
118+
className="clickable-icon"
119119
onClick={async (): Promise<void> => {
120120
if (plugin) {
121121
const updatedCommand = await new BindingEditorModal(
@@ -142,15 +142,15 @@ export function CommandComponent({
142142
<>
143143
<ObsidianIcon
144144
icon={triggerModeIcon}
145-
className="setting-editor-extra-setting-button clickable-icon"
145+
className="clickable-icon"
146146
onClick={(): void => handleTriggerModeChange()}
147147
aria-label={t("bindings.trigger_mode.change", {
148148
current_mode: triggerModeName,
149149
})}
150150
/>
151151
<ObsidianIcon
152152
icon={deviceModeIcon}
153-
className="setting-editor-extra-setting-button clickable-icon"
153+
className="clickable-icon"
154154
onClick={(): void => handleDeviceModeChange()}
155155
aria-label={t("bindings.device_mode.change", {
156156
current_mode: deviceModeName,
@@ -161,7 +161,7 @@ export function CommandComponent({
161161
)}
162162
<ObsidianIcon
163163
icon="lucide-trash"
164-
className="setting-editor-extra-setting-button clickable-icon"
164+
className="clickable-icon"
165165
style={{ color: "var(--text-error)" }}
166166
onClick={handleRemove}
167167
aria-label={t("common.delete")}
@@ -185,29 +185,29 @@ function UnavailableCommandComponent({
185185
}): ReactElement {
186186
const { t } = useTranslation();
187187
return (
188-
<div className="setting-item mod-toggle">
188+
<div className="cmdr-setting-item">
189189
<ObsidianIcon
190190
icon="alert-triangle"
191191
size="var(--icon-l) + 4px"
192192
className="cmdr-icon mod-warning"
193193
style={{ color: "var(--text-error)" }}
194194
aria-label={`id: "${pair.id}"\naction: "${pair.action}"`}
195195
/>
196-
<div className="setting-item-info">
197-
<div className="setting-item-name">{pair.name}</div>
196+
<div className="cmdr-item-info">
197+
<div className="cmdr-item-name">{pair.name}</div>
198198
{Platform.isDesktop && (
199199
<div
200-
className="setting-item-description"
200+
className="cmdr-item-description"
201201
style={{ color: "var(--text-error)" }}
202202
>
203203
{t("bindings.device_mode.unavailable")}
204204
</div>
205205
)}
206206
</div>
207-
<div className="setting-item-control">
207+
<div className="cmdr-item-control">
208208
<ObsidianIcon
209209
icon="lucide-trash"
210-
className="setting-editor-extra-setting-button clickable-icon"
210+
className="clickable-icon"
211211
style={{ color: "var(--text-error)" }}
212212
onClick={handleRemove}
213213
aria-label={t("common.delete")}

0 commit comments

Comments
 (0)