Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit1d35748

Browse files
authored
Merge pull request#1718 from iamfaran/ui/environments
[In Progress] Consistent UI for the Environments
2 parentsda22a64 +4c6a81b commit1d35748

16 files changed

+749
-676
lines changed

‎client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -85,8 +85,8 @@ const EnvironmentDetail: React.FC = () => {
8585

8686
if(isLoading){
8787
return(
88-
<divstyle={{display:'flex',justifyContent:'center',padding:'50px'}}>
89-
<Spinsize="large"tip="Loading environment..."style={{display:'block',textAlign:'center'}}/>
88+
<divstyle={{display:'flex',justifyContent:'center',padding:'60px 0'}}>
89+
<Spinsize="large"/>
9090
</div>
9191
);
9292
}
@@ -151,19 +151,21 @@ const EnvironmentDetail: React.FC = () => {
151151
onEditClick={handleEditClick}
152152
/>
153153

154-
155-
156-
{/* Basic Environment Information Card - improved responsiveness */}
154+
{/* Basic Environment Information Card */}
157155
<Card
158156
title="Environment Overview"
159-
style={{marginBottom:"24px",borderRadius:'8px',boxShadow:'0 2px 8px rgba(0,0,0,0.05)'}}
157+
style={{
158+
marginBottom:"24px",
159+
borderRadius:'4px',
160+
border:'1px solid #f0f0f0'
161+
}}
160162
className="environment-overview-card"
161163
>
162164
<Descriptions
163165
bordered
164-
layout="vertical"// Change to vertical layout on smaller screens
166+
layout="vertical"
165167
column={{xxl:4,xl:3,lg:3,md:2,sm:1,xs:1}}
166-
size="small"// Use smaller size on mobile
168+
size="small"
167169
>
168170
<Descriptions.Itemlabel="Domain">
169171
{environment.environmentFrontendUrl ?(
@@ -181,7 +183,7 @@ const EnvironmentDetail: React.FC = () => {
181183
<Descriptions.Itemlabel="Environment Type">
182184
<Tag
183185
color={getEnvironmentTagColor(environment.environmentType)}
184-
style={{borderRadius:'12px'}}
186+
style={{borderRadius:'4px'}}
185187
>
186188
{environment.environmentType}
187189
</Tag>
@@ -190,23 +192,23 @@ const EnvironmentDetail: React.FC = () => {
190192
{(()=>{
191193
switch(environment.licenseStatus){
192194
case'checking':
193-
return<Tagicon={<SyncOutlinedspin/>}color="blue"style={{borderRadius:'12px'}}>Checking...</Tag>;
195+
return<Tagicon={<SyncOutlinedspin/>}color="blue"style={{borderRadius:'4px'}}>Checking...</Tag>;
194196
case'licensed':
195-
return<Tagicon={<CheckCircleOutlined/>}color="green"style={{borderRadius:'12px'}}>Licensed</Tag>;
197+
return<Tagicon={<CheckCircleOutlined/>}color="green"style={{borderRadius:'4px'}}>Licensed</Tag>;
196198
case'unlicensed':
197-
return<Tagicon={<CloseCircleOutlined/>}color="red"style={{borderRadius:'12px'}}>Not Licensed</Tag>;
199+
return<Tagicon={<CloseCircleOutlined/>}color="red"style={{borderRadius:'4px'}}>Not Licensed</Tag>;
198200
case'error':
199-
return<Tagicon={<ExclamationCircleOutlined/>}color="orange"style={{borderRadius:'12px'}}>License Error</Tag>;
201+
return<Tagicon={<ExclamationCircleOutlined/>}color="orange"style={{borderRadius:'4px'}}>License Error</Tag>;
200202
default:
201-
return<Tagcolor="default"style={{borderRadius:'12px'}}>Unknown</Tag>;
203+
return<Tagcolor="default"style={{borderRadius:'4px'}}>Unknown</Tag>;
202204
}
203205
})()}
204206
</Descriptions.Item>
205207
<Descriptions.Itemlabel="API Key Status">
206208
{environment.environmentApikey ?(
207-
<Tagcolor="green"style={{borderRadius:'12px'}}>Configured</Tag>
209+
<Tagcolor="green"style={{borderRadius:'4px'}}>Configured</Tag>
208210
) :(
209-
<Tagcolor="red"style={{borderRadius:'12px'}}>Not Configured</Tag>
211+
<Tagcolor="red"style={{borderRadius:'4px'}}>Not Configured</Tag>
210212
)}
211213
</Descriptions.Item>
212214
<Descriptions.Itemlabel="Master Environment">
@@ -217,13 +219,14 @@ const EnvironmentDetail: React.FC = () => {
217219

218220
{/* Modern Breadcrumbs navigation */}
219221
<ModernBreadcrumbsitems={breadcrumbItems}/>
222+
220223
{/* Tabs for Workspaces and User Groups */}
221224
<Tabs
222225
defaultActiveKey="workspaces"
223226
activeKey={activeTab}
224227
onChange={setActiveTab}
225228
className="modern-tabs"
226-
type="card"
229+
type="line"
227230
>
228231
<TabPane
229232
tab={
@@ -233,7 +236,6 @@ const EnvironmentDetail: React.FC = () => {
233236
}
234237
key="workspaces"
235238
>
236-
{/* Using our new standalone WorkspacesTab component */}
237239
<WorkspacesTabenvironment={environment}/>
238240
</TabPane>
239241

@@ -245,7 +247,6 @@ const EnvironmentDetail: React.FC = () => {
245247
}
246248
key="userGroups"
247249
>
248-
{/* Now using our standalone UserGroupsTab component */}
249250
<UserGroupsTabenvironment={environment}/>
250251
</TabPane>
251252
</Tabs>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp