Skip to content

Commit ea5b364

Browse files
peterdotjspeterdotjs
committed
Merge pull request #30 from peterdotjs/dev
Adding support for shortcut keys and scaled layouts.
2 parents 4e8c5c1 + bea8c26 commit ea5b364

33 files changed

+1443
-372
lines changed

‎css/style.less

Lines changed: 235 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -336,6 +336,22 @@ button.disabled {
336336
.selector-url(-600px,100px);
337337
}
338338

339+
.layout-6x4-scale-horizontal {
340+
.selector-url(-700px,100px);
341+
}
342+
343+
.layout-7x3-scale-horizontal {
344+
.selector-url(-900px,100px);
345+
}
346+
347+
.layout-6x4-scale-vertical {
348+
.selector-url(-1100px,100px);
349+
}
350+
351+
.layout-7x3-scale-vertical {
352+
.selector-url(-1200px,100px);
353+
}
354+
339355
.close-button {
340356
display: block;
341357

@@ -461,10 +477,10 @@ button.disabled {
461477
padding-right: 5px;
462478
}
463479

464-
.rate-it {
480+
.rate-it, .keyboard-shortcuts {
465481
border-left: 1px solid silver;
466482
padding-left: 5px;
467-
padding-right: 0px;
483+
padding-right: 5px;
468484
}
469485
}
470486

@@ -532,6 +548,83 @@ button.disabled {
532548

533549
.custom-view {
534550

551+
.modal-body, .modal-footer {
552+
position: relative;
553+
}
554+
555+
.scaled-layout-orientation {
556+
display: none;
557+
position: absolute;
558+
right: 21px;
559+
top: 12px;
560+
width: 200px;
561+
height: 30px;
562+
}
563+
564+
.layout-option {
565+
position: absolute;
566+
left: 20px;
567+
top: 6px;
568+
width: 180px;
569+
height: 25px;
570+
571+
label {
572+
font-size: 14px;
573+
line-height: 25px;
574+
}
575+
}
576+
577+
.scaled-input-container {
578+
display: none;
579+
position: absolute;
580+
right: -3px;
581+
top: 60px;
582+
583+
.scaled-input {
584+
display: inline-block;
585+
width: 70px;
586+
height: 70px;
587+
border-radius: 3px;
588+
margin-right: 35px;
589+
border: 2px solid grey;
590+
text-align: center;
591+
font-size: 19px;
592+
cursor: pointer;
593+
line-height: 70px;
594+
595+
&.selected {
596+
background: #eee;
597+
}
598+
}
599+
}
600+
601+
&.scaled {
602+
.scaled-layout-orientation {
603+
display: block;
604+
}
605+
606+
.input-container {
607+
visibility: hidden;
608+
}
609+
610+
.table-container {
611+
.table-label-top, .table-label-left {
612+
visibility: hidden;
613+
}
614+
}
615+
616+
.scaled-input-container {
617+
display: block;
618+
}
619+
620+
.modal-footer {
621+
button.disabled {
622+
pointer-events: auto;
623+
opacity: 1;
624+
}
625+
}
626+
}
627+
535628
.table-container {
536629
display: inline-block;
537630
position: relative;
@@ -745,6 +838,42 @@ body {
745838
.tab-layer {
746839
float: right !important;
747840
}
841+
842+
.layout-6x4-scale-horizontal {
843+
.selector-url(-800px,0px);
844+
}
845+
846+
.layout-7x3-scale-horizontal {
847+
.selector-url(-1000px,0px);
848+
}
849+
850+
.layout-6x4-scale-vertical {
851+
.selector-url(-1100px,0px);
852+
}
853+
854+
.layout-7x3-scale-vertical {
855+
.selector-url(-1200px,0px);
856+
}
857+
858+
.main-view .resize-container .resize-selector-container {
859+
&:hover {
860+
.layout-6x4-scale-horizontal {
861+
.selector-url(-800px,100px);
862+
}
863+
864+
.layout-7x3-scale-horizontal {
865+
.selector-url(-1000px,100px);
866+
}
867+
868+
.layout-6x4-scale-vertical {
869+
.selector-url(-1100px,100px);
870+
}
871+
872+
.layout-7x3-scale-vertical {
873+
.selector-url(-1200px,100px);
874+
}
875+
}
876+
}
748877
}
749878

750879
&.empty-tab-not-selected {
@@ -888,6 +1017,110 @@ body {
8881017
}
8891018
}
8901019

1020+
.layout-6x4-scale-horizontal {
1021+
.selector-url(-700px,0px);
1022+
1023+
.tab-layer-1 {
1024+
width: 60%;
1025+
height: 100%;
1026+
1027+
.fav-icon {
1028+
top: 35px;
1029+
left: 17px;
1030+
}
1031+
}
1032+
1033+
.tab-layer-2 {
1034+
width: 40%;
1035+
height: 100%;
1036+
1037+
.fav-icon {
1038+
top: 35px;
1039+
left: 7px;
1040+
}
1041+
}
1042+
}
1043+
1044+
.layout-7x3-scale-horizontal {
1045+
.selector-url(-900px,0px);
1046+
1047+
.tab-layer-1 {
1048+
width: 67%;
1049+
height: 100%;
1050+
1051+
.fav-icon {
1052+
top: 35px;
1053+
left: 20px;
1054+
}
1055+
}
1056+
1057+
.tab-layer-2 {
1058+
width: 33%;
1059+
height: 100%;
1060+
1061+
.fav-icon {
1062+
top: 35px;
1063+
left: 3px;
1064+
}
1065+
}
1066+
}
1067+
1068+
.layout-6x4-scale-vertical {
1069+
.selector-url(-1100px,0px);
1070+
1071+
.tab-layer-1 {
1072+
width: 100%;
1073+
height: 60%;
1074+
1075+
.fav-icon {
1076+
top: 21px;
1077+
left: 35px;
1078+
}
1079+
}
1080+
1081+
.tab-layer-2 {
1082+
width: 100%;
1083+
height: 40%;
1084+
1085+
.fav-icon {
1086+
top: 15px;
1087+
left: 42px;
1088+
width: 18px !important;
1089+
height: 18px !important;
1090+
background-size: 18px 18px !important;
1091+
}
1092+
}
1093+
}
1094+
1095+
.layout-7x3-scale-vertical {
1096+
.selector-url(-1200px,0px);
1097+
1098+
.tab-layer-1 {
1099+
width: 100%;
1100+
height: 67%;
1101+
1102+
.fav-icon {
1103+
top: 24px;
1104+
left: 35px;
1105+
}
1106+
}
1107+
1108+
.tab-layer-2 {
1109+
width: 100%;
1110+
height: 33%;
1111+
1112+
.fav-icon {
1113+
top: 12px;
1114+
left: 42px;
1115+
width: 18px !important;
1116+
height: 18px !important;
1117+
background-size: 18px 18px !important;
1118+
}
1119+
}
1120+
}
1121+
1122+
1123+
8911124
//sortable styles
8921125
.sortable-placeholder {
8931126
width: 113px;
@@ -901,24 +1134,6 @@ body {
9011134
float: right;
9021135
}
9031136

904-
#update-modal.partial-update {
905-
.update-entry {
906-
display: none;
907-
&.latest {
908-
display: block;
909-
margin-bottom: 50px;
910-
}
911-
}
912-
913-
.update-list-footer {
914-
display: none;
915-
}
916-
917-
.modal-body {
918-
height: 350px;
919-
}
920-
}
921-
9221137
#warning-modal {
9231138
z-index: 10;
9241139
.header-title {

‎images/icons/2ba46641a3448bef48bdce18d76d2b6f.png

5.06 KB
Loading

‎images/sprites/deprecated/layout_scale_6x4.png

1.02 KB
Loading

‎images/sprites/deprecated/layout_scale_6x4_hover.png

1 KB
Loading

‎images/sprites/deprecated/layout_scale_6x4_rev.png

1.04 KB
Loading

‎images/sprites/deprecated/layout_scale_6x4_rev_hover.png

1.03 KB
Loading

‎images/sprites/deprecated/layout_scale_6x4_vert.png

1.04 KB
Loading

‎images/sprites/deprecated/layout_scale_6x4_vert_hover.png

1.03 KB
Loading

‎images/sprites/deprecated/layout_scale_7x3.png

983 Bytes
Loading

‎images/sprites/deprecated/layout_scale_7x3_hover.png

972 Bytes
Loading

‎images/sprites/deprecated/layout_scale_7x3_rev.png

1.03 KB
Loading

‎images/sprites/deprecated/layout_scale_7x3_rev_hover.png

1.02 KB
Loading

‎images/sprites/deprecated/layout_scale_7x3_vert.png

1.06 KB
Loading

‎images/sprites/deprecated/layout_scale_7x3_vert_hover.png

1.04 KB
Loading

‎images/sprites/layouts.png

19.8 KB
Loading

‎index.html

Lines changed: 29 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
</div>
4343
</div>
4444
<div id="display-setting-layer">
45-
<div class="signature"><a title="Developed by peterdotjs - http://peterdotjs.com" target="_blank" href="http://peterdotjs.com">peterdotjs</a><a title="If you like Tab Resize you can help me by rating it &#9733; 5 stars and leaving a nice little review" class="rate-it" target="_blank" href="https://chrome.google.com/webstore/detail/tab-resize-split-screen-l/bkpenclhmiealbebdopglffmfdiilejc/reviews">&#9733; rate it</a></div>
45+
<div class="signature"><a title="Developed by peterdotjs - http://peterdotjs.com" target="_blank" href="http://peterdotjs.com">peterdotjs</a><a title="If you like Tab Resize you can help me by rating it &#9733; 5 stars and leaving a nice little review" class="rate-it" target="_blank" href="https://chrome.google.com/webstore/detail/tab-resize-split-screen-l/bkpenclhmiealbebdopglffmfdiilejc/reviews">&#9733; rate it</a><a class="keyboard-shortcuts" target="_blank" href="javascript:;" title="keyboard shortcuts">hotkeys</a></div>
4646
<div class="switch-toggle switch-candy">
4747
<input id="left" name="view" type="radio" checked>
4848
<label for="left" title="Left align tabs during resize">Left Align</label>
@@ -55,6 +55,13 @@
5555
</div>
5656
<div class="custom-view modal-box hidden">
5757
<div class="modal-body">
58+
<div class="switch-toggle switch-candy scaled-layout-orientation">
59+
<input id="horizontal-scaled" name="scaled-layout-orientation" type="radio" checked="">
60+
<label for="horizontal-scaled" title="horizontal scaled layout orientation">Horizontal</label>
61+
<input id="vertical-scaled" name="scaled-layout-orientation" type="radio">
62+
<label for="vertical-scaled" title="vertical scaled layout orientation">Vertical</label>
63+
<a></a>
64+
</div>
5865
<div class="table-container">
5966
<div class="table-label-top">columns</div>
6067
<div class="table-label-left">rows</div>
@@ -72,8 +79,19 @@
7279
<input type="text" class="custom-value columns" id="numCols" maxlength='1'>
7380
</div>
7481
</div>
82+
<ul class="scaled-input-container">
83+
<li class="scaled-input selected" data-type="6-4">6:4</li>
84+
<li class="scaled-input" data-type="7-3">7:3</li>
85+
</ul>
7586
</div>
7687
<div class = "input-container-footer modal-footer">
88+
<div class="switch-toggle switch-candy layout-option">
89+
<input id="fixed" name="layout-option" type="radio" checked="">
90+
<label for="fixed" title="Fixed layout-option">Fixed</label>
91+
<input id="scaled" name="layout-option" type="radio">
92+
<label for="scaled" title="Scaled layout-option">Scaled</label>
93+
<a></a>
94+
</div>
7795
<button class="button primary disabled" id="input-save">Save</button>
7896
<button class="button" id="input-cancel">Cancel</button>
7997
</div>
@@ -117,30 +135,27 @@
117135
<div class="header-title-wrap">
118136
<div class="icon-48"></div>
119137
<div class="header-title">
120-
Tab Resize 2.1.1 Updates
138+
Tab Resize 2.2.0 Updates
121139
</div>
122140
</div>
123141
<div class="update-list-header">What's New:</div>
124142
<ul class="update-list">
125143
<li class="update-entry">
126-
<strong>Multiple monitor support!</strong> - individually select each display in your desktop setup
144+
<strong>Scaled split screen layouts</strong> - you can now add split layouts for vertical and horizontal 7:3 and 6:4 ratio split screen in the custom view option by clicking the "+"icon in the extension popup.
127145
</li>
128146
<li class="update-entry">
129-
<strong>Left and right option</strong> - align tabs to the left or right
130-
</li>
131-
<li class="update-entry">
132-
<strong>Empty tab option</strong> - create empty tabs when selecting layouts
133-
</li>
134-
<li class="update-entry latest">
135-
<strong>Drag and drop for sorting layouts</strong> - Click and hold on any layout and drag to rearange order to your liking
136-
</li>
137-
<li class="update-entry latest">
138-
<strong>Highlighted tabs now can be resized</strong> - when 2 or more tabs are highlighted, only these tabs will be considered for resize. Credit goes to F.C. for the idea. <a target="_blank" href="http://www.cnet.com/how-to/how-to-manipulate-multiple-tabs-in-chrome-or-firefox/" title="In Chrome, you can select multiple tabs by clicking on tabs while holding down the Ctrl (Command for Mac) key or select a range of tabs by holding down the Shift key and clicking. http://www.cnet.com/how-to/how-to-manipulate-multiple-tabs-in-chrome-or-firefox/">Hover for more info.</a>
147+
<strong>Keyboard Shortcut/Hotkeys enabled </strong> - You can now use tab resize with just keyboard shortcuts rather than opening up the extension from the icon. Add your own custom shotcut keys for various layout types by clicking here: <a class="keyboard-shortcuts" href="javascript:;" target="_blank">Keyboard shortcuts/hotkeys</a>
139148
</li>
140149
</ul>
150+
151+
<div class="additional-message bold">
152+
-- Past change log <a href="/options.html" target="_blank">details</a> --
153+
</div>
154+
141155
<div class="update-list-footer bold">
142-
You can checkout the <a target="_blank" href="https://www.youtube.com/watch?v=GFHl98nAV04" title="https://www.youtube.com/watch?v=GFHl98nAV04">video demo</a> for a more detailed description.
156+
You can checkout the <a target="_blank" href="https://www.youtube.com/watch?v=GFHl98nAV04" title="https://www.youtube.com/watch?v=GFHl98nAV04">video demo</a> for a more detailed description of how to use the extension.
143157
</div>
158+
144159
<div class="additional-message bold">If you like the extension and find it useful please show your support by rating it in the <a target="_blank" href="https://chrome.google.com/webstore/detail/tab-resize-split-screen-l/bkpenclhmiealbebdopglffmfdiilejc/reviews" title="https://chrome.google.com/webstore/detail/tab-resize-split-screen-l/bkpenclhmiealbebdopglffmfdiilejc/reviews">web store</a>. Thanks! -Peter</div>
145160
</div>
146161
<div class="modal-footer">

0 commit comments

Comments
 (0)