Replace the language selector by our custom dropdown menu

This commit is contained in:
yflory
2017-01-11 10:46:22 +01:00
parent 26dd4ea11f
commit 569ea21705
19 changed files with 262 additions and 123 deletions

View File

@@ -4,6 +4,7 @@
@import "./alertify.less";
@import "./bar.less";
@import "./loading.less";
@import "./dropdown.less";
html.cp, .cp body {
font-size: .875em;

View File

@@ -0,0 +1,62 @@
/* The container <div> - needed to position the dropdown content */
.dropdown-bar {
position: relative;
display: inline-block;
.dropbtn {
}
&:hover {
.dropbtn {
}
}
button {
.fa{
margin-left: 5px;
}
}
.dropdown-bar-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
z-index: 1000;
&.left {
right: 0;
}
&:hover {
display: block;
}
a {
color: black;
padding: 5px 16px;
text-decoration: none;
display: block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
float: none;
text-align: left;
&:hover {
background-color: #f1f1f1;
}
}
hr {
margin: 5px 0px;
height: 1px;
background: #bbb;
}
}
}

View File

@@ -1,6 +1,8 @@
@import "./variables.less";
@import "./mixins.less";
@import "./dropdown.less";
.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;

View File

@@ -4,6 +4,7 @@
<title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<link rel="stylesheet" type="text/css" href="/customize/main.css" />
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
<link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>
<script data-main="/customize/main" src="/bower_components/requirejs/require.js"></script>
<script src="/bower_components/requirejs/require.js"></script>
@@ -16,7 +17,13 @@
<body>
{{fork}}
<select id="language-selector" style="display: none;"></select>
<span id="language-selector" class="dropdown-bar">
<button>
<span class="buttonTitle" data-localozation="language"></span>
<span class="fa fa-caret-down"></span>
</button>
<div class="left cryptpad-dropdown dropdown-bar-content"></div>
</span>
<div id="main">
{{logo}}