Which @codeimage/* package(s) are relevant/releated to the feature request? <p d

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Released with <a href="https://github.com/riccardoperra/codeimage/releases/tag/v1.6.0"

awesome <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-

<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="20

Awesome <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-

🚀 - Allow padding to be Zero about codeimage HOT 8 CLOSED

SarjuHansaliya commented on June 2, 2024 1

🚀 - Allow padding to be Zero

from codeimage.

Comments (8)

riccardoperra commented on June 2, 2024 1

Thanks for your collaboration 😃 use the contributions.md to startup the project but if you need something, just ask.

if you don’t want to run docker etc because you don’t need the backend for this change, I think you will have to run the build command manually for each package in “packages” folder, except “api-types” (which requires you to have a backend with Postgres up)

from codeimage.

SarjuHansaliya commented on June 2, 2024 1

@riccardoperra I have created PR here #625

from codeimage.

riccardoperra commented on June 2, 2024 1

Released with 1.6.0. Thanks for your contribution :)

from codeimage.

riccardoperra commented on June 2, 2024

Hi, yes this could be helpful 🙂

In my opinion the segmentedControl cannot be used anymore since there is no enough space for five items. Instead, we should use the Select control.

Anyway, some info for the pr since navigating into the codebase could be painful:

Here’s the configuration file with the padding settings
configuration.ts

I’d recommend you to refactor the current number[] array to a key-value object with label and value property, just like the “editorRadius” config.

The editor ui for padding is here: FrameStyleForm

You can copy a select implementation from this:

codeimage/apps/codeimage/src/components/PropertyEditor/EditorStyleForm.tsx

Lines 47 to 56 in d3bcdac

 const languagesOptions = createSelectOptions( 

 languages.map(language => ({ 

 label: language.label, 

 value: language.id, 

 })), 

 { 

 key: 'label', 

 valueKey: 'value', 

 }, 

 );

codeimage/apps/codeimage/src/components/PropertyEditor/EditorStyleForm.tsx

Lines 106 to 120 in d3bcdac

 <PanelRow for={'frameLanguageField'} label={t('frame.language')}> 

 <TwoColumnPanelRow> 

 <SuspenseEditorItem 

 fallback={<SkeletonLine width={'100%'} height={'26px'} />} 

 > 

 <Select 

 {...languagesOptions.props()} 

 {...languagesOptions.controlled( 

 () => editor().languageId, 

 language => { 

 setLanguageId(language!); 

 getUmami().track('change-language', { 

 language: language!, 

 }); 

 },

Note: currently the radius between the frame and the editor could be different, then the editor frame border radius must be 0 when frame padding = 0

I think you can update here the “styles.terminalVars.radius” css variable

codeimage/apps/codeimage/src/components/Terminal/TerminalHost.tsx

Lines 54 to 66 in d3bcdac

 style={assignInlineVars({ 

 [styles.terminalVars.headerBackgroundColor]: 

 tabTheme()?.background ?? '', 

 [styles.terminalVars.backgroundColor]: background(), 

 [styles.terminalVars.textColor]: props.textColor, 

 [styles.terminalVars.boxShadow]: props.shadow ?? 'unset', 

 [styles.terminalVars.tabTextColor]: tabTheme()?.textColor ?? '', 

 [styles.terminalVars.tabAccentActiveBackground]: 

 tabTheme().activeTabBackground ?? '', 

 [styles.terminalVars.tabAccentInactiveBackground]: 

 tabTheme().inactiveTabBackground ?? '', 

 ...(props.style ?? {}), 

 })}

from codeimage.

SarjuHansaliya commented on June 2, 2024

awesome @riccardoperra thank you for the information, let me work on it.

from codeimage.

stale commented on June 2, 2024

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

from codeimage.

riccardoperra commented on June 2, 2024

#625 to be merged

from codeimage.

SarjuHansaliya commented on June 2, 2024

Awesome @riccardoperra Thanks for publishing those changes

from codeimage.

🚀 - Allow padding to be Zero about codeimage HOT 8 CLOSED

Comments (8)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	const languagesOptions = createSelectOptions(
	languages.map(language => ({
	label: language.label,
	value: language.id,
	})),
	{
	key: 'label',
	valueKey: 'value',
	},
	);

	<PanelRow for={'frameLanguageField'} label={t('frame.language')}>
	<TwoColumnPanelRow>
	<SuspenseEditorItem
	fallback={<SkeletonLine width={'100%'} height={'26px'} />}
	>
	<Select
	{...languagesOptions.props()}
	{...languagesOptions.controlled(
	() => editor().languageId,
	language => {
	setLanguageId(language!);
	getUmami().track('change-language', {
	language: language!,
	});
	},

	style={assignInlineVars({
	[styles.terminalVars.headerBackgroundColor]:
	tabTheme()?.background ?? '',
	[styles.terminalVars.backgroundColor]: background(),
	[styles.terminalVars.textColor]: props.textColor,
	[styles.terminalVars.boxShadow]: props.shadow ?? 'unset',
	[styles.terminalVars.tabTextColor]: tabTheme()?.textColor ?? '',
	[styles.terminalVars.tabAccentActiveBackground]:
	tabTheme().activeTabBackground ?? '',
	[styles.terminalVars.tabAccentInactiveBackground]:
	tabTheme().inactiveTabBackground ?? '',
	...(props.style ?? {}),
	})}