--- a/src_js/iconolab-bundle/src/components/editor/Canvas.vue Thu Feb 23 11:49:47 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/Canvas.vue Thu Feb 23 11:50:57 2017 +0100
@@ -23,19 +23,21 @@
</svg>
</div>
<div class="zoomer">
- <div class="btn-group-vertical" role="group" aria-label="...">
- <button @click="zoomIn" type="button" class="btn btn-default"
- v-bind:class="{ disabled: scale >= 1.9 }">
- <i class="fa fa-plus" aria-hidden="true"></i>
+
+ </div>
+ <div class="controls">
+ <div class="controls-left">
+ <button @click="setMode('rect')" type="button" class="btn"
+ v-bind:class="{ 'active': mode === 'rect', 'disabled': readonly }">
+ <svg width="14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><g><rect x="352" y="432" width="64" height="48"/><polygon points="416,352 416,96 176,96 176,160 352,160 352,352 160,352 160,32 96,32 96,96 32,96 32,160 96,160 96,416 480,416 480,352"/></g><text x="0" y="527" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Bluetip Design</text><text x="0" y="532" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
</button>
- <button @click="zoomOut" type="button" class="btn btn-default"
- v-bind:class="{ disabled: scale === 1 }">
- <i class="fa fa-minus" aria-hidden="true"></i>
+ <button @click="setMode('free')" type="button" class="btn"
+ v-bind:class="{ 'active': mode === 'free', 'disabled': readonly }">
+ <svg width="14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 30 30" xml:space="preserve"><g transform="translate(-450 -380)"><g xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M453,395c0,2.209,1.79,4,4,4c1.307,0,2.455-0.635,3.186-1.604l7.121,4.069C467.11,401.938,467,402.456,467,403 c0,2.209,1.79,4,4,4c2.209,0,4-1.791,4-4s-1.791-4-4-4c-1.307,0-2.455,0.635-3.186,1.604l-7.121-4.069 c0.196-0.473,0.307-0.99,0.307-1.534s-0.11-1.062-0.307-1.534l7.121-4.069c0.73,0.969,1.879,1.604,3.186,1.604 c2.209,0,4-1.791,4-4s-1.791-4-4-4c-2.21,0-4,1.791-4,4c0,0.544,0.11,1.062,0.307,1.534l-7.121,4.069 c-0.73-0.969-1.879-1.604-3.186-1.604C454.79,391,453,392.791,453,395z M471,400c1.654,0,3,1.346,3,3s-1.346,3-3,3s-3-1.346-3-3 S469.346,400,471,400z M471,384c1.654,0,3,1.346,3,3s-1.346,3-3,3s-3-1.346-3-3S469.346,384,471,384z M460,395 c0,1.654-1.346,3-3,3s-3-1.346-3-3s1.346-3,3-3S460,393.346,460,395z"/></g></g><text x="0" y="45" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Hea Poh Lin</text><text x="0" y="50" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
</button>
</div>
- </div>
- <div class="zoom-thumbnail">
<zoom-thumbnail
+ class="controls-center"
ref="thumbnail"
@change="changeViewBox($event)"
@dragstart="hideTooltip"
@@ -45,19 +47,18 @@
v-bind:viewBox="viewBox"
v-bind:imageWidth="imageWidth"
v-bind:imageHeight="imageHeight"></zoom-thumbnail>
- </div>
- <div class="mode-controls">
- <div class="btn-group" role="group" aria-label="...">
- <button @click="setMode('rect')" type="button" class="btn"
- v-bind:class="{ 'btn-default': true, 'btn-primary': mode === 'rect', 'disabled': readonly }">
- <svg width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><g><rect x="352" y="432" width="64" height="48"/><polygon points="416,352 416,96 176,96 176,160 352,160 352,352 160,352 160,32 96,32 96,96 32,96 32,160 96,160 96,416 480,416 480,352"/></g><text x="0" y="527" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Bluetip Design</text><text x="0" y="532" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
+ <div class="controls-right">
+ <button @click="zoomOut" type="button" class="btn"
+ v-bind:class="{ disabled: scale === 1 }">
+ <i class="fa fa-minus" aria-hidden="true"></i>
</button>
- <button @click="setMode('free')" type="button" class="btn"
- v-bind:class="{ 'btn-default': true, 'btn-primary': mode === 'free', 'disabled': readonly }">
- <svg width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 30 30" xml:space="preserve"><g transform="translate(-450 -380)"><g xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M453,395c0,2.209,1.79,4,4,4c1.307,0,2.455-0.635,3.186-1.604l7.121,4.069C467.11,401.938,467,402.456,467,403 c0,2.209,1.79,4,4,4c2.209,0,4-1.791,4-4s-1.791-4-4-4c-1.307,0-2.455,0.635-3.186,1.604l-7.121-4.069 c0.196-0.473,0.307-0.99,0.307-1.534s-0.11-1.062-0.307-1.534l7.121-4.069c0.73,0.969,1.879,1.604,3.186,1.604 c2.209,0,4-1.791,4-4s-1.791-4-4-4c-2.21,0-4,1.791-4,4c0,0.544,0.11,1.062,0.307,1.534l-7.121,4.069 c-0.73-0.969-1.879-1.604-3.186-1.604C454.79,391,453,392.791,453,395z M471,400c1.654,0,3,1.346,3,3s-1.346,3-3,3s-3-1.346-3-3 S469.346,400,471,400z M471,384c1.654,0,3,1.346,3,3s-1.346,3-3,3s-3-1.346-3-3S469.346,384,471,384z M460,395 c0,1.654-1.346,3-3,3s-3-1.346-3-3s1.346-3,3-3S460,393.346,460,395z"/></g></g><text x="0" y="45" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by Hea Poh Lin</text><text x="0" y="50" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
+ <button @click="zoomIn" type="button" class="btn"
+ v-bind:class="{ disabled: scale >= 1.9 }">
+ <i class="fa fa-plus" aria-hidden="true"></i>
</button>
- </path>
+ </div>
</div>
+
</div>
</template>
@@ -530,16 +531,7 @@
.canvas--free:hover {
cursor: pointer;
}
-.mode-controls {
- position: absolute;
- top: 15px;
- left: 15px;
-}
-.zoom-thumbnail {
- position: absolute;
- left: 15px;
- bottom: 15px;
-}
+
.mode-controls .btn > svg {
margin-top: 4px;
}
@@ -547,4 +539,45 @@
fill: #fff;
}
+.controls {
+ position: absolute;
+ transform: translateX(-50%);
+ left: 50%;
+ bottom: 15px;
+ display: flex;
+ align-items: center;
+}
+
+ .controls > * {
+ background-color: rgba(34, 34, 34, 0.9);
+ }
+
+ .controls .btn {
+ background-color: transparent;
+ color: #ccc;
+ fill: #ccc;
+ float: left;
+ }
+ .controls .btn:active,
+ .controls .btn.active {
+ color: #fff;
+ fill: #fff;
+ background-color: #111;
+ }
+ .controls .btn:hover {
+ background-color: #222;
+ }
+ .controls .controls-left {
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+ }
+ .controls .controls-center {
+ border-radius: 4px;
+ padding: 8px 8px 4px 8px;
+ }
+ .controls .controls-right {
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+ }
+
</style>