MrKBear/living-together
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Optmi behavior list style #31

Merged
MrKBear merged 3 commits from dev-mrkbear into master 2022-03-31 22:15:46 +08:00
Conversation 0 Commits 3 Files Changed 4 +101 -89
3 changed files with 101 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 8dcbfbefb0 - Show all commits

32
source/Component/BehaviorList/BehaviorList.scss
View File

@ -9,19 +9,27 @@ div.behavior-list {
div.behavior-item { div.behavior-item {
margin: 5px; margin: 5px;
height: $behavior-item-height; height: 45px;
user-select: none; user-select: none;
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
display: flex;
div.behavior-color-view { div.behavior-color-view {
height: $behavior-item-height; height: 0;
width: 3px; width: 100%;
min-width: 3px;
border-radius: 3px; div {
flex-shrink: 0; position: relative;
top: 5px;
left: 5px;
width: 8px;
height: 8px;
border-radius: 8px;
} }
}
div.behavior-item-root {
display: flex;
div.behavior-icon-view { div.behavior-icon-view {
height: $behavior-item-height; height: $behavior-item-height;
@ -38,8 +46,9 @@ div.behavior-list {
} }
div.behavior-content-view { div.behavior-content-view {
width: calc( 100% - 68px ); width: calc( 100% - 50px );
max-width: 100px; padding-right: 5px;
max-width: 125px;
height: $behavior-item-height; height: $behavior-item-height;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -92,10 +101,11 @@ div.behavior-list {
} }
} }
} }
}
div.add-button { div.add-button {
width: 45px; width: 26px;
height: 45px; height: 26px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

12
source/Component/BehaviorList/BehaviorList.tsx
View File

@ -88,6 +88,7 @@ class BehaviorList extends Component<IBehaviorListProps & IMixinSettingProps> {
name = behavior.name; name = behavior.name;
color = behavior.color; color = behavior.color;
needLocal = false; needLocal = false;
info = behavior.behaviorName;
} }
if (behavior instanceof BehaviorRecorder) { if (behavior instanceof BehaviorRecorder) {
@ -111,10 +112,10 @@ class BehaviorList extends Component<IBehaviorListProps & IMixinSettingProps> {
this.isActionClick = false; this.isActionClick = false;
}} }}
> >
<div <div className="behavior-color-view">
className="behavior-color-view" <div style={{ backgroundColor: color }}/>
style={{ backgroundColor: color }} </div>
/> <div className="behavior-item-root">
<div className="behavior-icon-view"> <div className="behavior-icon-view">
<Icon iconName={icon}/> <Icon iconName={icon}/>
</div> </div>
@ -122,8 +123,9 @@ class BehaviorList extends Component<IBehaviorListProps & IMixinSettingProps> {
{this.renderTerm(behavior, name, "title-view", needLocal)} {this.renderTerm(behavior, name, "title-view", needLocal)}
{this.renderTerm(behavior, info, "info-view", true)} {this.renderTerm(behavior, info, "info-view", true)}
</div> </div>
<div className="behavior-action-view"> {/* <div className="behavior-action-view">
{this.renderActionButton(behavior)} {this.renderActionButton(behavior)}
</div> */}
</div> </div>
</div> </div>
} }

6
source/Page/SimulatorWeb/SimulatorWeb.tsx
View File

@ -56,11 +56,11 @@ class SimulatorWeb extends Component {
this.status.newLabel().name = "New Label"; this.status.newLabel().name = "New Label";
this.status.newLabel().name = "Test Label 01"; this.status.newLabel().name = "Test Label 01";
let dynamic = this.status.model.addBehavior(AllBehaviors[0]); let dynamic = this.status.model.addBehavior(AllBehaviors[0]);
dynamic.name = "dynamic"; dynamic.name = "Dynamic"; dynamic.color = "rgb(250, 200, 80)";
let brownian = this.status.model.addBehavior(AllBehaviors[1]); let brownian = this.status.model.addBehavior(AllBehaviors[1]);
brownian.name = "brownian"; brownian.name = "Brownian"; brownian.color = "rgb(200, 80, 250)";
let boundary = this.status.model.addBehavior(AllBehaviors[2]); let boundary = this.status.model.addBehavior(AllBehaviors[2]);
boundary.name = "boundary"; boundary.name = "Boundary"; boundary.color = "rgb(80, 200, 250)";
boundary.parameter.range = this.status.model.allRangeLabel; boundary.parameter.range = this.status.model.allRangeLabel;
group.addBehavior(dynamic); group.addBehavior(dynamic);
group.addBehavior(brownian); group.addBehavior(brownian);