diff options
| -rw-r--r-- | src/components/Tile.vue | 35 | ||||
| -rw-r--r-- | src/components/TileTree.vue | 2 | ||||
| -rwxr-xr-x | src/genTestImgs.sh | 2 |
3 files changed, 28 insertions, 11 deletions
diff --git a/src/components/Tile.vue b/src/components/Tile.vue index 9b74fee..5c98daf 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -39,8 +39,6 @@ export default defineComponent({ zIndex: String(this.zIdx), overflow: String(this.overflow), // Static styles - outline: 'black solid 1px', - backgroundColor: 'white', transitionProperty: 'left, top, width, height', transitionTimingFunction: 'ease-out', }; @@ -49,12 +47,30 @@ export default defineComponent({ return { width: '100%', height: '100%', - backgroundImage: 'url(\'/img/' + this.layoutNode.tolNode.name.replaceAll('\'', '\\\'') + '.jpg\')', + backgroundImage: 'url(\'/img/' + this.layoutNode.tolNode.name.replaceAll('\'', '\\\'') + '.png\')', backgroundSize: 'cover', + outline: 'black solid 1px', opacity: (this.layoutNode.tolNode.children.length > 0) ? '1' : '0.7', }; }, - headerStyles(): Record<string,string> { + leafHeaderStyles(): Record<string,string> { + return { + height: this.headerSz + 'px', + textAlign: 'center', + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + }; + }, + nonLeafStyles(): Record<string,string> { + return { + width: '100%', + height: '100%', + backgroundColor: 'white', + outline: 'black solid 1px', + }; + }, + nonLeafHeaderStyles(): Record<string,string> { return { height: this.headerSz + 'px', backgroundColor: 'lightgray', @@ -124,15 +140,16 @@ export default defineComponent({ <template> <div :style="tileStyles"> - <div v-if="layoutNode.children.length == 0" - :style="leafStyles" class="hover:cursor-pointer" @click="onLeafClick"/> - <div v-else> - <div v-if="showHeader" :style="headerStyles" class="hover:cursor-pointer" @click="onHeaderClick"> + <div v-if="layoutNode.children.length == 0" :style="leafStyles" class="hover:cursor-pointer" @click="onLeafClick"> + <div :style="leafHeaderStyles">{{layoutNode.tolNode.name}}</div> + </div> + <div v-else :style="nonLeafStyles"> + <div v-if="showHeader" :style="nonLeafHeaderStyles" class="hover:cursor-pointer" @click="onHeaderClick"> {{layoutNode.tolNode.name}} </div> <div :style="sepSweptAreaStyles" :class="sepSweptAreaOutlineClasses"> <div v-if="layoutNode?.sepSweptArea?.sweptLeft === false" - :style="headerStyles" class="hover:cursor-pointer" @click="onHeaderClick"> + :style="nonLeafHeaderStyles" class="hover:cursor-pointer" @click="onHeaderClick"> {{layoutNode.tolNode.name}} </div> </div> diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue index b2019ea..acb2134 100644 --- a/src/components/TileTree.vue +++ b/src/components/TileTree.vue @@ -21,7 +21,7 @@ const tol: TolNode = preprocessTol(tolRaw); // Configurable settings let layoutOptions: LayoutOptions = { // Integer values specify pixels - tileSpacing: 5, + tileSpacing: 8, headerSz: 20, minTileSz: 50, maxTileSz: 200, diff --git a/src/genTestImgs.sh b/src/genTestImgs.sh index a1dea28..1198a60 100755 --- a/src/genTestImgs.sh +++ b/src/genTestImgs.sh @@ -11,6 +11,6 @@ cat tol.json | \ convert -size 200x200 xc:khaki +repage \ -size 150x150 -fill black -background None \ -font Ubuntu-Mono -gravity center caption:"$REPLY" +repage \ - -gravity Center -composite -strip ../public/img/"$REPLY".jpg + -gravity Center -composite -strip ../public/img/"$REPLY".png done |