kopia lustrzana https://github.com/OpenDroneMap/WebODM
More CSS tweaks
Piero Toffanin
rodzic
d3ca3a53be
commit
cf76258abf
|
|
@ -30,11 +30,17 @@ def complementary(hexcolor):
|
|||
return '#' + ''.join(comp)
|
||||
|
||||
|
||||
def scaleby(hexcolor, scalefactor):
|
||||
def scaleby(hexcolor, scalefactor, ignore_value = False):
|
||||
"""
|
||||
Scales a hex string by ``scalefactor``, but is color dependent, unless ignore_value is True
|
||||
scalefactor is now always between 0 and 1. A value of 0.8
|
||||
will cause bright colors to become darker and
|
||||
dark colors to become brigther by 20%
|
||||
"""
|
||||
|
||||
def calculate(hexcolor, scalefactor):
|
||||
"""
|
||||
Scales a hex string by ``scalefactor``. Returns scaled hex string.
|
||||
|
||||
To darken the color, use a float value between 0 and 1.
|
||||
To brighten the color, use a float value greater than 1.
|
||||
|
||||
|
|
@ -66,12 +72,6 @@ def scaleby(hexcolor, scalefactor):
|
|||
|
||||
return "#%02x%02x%02x" % (r, g, b)
|
||||
|
||||
"""
|
||||
Same as scaleby, but is color dependent.
|
||||
scalefactor is now always between 0 and 1. A value of 0.8
|
||||
will cause bright colors to become darker and
|
||||
dark colors to become brigther by 20%
|
||||
"""
|
||||
|
||||
hexcolor = hexcolor.strip('#')
|
||||
scalefactor = abs(float(scalefactor.value))
|
||||
|
|
@ -80,4 +80,4 @@ def scaleby(hexcolor, scalefactor):
|
|||
r, g, b = int(hexcolor[:2], 16), int(hexcolor[2:4], 16), int(hexcolor[4:], 16)
|
||||
value = max(r, g, b)
|
||||
|
||||
return calculate(hexcolor, scalefactor if value >= 127 else 2 - scalefactor)
|
||||
return calculate(hexcolor, scalefactor if ignore_value or value >= 127 else 2 - scalefactor)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
html, body, section.main, .content, #wrapper, #page-wrapper{
|
||||
height: auto;
|
||||
}
|
||||
#page-wrapper{
|
||||
margin-top: 1px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
#navbar-top{
|
||||
height: 50px;
|
||||
|
|
@ -37,7 +41,6 @@ html, body, section.main, .content, #wrapper, #page-wrapper{
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
ul#side-menu{
|
||||
a:hover, a:focus{
|
||||
color: white;
|
||||
|
|
@ -47,6 +50,10 @@ html, body, section.main, .content, #wrapper, #page-wrapper{
|
|||
|
||||
li{
|
||||
word-break: break-word;
|
||||
&:first-child{
|
||||
border-top-width: 1px;
|
||||
border-top-style: solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -85,8 +92,8 @@ ul#side-menu.nav{
|
|||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.navbar-default{
|
||||
background-color: white;
|
||||
.navbar-default.sidebar{
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.alert{
|
||||
|
|
@ -163,10 +170,6 @@ button i.glyphicon{
|
|||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.btn.btn-secondary{
|
||||
background-color: #dddddd;
|
||||
}
|
||||
|
||||
.dropdown-menu>li>a{
|
||||
padding-left: 10px;
|
||||
color: #222;
|
||||
|
|
@ -220,4 +223,9 @@ footer{
|
|||
|
||||
.list-group-item{
|
||||
background-color: inherit;
|
||||
border-top-width: 0px;
|
||||
|
||||
&:first-child{
|
||||
border-top-width: 1px;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,8 +3,8 @@ body,
|
|||
ul#side-menu.nav a,
|
||||
.console,
|
||||
.alert,
|
||||
.dropdown-menu > li > a,
|
||||
.form-control,
|
||||
.dropdown-menu > li > a,
|
||||
.theme-color-primary,
|
||||
{
|
||||
color: theme("primary");
|
||||
|
|
@ -53,6 +53,18 @@ body,
|
|||
color: theme("primary");
|
||||
}
|
||||
|
||||
.btn-secondary, .btn-secondary:active, .btn-secondary.active, .open>.dropdown-toggle.btn-secondary{
|
||||
background-color: theme("secondary");
|
||||
border-color: theme("secondary");
|
||||
color: theme("primary");
|
||||
|
||||
&:hover, &:active, &:focus{
|
||||
background-color: scalebyiv(theme("secondary"), 0.90);
|
||||
border-color: scalebyiv(theme("secondary"), 0.90);
|
||||
color: theme("primary");
|
||||
}
|
||||
}
|
||||
|
||||
/* Tertiary */
|
||||
a, a:hover, a:focus{
|
||||
color: theme("tertiary");
|
||||
|
|
@ -76,9 +88,9 @@ a, a:hover, a:focus{
|
|||
border-color: theme("button_primary");
|
||||
color: theme("secondary");
|
||||
|
||||
&:hover, &:active, &:focus{
|
||||
background-color: scaleby(theme("button_primary"), 0.90);
|
||||
border-color: scaleby(theme("button_primary"), 0.90);
|
||||
&:hover, &:active, &:focus, &[disabled]:hover, &[disabled]:focus, &[disabled]:active{
|
||||
background-color: scalebyiv(theme("button_primary"), 0.90);
|
||||
border-color: scalebyiv(theme("button_primary"), 0.90);
|
||||
color: theme("secondary");
|
||||
}
|
||||
}
|
||||
|
|
@ -89,9 +101,9 @@ a, a:hover, a:focus{
|
|||
border-color: theme("button_default");
|
||||
color: theme("secondary");
|
||||
|
||||
&:hover, &:active, &:focus{
|
||||
background-color: scaleby(theme("button_default"), 0.90);
|
||||
border-color: scaleby(theme("button_default"), 0.90);
|
||||
&:hover, &:active, &:focus, &[disabled]:hover, &[disabled]:focus, &[disabled]:active{
|
||||
background-color: scalebyiv(theme("button_default"), 0.90);
|
||||
border-color: scalebyiv(theme("button_default"), 0.90);
|
||||
color: theme("secondary");
|
||||
}
|
||||
}
|
||||
|
|
@ -109,9 +121,9 @@ a, a:hover, a:focus{
|
|||
border-color: theme("button_danger");
|
||||
color: theme("secondary");
|
||||
|
||||
&:hover, &:active, &:focus{
|
||||
background-color: scaleby(theme("button_danger"), 0.90);
|
||||
border-color: scaleby(theme("button_danger"), 0.90);
|
||||
&:hover, &:active, &:focus, &[disabled]:hover, &[disabled]:focus, &[disabled]:active {
|
||||
background-color: scalebyiv(theme("button_danger"), 0.90);
|
||||
border-color: scalebyiv(theme("button_danger"), 0.90);
|
||||
color: theme("secondary");
|
||||
}
|
||||
}
|
||||
|
|
@ -154,11 +166,17 @@ footer,
|
|||
.theme-background-highlight{
|
||||
background-color: theme("highlight");
|
||||
}
|
||||
.dropdown-menu > li > a{
|
||||
&:hover, &:focus{
|
||||
background-color: theme("highlight");
|
||||
color: theme("primary");
|
||||
}
|
||||
}
|
||||
pre.prettyprint,
|
||||
.form-control{
|
||||
border-color: theme('highlight');
|
||||
&:focus{
|
||||
border-color: scaleby(theme('highlight'), 0.7);
|
||||
border-color: scalebyiv(theme('highlight'), 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -179,18 +197,37 @@ pre.prettyprint,
|
|||
|
||||
|
||||
/* ModelView.jsx specific */
|
||||
.model-view #potree_sidebar_container .dropdown-menu a{
|
||||
color: theme("primary");
|
||||
.model-view #potree_sidebar_container {
|
||||
.dropdown-menu > li > a{
|
||||
color: theme("primary");
|
||||
}
|
||||
}
|
||||
|
||||
/* MapView.jsx specific */
|
||||
.leaflet-bar a, .leaflet-control > a{
|
||||
background-color: theme("button_primary") !important;
|
||||
border-color: theme("button_primary") !important;
|
||||
color: theme("secondary") !important;
|
||||
background-color: theme("secondary") !important;
|
||||
border-color: theme("secondary") !important;
|
||||
color: theme("primary") !important;
|
||||
|
||||
&:hover{
|
||||
background-color: scaleby(theme("button_primary"), 0.90) !important;
|
||||
border-color: scaleby(theme("button_primary"), 0.90) !important;
|
||||
background-color: scalebyiv(theme("secondary"), 0.90) !important;
|
||||
border-color: scalebyiv(theme("secondary"), 0.90) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-popup-content-wrapper{
|
||||
background-color: theme("secondary") !important;
|
||||
color: theme("primary") !important;
|
||||
a{
|
||||
color: theme("tertiary") !important;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-container{
|
||||
a.leaflet-popup-close-button{
|
||||
color: theme("primary") !important;
|
||||
&:hover{
|
||||
color: complementary(theme("secondary")) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -206,7 +206,10 @@ class ModelView extends React.Component {
|
|||
checked={this.state.showTexturedModel}
|
||||
/> Textured Model</label>
|
||||
</div>
|
||||
<AssetDownloadButtons task={this.props.task} direction="down" />
|
||||
<AssetDownloadButtons
|
||||
task={this.props.task}
|
||||
direction="down"
|
||||
buttonClass="btn-secondary" />
|
||||
{showSwitchModeButton ?
|
||||
<SwitchModeButton
|
||||
task={this.props.task}
|
||||
|
|
|
|||
|
|
@ -6,14 +6,16 @@ import PropTypes from 'prop-types';
|
|||
class AssetDownloadButtons extends React.Component {
|
||||
static defaultProps = {
|
||||
disabled: false,
|
||||
direction: "down", // or "up"
|
||||
direction: "down", // or "up",
|
||||
buttonClass: "btn-primary",
|
||||
task: null
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
disabled: PropTypes.bool,
|
||||
task: PropTypes.object.isRequired,
|
||||
direction: PropTypes.string
|
||||
direction: PropTypes.string,
|
||||
buttonClass: PropTypes.string
|
||||
};
|
||||
|
||||
constructor(props){
|
||||
|
|
@ -33,10 +35,10 @@ class AssetDownloadButtons extends React.Component {
|
|||
const assetDownloads = AssetDownloads.only(this.props.task.available_assets);
|
||||
|
||||
return (<div className={"asset-download-buttons btn-group " + (this.props.direction === "up" ? "dropup" : "")}>
|
||||
<button type="button" className="btn btn-sm btn-primary" disabled={this.props.disabled} data-toggle="dropdown">
|
||||
<button type="button" className={"btn btn-sm " + this.props.buttonClass} disabled={this.props.disabled} data-toggle="dropdown">
|
||||
<i className="glyphicon glyphicon-download"></i> Download Assets
|
||||
</button>
|
||||
<button type="button" className="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" disabled={this.props.disabled}>
|
||||
<button type="button" className={"btn btn-sm dropdown-toggle " + this.props.buttonClass} data-toggle="dropdown" disabled={this.props.disabled}>
|
||||
<span className="caret"></span>
|
||||
</button>
|
||||
<ul className="dropdown-menu">
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ class SwitchModeButton extends React.Component {
|
|||
<button
|
||||
onClick={this.handleClick}
|
||||
type="button"
|
||||
className={"switchModeButton btn btn-sm btn-primary " + (!this.props.task ? "hide" : "")}>
|
||||
className={"switchModeButton btn btn-sm btn-secondary " + (!this.props.task ? "hide" : "")}>
|
||||
<i className={"fa " + (this.icon())}></i> {this.text()}
|
||||
</button>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -301,10 +301,16 @@ def scaleby(color, n):
|
|||
return f(color, n)
|
||||
|
||||
|
||||
def scalebyiv(color, n):
|
||||
from app.contexts.settings import scaleby as f
|
||||
return f(color, n, True)
|
||||
|
||||
|
||||
LIBSASS_CUSTOM_FUNCTIONS = {
|
||||
'theme': theme,
|
||||
'complementary': complementary,
|
||||
'scaleby': scaleby
|
||||
'scaleby': scaleby,
|
||||
'scalebyiv': scalebyiv
|
||||
}
|
||||
|
||||
if TESTING:
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue