Merge pull request 'Optmi behavior list style' (#31) from dev-mrkbear into master
Reviewed-on: http://git.mrkbear.com/MrKBear/living-together/pulls/31
This commit is contained in:
commit
7fbbcff965
@ -9,93 +9,106 @@ div.behavior-list {
|
||||
|
||||
div.behavior-item {
|
||||
margin: 5px;
|
||||
height: $behavior-item-height;
|
||||
height: 45px;
|
||||
user-select: none;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
|
||||
div.behavior-color-view {
|
||||
height: 0;
|
||||
width: 100%;
|
||||
|
||||
div.behavior-color-view {
|
||||
height: $behavior-item-height;
|
||||
width: 3px;
|
||||
min-width: 3px;
|
||||
border-radius: 3px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
div {
|
||||
// position: relative;
|
||||
// top: 5px;
|
||||
// left: 5px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
// border-left: 8px solid red;
|
||||
border-bottom: 12px solid transparent;
|
||||
// border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
div.behavior-icon-view {
|
||||
height: $behavior-item-height;
|
||||
min-width: $behavior-item-height;
|
||||
width: $behavior-item-height;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
div.behavior-item-root {
|
||||
display: flex;
|
||||
|
||||
i {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
div.behavior-icon-view {
|
||||
height: $behavior-item-height;
|
||||
min-width: $behavior-item-height;
|
||||
width: $behavior-item-height;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
div.behavior-content-view {
|
||||
width: calc( 100% - 68px );
|
||||
max-width: 100px;
|
||||
height: $behavior-item-height;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
i {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
div.title-view {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
div.behavior-content-view {
|
||||
width: calc( 100% - 50px );
|
||||
padding-right: 5px;
|
||||
max-width: 125px;
|
||||
height: $behavior-item-height;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
||||
div.info-view {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
opacity: .75;
|
||||
}
|
||||
}
|
||||
|
||||
div.behavior-action-view {
|
||||
height: $behavior-item-height;
|
||||
min-width: 20px;
|
||||
width: 20px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
div.title-view {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div.behavior-action-button {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
div.info-view {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
opacity: .75;
|
||||
}
|
||||
}
|
||||
|
||||
div.behavior-action-view {
|
||||
height: $behavior-item-height;
|
||||
min-width: 20px;
|
||||
width: 20px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
|
||||
div.behavior-action-button.hover-red:hover i {
|
||||
color: $lt-red;
|
||||
}
|
||||
div.behavior-action-button {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.behavior-action-button.hover-blue:hover i {
|
||||
color: $lt-blue;
|
||||
}
|
||||
}
|
||||
div.behavior-action-button.hover-red:hover i {
|
||||
color: $lt-red;
|
||||
}
|
||||
|
||||
div.behavior-action-button.hover-blue:hover i {
|
||||
color: $lt-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.add-button {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@ -88,6 +88,7 @@ class BehaviorList extends Component<IBehaviorListProps & IMixinSettingProps> {
|
||||
name = behavior.name;
|
||||
color = behavior.color;
|
||||
needLocal = false;
|
||||
info = behavior.behaviorName;
|
||||
}
|
||||
|
||||
if (behavior instanceof BehaviorRecorder) {
|
||||
@ -111,20 +112,21 @@ class BehaviorList extends Component<IBehaviorListProps & IMixinSettingProps> {
|
||||
this.isActionClick = false;
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="behavior-color-view"
|
||||
style={{ backgroundColor: color }}
|
||||
/>
|
||||
<div className="behavior-icon-view">
|
||||
<Icon iconName={icon}/>
|
||||
</div>
|
||||
<div className="behavior-content-view">
|
||||
{this.renderTerm(behavior, name, "title-view", needLocal)}
|
||||
{this.renderTerm(behavior, info, "info-view", true)}
|
||||
</div>
|
||||
<div className="behavior-action-view">
|
||||
{this.renderActionButton(behavior)}
|
||||
</div>
|
||||
<div className="behavior-color-view">
|
||||
<div style={{ borderLeft: `12px solid ${color}` }}/>
|
||||
</div>
|
||||
<div className="behavior-item-root">
|
||||
<div className="behavior-icon-view">
|
||||
<Icon iconName={icon}/>
|
||||
</div>
|
||||
<div className="behavior-content-view">
|
||||
{this.renderTerm(behavior, name, "title-view", needLocal)}
|
||||
{this.renderTerm(behavior, info, "info-view", true)}
|
||||
</div>
|
||||
{/* <div className="behavior-action-view">
|
||||
{this.renderActionButton(behavior)}
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
@ -69,13 +69,13 @@ class Actuator extends Emitter<IActuatorEvent> {
|
||||
// 丢帧判定
|
||||
if (durTime > 0.1) {
|
||||
console.log("Actuator: Ticker dur time error. dropping...")
|
||||
}
|
||||
|
||||
this.alignTimer += durTime;
|
||||
if (this.alignTimer > (1 / this.fps)) {
|
||||
this.model.update(this.alignTimer * this.speed);
|
||||
this.emit("loop", this.alignTimer);
|
||||
this.alignTimer = 0;
|
||||
} else {
|
||||
this.alignTimer += durTime;
|
||||
if (this.alignTimer > (1 / this.fps)) {
|
||||
this.model.update(this.alignTimer * this.speed);
|
||||
this.emit("loop", this.alignTimer);
|
||||
this.alignTimer = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
|
||||
@ -56,11 +56,11 @@ class SimulatorWeb extends Component {
|
||||
this.status.newLabel().name = "New Label";
|
||||
this.status.newLabel().name = "Test Label 01";
|
||||
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]);
|
||||
brownian.name = "brownian";
|
||||
brownian.name = "Brownian"; brownian.color = "rgb(200, 80, 250)";
|
||||
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;
|
||||
group.addBehavior(dynamic);
|
||||
group.addBehavior(brownian);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user