-
Notifications
You must be signed in to change notification settings - Fork 0
Contextual Frame
ContextualUserInterface edited this page Feb 5, 2018
·
38 revisions
An ember.js component consisting of 9 rectangular containers, capable of containing 9 ember.js components.
- ember.js implementation that supports responsiveness as well as the ability to drop other components into each of the containers, including recursive insertion of instances of this component embedded in the containers.
- All border lines are set to 1 pixel wide.
- The 9 rectangular containers consist of three rows that are each one-third of the object height and three columns that are each one-third of the object width.
- Height of the top and bottom rows is set to 32 pixels.
- Width of the left and right columns is set to 32 pixels.
- Container E (the center container) consumes the remaining available space.
- Height of the top row is set to one third of the object height.
- Width of containers A, B, and C are set to one third of the object width.
- Height of the bottom row is set to 32 pixels.
- Width of containers D, F, G, and I is set to 32 pixels.
- Containers E and H consume the remaining available width.
- Container E consumes the remaining available height.
- Height of containers A, B, C, F and I are set to one third of the object height.
- Width of containers A, B, C, F and I are set to one third of the object width.
- Height of the containers G and H is set to 32 pixels.
- Width of the containers D and G is set to 32 pixels.
- Width of containers E and H is set to the remaining available width.
- Height of containers D and E is set to the remaining available height.
- Width of the right column is set to one third of the object width.
- Height of containers C, F, and I are set to one third of the object height.
- Width of the left column is set to 32 pixels.
- Height of containers A, B, G, and H is set to 32 pixels.
- Height of containers D and E consume the remaining available height.
- Width of containers B, E, and H consume the remaining available width.
- Height of containers C, F, G, H and I are set to one third of the object height.
- Width of containers C, F, G, H and I are set to one third of the object width.
- Height of the containers A and B is set to 32 pixels.
- Width of the containers A and D is set to 32 pixels.
- Width of containers B and E is set to the remaining available width.
- Height of containers D and E is set to the remaining available Height.
- Height of the bottom row is set to one third of the object height.
- Width of containers G, H, and I are set to one third of the object width.
- Height of the top row is set to 32 pixels.
- Width of containers A, C, D, and F is set to 32 pixels.
- Containers B and E consume the remaining available width.
- Container E consumes the remaining available height.
- Height of containers A, D, G, H and I are set to one third of the object height.
- Width of containers A, D, G, H and I are set to one third of the object width.
- Height of the containers B and C is set to 32 pixels.
- Width of the containers C and F is set to 32 pixels.
- Width of containers B and E is set to the remaining available width.
- Height of containers E and F is set to the remaining available Height.
- Width of the left column is set to one third of the object width.
- Height of containers A, D, and G are set to one third of the object height.
- Width of the right column is set to 32 pixels.
- Height of containers B, C, H, and I is set to 32 pixels.
- Height of containers E and F consume the remaining available height.
- Width of containers B, E, and H consume the remaining available width.
- Height of containers A, B, C, D and G are set to one third of the object height.
- Width of containers A, B, C, D and G are set to one third of the object width.
- Height of the containers H and I is set to 32 pixels.
- Width of the containers F and I is set to 32 pixels.
- Width of containers E and H is set to the remaining available width.
- Height of containers E and F is set to the remaining available Height.
- Will scale according to the shape of the parent container.
- ChangeState(state) - changes the object state
- SetBackColor(color) - sets the background color
- SetBorderColor(color) - sets the border color
- SetBorderVisibility(bool) - shows the outer border if true, hides it if false. border is initially visible.
- SetLinesVisibility(bool) - shows the inner lines if true, hides them if false. inner lines are initially invisible.
- Render Instance 0 in the page rectangle; ChangeState(Outline); SetLinesVisibility(true).
- Render Instance 1 in container E of instance 0; ChangeState(Balanced); SetLinesVisibility(true).
- Render Instance 2 in container A of instance 1; ChangeState(NorthWest); SetLinesVisibility(true).
- Render Instance 3 in container B of instance 1; ChangeState(North); SetLinesVisibility(true).
- Render Instance 4 in container C of instance 1; ChangeState(NorthEast); SetLinesVisibility(true).
- Render Instance 5 in container D of instance 1; ChangeState(West); SetLinesVisibility(true).
- Render Instance 6 in container E of instance 1; ChangeState(Balanced); SetLinesVisibility(true).
- Render Instance 7 in container F of instance 1; ChangeState(East); SetLinesVisibility(true).
- Render Instance 8 in container G of instance 1; ChangeState(SouthWest); SetLinesVisibility(true).
- Render Instance 9 in container H of instance 1; ChangeState(South); SetLinesVisibility(true).
- Render Instance 10 in container I of instance 1; ChangeState(SouthEast); SetLinesVisibility(true).