Koha/koha-tmpl/intranet-tmpl/prog/css/cateditor.css
Agustin Moyano 9e91662ac7
Bug 17178: Add virtual keyboard to advanced cataloguing editor
This patch adds Mottie keyboard (https://github.com/Mottie/Keyboard) to advanced editor.

To test:
1) Apply patches
2) perl install/data/mysql/updatedatabase.pl
3) Enable EnableAdvancedCatalogingEditor system preference
4) Go to cataloguing and to Advanced editor
5) Click on Keyboard shortcuts
SUCCESS => the keyboard shortcut "Ctrl-K" should be displayed, with "Toggle keyboard" as description
6) press Ctrl-K
SUCCESS => a virtual keyboard should be displayed, and a new toolbar button labeled "Keyboard layout" should appear.
	=> when you press a letter on both the physical and virtual keyboard, they should be added to the editor.
7) Click on "Keyboard layout"
SUCCESS => a modal should appear, where you can filter and select keyboard layouts.
	=> when you select a layout, it should be reflected on the keyboard.
	=> when you close the modal without selecting a layout, it should keep using the previous layout.
8) Sign off

Sponsored-by: Round Rock Public Library

Signed-off-by: Liz Rea <wizzyrea@gmail.com>
Signed-off-by: Josef Moravec <josef.moravec@gmail.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
2019-06-28 15:54:33 +01:00

476 lines
No EOL
7.4 KiB
CSS

/*> Infrastructure */
body {
padding: 0;
}
#loading {
background-color: #FFF;
cursor: wait;
height: 100%;
left: 0;
opacity: .7;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
#loading div {
background : transparent url(../img/loading.gif) top left no-repeat;
font-size : 175%;
font-weight: bold;
height: 2em;
left: 50%;
margin: -1em 0 0 -2.5em;
padding-left : 50px;
position: absolute;
top: 50%;
width: 15em;
}
#alerts-container {
font-size: 12px;
}
#alerts-container h3 {
font-size: inherit;
}
#alerts-container > ul {
padding: 0;
}
#alerts-container > ul > li {
border-bottom: 1px solid #DDD;
display: block;
padding: 4px 0;
}
#alerts-container > ul > li:first-child {
padding-top: 0;
}
#alerts-container > ul > li:last-child {
border-bottom: none;
padding-bottom: 0;
}
.humanMsg.humanSuccess {
left: 75%;
width: 20%;
top: 160px;
}
#shortcuts-container {
font-size: 12px;
}
/*> MARC editor */
#editor .CodeMirror {
line-height: 1.2;
}
.cm-tagnumber {
color: #080;
font-weight: bold;
}
.cm-bad-tagnumber {
color: #A20;
font-weight: bold;
}
.cm-indicator {
color: #884;
}
.cm-subfieldcode {
background-color: #F4F4F4;
color: #187848;
border-radius: 3px;
border-right: 2px solid white;
font-weight: bold;
padding-left: 3px;
padding-right: 3px;
margin-right: -2px;
}
.cm-bad-subfieldcode {
background-color: #FFD9D9;
color: #482828;
border-radius: 3px 8px 8px 3px;
font-weight: bold;
}
.cm-end-space {
background-color: #DDDDBB;
}
#editor .modified-line-gutter {
width: 10px;
}
#editor .modified-line {
background: #F8F8F8;
border-left: 5px solid black;
margin-left: -10px;
padding-left: 5px;
}
#editor .CodeMirror-gutters {
background: transparent;
border-right: none;
}
/*> MARC editor widgets */
#editor .subfield-widget {
color: #538200;
border: solid 2px #538200;
border-radius: 6px;
font-family: inherit;
line-height: 2.75;
margin: 3px 0;
padding: 2px;
}
#editor .subfield-widget button {
font-family: inherit;
font-size: inherit;
height: 1.5em;
line-height: 1em;
margin-left: 5px;
vertical-align: middle;
}
#editor .subfield-widget select, #editor .subfield-widget input {
height: 1.5em;
vertical-align: middle;
}
#editor .subfield-widget select:focus {
outline: 2px #83A230 solid;
}
#editor .fixed-widget input {
width: 4em;
padding: 0;
border-radius: 2px;
border-width: 1px;
}
#editor .fixed-widget select {
width: 3em;
}
#editor .fixed-widget .material-select {
width: 4.5em;
margin-right: .5em;
}
#editor .fixed-collapsed {
display: inline-block;
margin: 0 .25em;
text-align: center;
text-decoration: underline;
}
#editor .hidden-widget {
color: #999999;
border: solid 2px #AAAAAA;
line-height: 2;
padding: 2px;
}
.structure-error {
background: #FFEEEE;
font-size: 0.9em;
line-height: 1.5;
margin: .5em;
padding: 0 .5em;
}
.structure-error i {
vertical-align: text-bottom;
}
#statusbar {
background-color: #F4F8F9;
border: solid 2px #b9d8d9;
border-radius: 6px;
overflow: auto;
padding: 4px;
}
#statusbar #status-tag-info, #statusbar #status-subfield-info {
float: left;
overflow: hidden;
padding-right: 2%;
width: 48%;
}
#record-info .label {
float: none;
}
#record-info .label + span {
display: block;
padding-left: 1em;
}
/*> Search */
#advanced-search-ui .modal-lg, #search-results-ui .modal-lg, #macro-ui .modal-lg {
width: 90%;
}
.modal-body {
max-height: none;
}
.modal-lg .modal-body {
overflow-y: auto;
}
#quicksearch-overlay {
background: rgba(255, 255, 255, .9);
border: 2px solid #CC8877;
border-radius: 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #664444;
position: relative;
vertical-align: middle;
}
#quicksearch-overlay h3 {
font-size: 1.5em%;
margin: 0;
text-align: center;
padding: 50px 5px;
}
#quicksearch-overlay p {
bottom: 0;
font-size: .8em;
overflow: hidden;
padding: 8px 15px;
position: absolute;
text-align: center;
}
#quicksearch input, #quicksearch a {
font-size: 1.2em;
padding: 3px 0;
width: 96%; /* I have no idea why this is necessary */
}
#show-advanced-search {
display: block;
margin-top: .3em;
}
#advanced-search-fields {
-moz-column-width: 26em;
-webkit-column-width: 26em;
column-width: 26em;
margin: 0;
padding: 0;
}
#advanced-search-fields li {
display: block;
list-style-type: none;
}
#advanced-search-fields label {
display: inline-block;
font-weight: bold;
padding: 1em 1em 1em 0;
width: 10em;
text-align: right;
}
#advanced-search-fields input {
display: inline-block;
margin: 0px auto;
width: 14em;
}
/*> Search results */
#search-serversinfo li {
list-style-type: none;
}
#search-serversinfo .search-toggle-server {
margin-right: 5px;
}
#searchresults table {
width: 100%;
}
.sourcecol {
width: 50px;
}
.results-info {
height: 100px;
overflow: auto;
}
.toolscol {
padding: 0;
width: 100px;
}
.toolscol ul {
margin: 0;
padding: 0;
}
#searchresults .toolscol li {
list-style-type: none;
list-style-image: none;
}
.toolscol a {
border-bottom: 1px solid #BCBCBC;
display: block;
padding: 0 1em;
line-height: 24px;
}
.marccol {
font-family: monospace;
height: auto;
white-space: pre-wrap;
}
#searchresults {
position: relative;
}
#search-overlay {
background: white;
bottom: 0;
font-size: 2em;
left: 0;
opacity: .7;
padding: 2em;
position: absolute;
right: 0;
text-align: center;
top: 0;
z-index: 9001;
}
/*> Macros */
#macro-save-message {
color: #666;
font-size: 13px;
float: right;
line-height: 26px;
}
#macro-list > li {
border: 2px solid #F0F0F0;
border-radius: 6px;
display: block;
font-size: 115%;
}
#macro-list > li + li {
margin-top: -2px;
}
#macro-list .active {
background: #EDF4F6;
border-color: none;
}
#macro-list a {
display: block;
padding: 6px;
}
#macro-list a:focus {
outline: none;
}
.macro-info {
background-color: #F4F4F4;
display: none;
margin: 0;
padding: 10px;
text-align: right;
}
.macro-info li {
color: #666;
font-size: 75%;
list-style-type: none;
}
.macro-info .label {
clear: left;
font-weight: bold;
float: left;
}
#macro-list .active .macro-info {
display: block;
}
.btn-toolbar label, .btn-toolbar select {
font-size: 13px;
vertical-align: middle;
}
.btn-toolbar label {
margin-left: 1em;
}
.btn-toolbar select {
padding: 2px;
}
#macro-editor {
display: flex;
flex-direction: column;
height: 100%;
}
#macro-editor .CodeMirror {
flex: 1;
font-size: 13px;
}
/* Hotpatch from latest CodeMirror: Fix gutter positioning */
.CodeMirror-gutter-wrapper {
position: absolute;
}
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) {
#statusbar {
border-bottom-style: none;
border-radius: 6px 6px 0 0;
margin-bottom: -32px;
}
}
#keyboard-layout .layouts {
column-count: 2;
}
#keyboard-layout .layouts > div {
cursor: pointer;
}
.ui-keyboard-accept {
display: none;
}