THIS IS A TEST INSTANCE ONLY! REPOSITORIES CAN BE DELETED AT ANY TIME!

Browse Source

two-column-mode: Enhance UI

tags/v1.11.0
Suwon Chae 1 year ago
parent
commit
d0c14349f9
3 changed files with 86 additions and 17 deletions
  1. +45
    -5
      app/assets/stylesheets/less/_page.less
  2. +3
    -1
      app/views/common/twoColumnModeCheckboxArea.scala.html
  3. +38
    -11
      public/javascripts/service/yona.twoColumnMode.js

+ 45
- 5
app/assets/stylesheets/less/_page.less View File

@@ -6713,9 +6713,9 @@ div.diff-body[data-outdated="true"] tr:hover .icon-comment {
}

#option_form > .board-labels {
width: 400px;
min-width: 120px;
display: inline-block;

dt {
display: none;
}
@@ -6724,12 +6724,14 @@ div.diff-body[data-outdated="true"] tr:hover .icon-comment {
.post-list{
.search-wrap {
& form {
width: 90%;
.search-bar {
height: 22px;
width: 400px;
display: inline-block;
margin-right: 10px;

.textbox {
width: inherit;
}
}
.select2-container {
height: 32px;
@@ -7087,8 +7089,9 @@ div.diff-body[data-outdated="true"] tr:hover .icon-comment {

.two-column-icon {
display: inline-block;
line-height: 30px;
line-height: 37px;
margin-left: 10px;

i {
font-size: 16px;
margin-right: 5px;
@@ -7096,10 +7099,47 @@ div.diff-body[data-outdated="true"] tr:hover .icon-comment {
}

label {
padding-top: 7px;
padding-top: 4px;
padding-left: 0;
}

#two-column-mode {
float: none;
margin: 4px 4px 0 2px;
vertical-align: top;
}

.two-column-icon-border {
color: #03a9f4;
border: 1px solid #03afff;
border-radius: 3px;
padding: 3px 3px 0 3px;

&:hover {
background-color: #03afff;
color: #fff0ff;

.two-column-mode-text {
color: #fff0ff;
}
}
}
}

.two-column-icon-selected {
background-color: #aee5ff;

.two-column-mode-text {
color: #0293d6;
}
}

.two-column-mode-text {
padding: 0 4px 0 0;
line-height: 20px;
vertical-align: text-bottom;
}

.absoluteAndLeftMargin {
position: absolute;
margin-left: 260px;


+ 3
- 1
app/views/common/twoColumnModeCheckboxArea.scala.html View File

@@ -8,6 +8,8 @@

<div class="two-column-icon mr10 hide-in-mobile" id="two-column-mode-checkbox" title='@Messages("common.two.column.mode")' data-content='@Messages("common.two.column.mode.desc")'>
<label class="checkbox">
<input id="two-column-mode" type="checkbox"> <i class="yobicon-explorerwindow"></i>
<div class="two-column-icon-border">
<input id="two-column-mode" type="checkbox"><span class="two-column-mode-text">Column View</span>
</div>
</label>
</div>

+ 38
- 11
public/javascripts/service/yona.twoColumnMode.js View File

@@ -5,12 +5,23 @@
* https://yona.io
**/
var lastClicked = "";
var mainWidth = "";
var isLeftMenuHide = false;

function _initTwoColumnMode(){
var $twoColumnMode = $("#two-column-mode");
var useTwoColumnMode = localStorage.getItem('useTwoColumnMode');
var $title = $('.title');

var $projectPageWrap = $('.project-page-wrap');
if (mainWidth === "") {
mainWidth = $projectPageWrap.css("width");
}

if( isLeftMenuHide ) {
$(".left-menu").hide(0);
}

$('#two-column-mode-checkbox').popover({trigger: "hover", placement: "top", delay: { show: 100, hide: 100 }});

// when to check box click
@@ -21,10 +32,12 @@ function _initTwoColumnMode(){
if( useTwoColumnMode === 'true'){
attachPageSlideEvent($twoColumnMode, $title);
bindFrameLoading();
$(".two-column-icon-border").addClass("two-column-icon-selected");
} else {
$twoColumnMode.prop('checked', false);
$('.post-item').css("cursor", "");
unbindEvents();
$(".two-column-icon-border").removeClass("two-column-icon-selected");
}

$twoColumnMode.on('click', function () {
@@ -32,9 +45,11 @@ function _initTwoColumnMode(){
localStorage.setItem('useTwoColumnMode', true);
attachPageSlideEvent($twoColumnMode, $title);
bindFrameLoading();
$(".two-column-icon-border").addClass("two-column-icon-selected");
} else {
localStorage.setItem('useTwoColumnMode', false);
$('.post-item').removeClass('highlightBg').css("cursor", "");
$(".two-column-icon-border").removeClass("two-column-icon-selected");
unbindEvents();
}
});
@@ -44,7 +59,7 @@ function _initTwoColumnMode(){
function attachPageSlideEvent(twoColumnMode, title){
twoColumnMode.prop('checked', true);

title.pageslide({direction: "left", speed: 0});
title.pageslide({direction: "left", speed: 0, modal: true});
$('.post-item').css("cursor", "pointer");

title.on('click.changeUrlWhenClick', function(e){
@@ -61,6 +76,8 @@ function _initTwoColumnMode(){
$title.unbind('click.pageslide');
$title.unbind('click.iframeLoading');
$title.unbind('click.changeUrlWhenClick');
revokeMarginOfMainPage();
$.pageslide.close();
}

function bindFrameLoading() {
@@ -68,18 +85,12 @@ function _initTwoColumnMode(){
$('.post-item').removeClass('highlightBg');
$(this).closest('.post-item').addClass('highlightBg');

if(lastClicked === this){
if($('#pageslide').is(":visible")){
$(".left-menu").hide(0);
}
NProgress.done();
return;
} else {
lastClicked = this;
}

if($('#pageslide').is(":visible")){
$(".left-menu").hide(0);
isLeftMenuHide = true;
reduceMarginOfMainPage();
} else {
revokeMarginOfMainPage();
}
setTimeout(function () {
$('#pageslide > iframe').ready(function () {
@@ -88,4 +99,20 @@ function _initTwoColumnMode(){
}, 100);
});
}

function reduceMarginOfMainPage() {
var $projectPageWrap = $('.project-page-wrap');
$projectPageWrap.css("margin", "20px 10px 0").css("width", "55%");

$(".project-header-wrap").css("margin", "0 10px");
$(".project-menu-inner").css("margin", "0 10px")
}

function revokeMarginOfMainPage() {
var $projectPageWrap = $('.project-page-wrap');

$projectPageWrap.css("margin", "20px auto 0").css("width", mainWidth);
$(".project-header-wrap").css("margin", "0 auto");
$(".project-menu-inner").css("margin", "0 auto");
}
}

Loading…
Cancel
Save