mirror of
https://github.com/ONLYOFFICE/onlyoffice.github.io.git
synced 2026-04-07 14:04:30 +08:00
styles for search results and buttons
This commit is contained in:
Artur
@ -84,7 +84,7 @@
|
||||
<div class="mrtop label">
|
||||
<span class="i18n">API Key</span>
|
||||
<input id="apiKeyField" class="form-control" type="text" placeholder="API Key" />
|
||||
<button id="saveConfigBtn" class="btn-text-default i18n"
|
||||
<button id="saveConfigBtn" class="i18n"
|
||||
style="margin-top: 16px; width: 100%;">Save</button>
|
||||
<div id="apiKeyMessage"></div>
|
||||
</div>
|
||||
@ -93,7 +93,7 @@
|
||||
<b class="i18n">Connect to Local Zotero</b>
|
||||
<span class="i18n">to access your local Zotero library.</span>
|
||||
<span class="i18n">No API key required.</span>
|
||||
<button id="connectToLocalZotero" class="btn-text-default i18n"
|
||||
<button id="connectToLocalZotero" class="i18n"
|
||||
style="margin-top: 16px; width: 100%;">Connect to Local Zotero</button>
|
||||
<div id="useDesktopMessage"></div>
|
||||
</p>
|
||||
@ -103,7 +103,7 @@
|
||||
<span class="i18n">to replace all active Zotero citations and Bibliography with plain text.</span>
|
||||
<span class="i18n"></span>After conversion, citations can no longer be updated.</span>
|
||||
</p>
|
||||
<button id="saveAsTextBtn" class="btn-text-default i18n" style="width: 100%;">Unlink citations</button>
|
||||
<button id="saveAsTextBtn" class="i18n" style="width: 100%;">Unlink citations</button>
|
||||
</div>
|
||||
<div id="mainState" class="flexCol flexSize hidden">
|
||||
<label for="searchField" class="i18n">Search the references you want to cite in this document.</label>
|
||||
@ -112,21 +112,21 @@
|
||||
<input id="searchField" autocomplete="off" class="form-control i18n" type="text"
|
||||
placeholder="Search references by author, title" />
|
||||
<button id="filterButton">
|
||||
<svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 9L7 11V5L12 0H0L5 5V9Z" fill="black" fill-opacity="0.8" />
|
||||
<svg width="12" height="11" viewBox="0 0 12 11" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 9L7 11V5L12 0H0L5 5V9Z" fill="currentcolor" fill-opacity="0.8" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div id="selectedWrapper">
|
||||
<div id="selectedWrapper" class="hidden">
|
||||
<div class="flexCol flexSize flexCenter">
|
||||
<div id="selectedHolder"></div>
|
||||
<div id="selectedInfo" class="hidden">
|
||||
<span id="selectedCount">0 selected</span>
|
||||
<span id="cancelBtn" class="i18n link">Cancel selection</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="selectedThumb" class="scrollThumb hidden"></div>
|
||||
</div>
|
||||
<div id="selectedInfo" class="hidden">
|
||||
<span id="selectedCount">0 selected</span>
|
||||
<span id="cancelBtn" class="i18n link">Cancel selection</span>
|
||||
</div>
|
||||
<div id="docsWrapper" class="flexSize">
|
||||
<div class="flexCol flexSize">
|
||||
<div id="docsHolder" class="flexCol"></div>
|
||||
@ -138,15 +138,17 @@
|
||||
</div>
|
||||
<div id="controlsHolder" class="flexCol">
|
||||
<div id="buttonsWrapper" class="flex" style="justify-content: space-between;">
|
||||
<div class="flex" style="align-items: center;">
|
||||
<button id="insertLinkBtn" class="button control i18n btn-text-default"
|
||||
style="flex: 1; margin-left: 8px; margin-right: 0;" disabled>Insert Citation</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="insertBibDiv" class="flex">
|
||||
<button id="insertBibBtn" class="button control i18n btn-text-default">Insert Bibliography</button>
|
||||
<button id="refreshBtn" class="button control btn-text-default i18n">Refresh</button>
|
||||
<button id="insertLinkBtn" class="i18n" disabled>Insert Citation</button>
|
||||
<button id="settingsBtn">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.07031 10C8.72717 10 10.0703 8.65685 10.0703 7C10.0703 5.34315 8.72717 4 7.07031 4C5.41346 4 4.07031 5.34315 4.07031 7C4.07031 8.65685 5.41346 10 7.07031 10ZM9.07031 7C9.07031 8.10457 8.17488 9 7.07031 9C5.96574 9 5.07031 8.10457 5.07031 7C5.07031 5.89543 5.96574 5 7.07031 5C8.17488 5 9.07031 5.89543 9.07031 7Z" fill="currentcolor" fill-opacity="0.8"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4834 11.7324L13.9299 9.30047C14.0421 9.10329 14.0196 8.94992 13.8626 8.84038L12.3488 7.69014C12.3712 7.53678 12.3825 7.30673 12.3825 7C12.3825 6.69327 12.3712 6.46322 12.3488 6.30986L13.8626 5.15962C14.0196 5.05008 14.0421 4.89671 13.9299 4.69953L12.4834 2.26761C12.3937 2.11424 12.2479 2.07042 12.0461 2.13615L10.2631 2.82629C9.88186 2.54147 9.47817 2.31142 9.05206 2.13615L8.78294 0.295775C8.73809 0.0985915 8.62595 0 8.44654 0H5.55346C5.37405 0 5.26191 0.0985915 5.21706 0.295775L4.94794 2.13615C4.61153 2.26761 4.20785 2.49765 3.73688 2.82629L1.95394 2.13615C1.7521 2.07042 1.60633 2.11424 1.51662 2.26761L0.0700841 4.69953C-0.0420505 4.89671 -0.0196235 5.05008 0.137365 5.15962L1.65118 6.30986C1.62875 6.46322 1.61754 6.69327 1.61754 7C1.61754 7.30673 1.62875 7.53678 1.65118 7.69014L0.137365 8.84038C-0.0196235 8.94992 -0.0420505 9.10329 0.0700841 9.30047L1.51662 11.7324C1.60633 11.8858 1.7521 11.9296 1.95394 11.8638L3.73688 11.1737C4.11814 11.4585 4.52183 11.6886 4.94794 11.8638L5.21706 13.7042C5.26191 13.9014 5.37405 14 5.55346 14H8.44654C8.62595 14 8.73809 13.9014 8.78294 13.7042L9.05206 11.8638C9.38847 11.7324 9.79215 11.5023 10.2631 11.1737L12.0461 11.8638C12.2479 11.9296 12.3937 11.8858 12.4834 11.7324ZM11.3593 7.54545L11.274 8.12935L12.7816 9.2749L11.9107 10.7391L10.1275 10.0489L9.69087 10.3536C9.25147 10.6602 8.92091 10.8415 8.6881 10.9324L8.14669 11.144L7.87529 13H6.12472L5.85501 11.1557L5.32835 10.939C4.98235 10.7967 4.65163 10.6088 4.33537 10.3726L3.89201 10.0414L2.08935 10.7391L1.2184 9.2749L2.72604 8.12935L2.64066 7.54545C2.6291 7.46641 2.61754 7.2955 2.61754 7C2.61754 6.7045 2.6291 6.53359 2.64066 6.45455L2.72604 5.87065L1.2184 4.7251L2.08935 3.26086L3.87247 3.95107L4.30913 3.64637C4.74853 3.33976 5.07909 3.15854 5.3119 3.06756L5.85331 2.856L6.12472 1H7.87529L8.14499 2.84433L8.67165 3.06097C9.01765 3.20329 9.34837 3.39116 9.66463 3.62742L10.108 3.95864L11.9107 3.26086L12.7816 4.7251L11.274 5.87065L11.3593 6.45455C11.3709 6.53359 11.3825 6.7045 11.3825 7C11.3825 7.2955 11.3709 7.46641 11.3593 7.54545Z" fill="currentcolor" fill-opacity="0.8"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<button id="insertBibBtn" class="i18n">Insert Bibliography</button>
|
||||
<button id="refreshBtn" class="control i18n">Refresh</button>
|
||||
|
||||
<div id="omitAuthorDiv">
|
||||
<label for="omitAuthor" class="i18n">Omit Author</label>
|
||||
<input id="omitAuthor" type="checkbox" class="form-control i18n" title="Omit Author">
|
||||
|
||||
@ -1,43 +1,55 @@
|
||||
html {
|
||||
--font: rgba(0, 0, 0, 0.8);
|
||||
--font: rgb(51, 51, 51);
|
||||
--font-hover: black;
|
||||
--icon-pad: rgba(0, 0, 0, 0.02);
|
||||
--icon-pad-hover: #cbcbcb;
|
||||
--icon-pad-focus: rgba(0, 0, 0, 0.1);
|
||||
--icon-pad-selected: #cbcbcb;
|
||||
--input-bg: white;
|
||||
--input-placeholder: rgba(0, 0, 0, 0.4);
|
||||
--input-disabled: #efefef;
|
||||
--input-placeholder: rgb(153, 153, 153);
|
||||
--input-border: #c0c0c0;
|
||||
--input-border-hover: #c0c0c0;
|
||||
--input-border-focus: #848484;
|
||||
--input-border-active: #c0c0c0;
|
||||
--input-border-error: #F62211;
|
||||
--input-border-error: #f62211;
|
||||
--input-border-warning: #e6a23c;
|
||||
--input-icon: #bdbdbd;
|
||||
--input-icon-hover: #848484;
|
||||
--button-primary: #444444;
|
||||
--button-primary-hover: #1c1c1c;
|
||||
--button-primary-disabled: #000000;
|
||||
--button-primary-disabled-font: #ffffff;
|
||||
--button-secondary-hover: #d8dadc;
|
||||
--button-secondary-pressed: #7d858c;
|
||||
--select-option: white;
|
||||
--select-option-hover: #e0e0e0;
|
||||
--select-option-selected: #cbcbcb;
|
||||
--scroll: #e0e0e0;
|
||||
--scroll-hover: #cbcbcb;
|
||||
--scroll-active: #adadad;
|
||||
|
||||
--font-dark: rgba(255, 255, 255, 0.8);
|
||||
--font-hover-dark: white;
|
||||
--icon-pad-dark: rgba(255, 255, 255, 0.02);
|
||||
--icon-pad-hover-dark: #555;
|
||||
--icon-pad-focus-dark: rgba(255, 255, 255, 0.1);
|
||||
--icon-pad-selected-dark: #606060;
|
||||
--input-bg-dark: #333333;
|
||||
--input-disabled-dark: #505050;
|
||||
--input-placeholder-dark: rgba(255, 255, 255, 0.4);
|
||||
--input-border-dark: #666666;
|
||||
--input-border-hover-dark: #666666;
|
||||
--input-border-focus-dark: rgb(204, 204, 204);
|
||||
--input-border-active-dark: #666666;
|
||||
--input-border-error-dark: #F62211;
|
||||
--input-border-error-dark: #f62211;
|
||||
--input-border-warning-dark: #e6a23c;
|
||||
--input-icon-dark: rgba(255, 255, 255, 0.8);
|
||||
--input-icon-hover-dark: white;
|
||||
--button-primary-dark: #dddddd;
|
||||
--button-primary-hover-dark: #fcfcfc;
|
||||
--button-primary-disabled-dark: #ffffff;
|
||||
--button-primary-disabled-font-dark: #000000;
|
||||
--button-secondary-hover-dark: #555555;
|
||||
--button-secondary-pressed-dark: #606060;
|
||||
--select-option-dark: #333333;
|
||||
--select-option-hover-dark: #555;
|
||||
--select-option-selected-dark: #606060;
|
||||
--scroll-dark: #616161;
|
||||
--scroll-hover-dark: #999999;
|
||||
--scroll-active-dark: #adadad;
|
||||
}
|
||||
/** Button ************ */
|
||||
.custom-button-container {
|
||||
@ -75,6 +87,11 @@ html {
|
||||
.custom-button-secondary-icon {
|
||||
width: 24px;
|
||||
}
|
||||
.custom-button-icon-only {
|
||||
width: 24px;
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.custom-button-small {
|
||||
height: 24px;
|
||||
@ -92,17 +109,6 @@ html {
|
||||
line-height: 20;
|
||||
}
|
||||
|
||||
.custom-button-secondary {
|
||||
background-color: #6c757d;
|
||||
border-color: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.custom-button-secondary:hover:not(.custom-button-disabled) {
|
||||
background-color: #545b62;
|
||||
border-color: #545b62;
|
||||
}
|
||||
|
||||
.custom-button-success {
|
||||
background-color: #28a745;
|
||||
border-color: #28a745;
|
||||
@ -161,7 +167,7 @@ html {
|
||||
.custom-button-disabled,
|
||||
.custom-button:disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@ -263,17 +269,23 @@ html {
|
||||
|
||||
body.theme-light .custom-button-container {
|
||||
.custom-button-primary {
|
||||
background-color: var(--font);
|
||||
border-color: var(--font);
|
||||
background-color: var(--button-primary);
|
||||
border-color: var(--button-primary);
|
||||
color: var(--input-bg);
|
||||
}
|
||||
.custom-button-primary:hover:not(.custom-button-disabled) {
|
||||
background-color: var(--font-hover);
|
||||
border-color: var(--font-hover);
|
||||
background-color: var(--button-primary-hover);
|
||||
border-color: var(--button-primary-hover);
|
||||
}
|
||||
.custom-button-primary:focus {
|
||||
box-shadow: 0 0 0 1px inset var(--font-hover);
|
||||
}
|
||||
.custom-button-primary:disabled,
|
||||
.custom-button-primary.custom-button-disabled {
|
||||
background-color: var(--button-primary-disabled);
|
||||
border-color: var(--button-primary-disabled);
|
||||
color: var(--button-primary-disabled-font);
|
||||
}
|
||||
|
||||
.custom-button-secondary-icon,
|
||||
.custom-button-secondary {
|
||||
@ -281,35 +293,52 @@ body.theme-light .custom-button-container {
|
||||
border-color: var(--input-border);
|
||||
color: var(--font);
|
||||
}
|
||||
.custom-button-icon-only:hover:not(.custom-button-disabled),
|
||||
.custom-button-secondary-icon:hover:not(.custom-button-disabled),
|
||||
.custom-button-secondary:hover:not(.custom-button-disabled) {
|
||||
background-color: var(--select-option-hover);
|
||||
background-color: var(--button-secondary-hover);
|
||||
border-color: var(--input-border);
|
||||
}
|
||||
.custom-button-icon-only:active:not(.custom-button-disabled),
|
||||
.custom-button-secondary-icon:active:not(.custom-button-disabled),
|
||||
.custom-button-secondary:active:not(.custom-button-disabled) {
|
||||
background-color: var(--select-option-selected);
|
||||
background-color: var(--button-secondary-pressed);
|
||||
border-color: var(--input-border);
|
||||
}
|
||||
.custom-button-icon-only:focus:not(:active):not(:hover),
|
||||
.custom-button-secondary-icon:focus:not(:active):not(:hover),
|
||||
.custom-button-secondary:focus:not(:active):not(:hover) {
|
||||
border-color: var(--input-border-focus);
|
||||
}
|
||||
.custom-button-secondary-icon:disabled,
|
||||
.custom-button-secondary-icon.custom-button-disabled,
|
||||
.custom-button-secondary:disabled,
|
||||
.custom-button-secondary.custom-button-disabled {
|
||||
background-color: var(--input-disabled);
|
||||
border-color: var(--input-disabled);
|
||||
color: var(--input-placeholder);
|
||||
}
|
||||
}
|
||||
|
||||
body.theme-dark .custom-button-container {
|
||||
.custom-button-primary {
|
||||
background-color: var(--font-dark);
|
||||
border-color: var(--font-dark);
|
||||
background-color: var(--button-primary-dark);
|
||||
border-color: var(--button-primary-dark);
|
||||
color: var(--input-bg-dark);
|
||||
}
|
||||
|
||||
.custom-button-primary:hover:not(.custom-button-disabled) {
|
||||
background-color: var(--font-hover-dark);
|
||||
border-color: var(--font-hover-dark);
|
||||
background-color: var(--button-primary-hover-dark);
|
||||
border-color: var(--button-primary-hover-dark);
|
||||
}
|
||||
|
||||
.custom-button-primary:focus {
|
||||
box-shadow: 0 0 0 1px inset var(--font-hover-dark);
|
||||
}
|
||||
.custom-button-primary:disabled,
|
||||
.custom-button-primary.custom-button-disabled {
|
||||
background-color: var(--button-primary-disabled-dark);
|
||||
border-color: var(--button-primary-disabled-dark);
|
||||
color: var(--button-primary-disabled-font-dark);
|
||||
}
|
||||
|
||||
.custom-button-secondary-icon,
|
||||
.custom-button-secondary {
|
||||
@ -319,16 +348,22 @@ body.theme-dark .custom-button-container {
|
||||
}
|
||||
.custom-button-secondary-icon:hover:not(.custom-button-disabled),
|
||||
.custom-button-secondary:hover:not(.custom-button-disabled) {
|
||||
background-color: var(--select-option-hover-dark);
|
||||
background-color: var(--button-secondary-hover-dark);
|
||||
}
|
||||
.custom-button-secondary-icon:active:not(.custom-button-disabled),
|
||||
.custom-button-secondary:active:not(.custom-button-disabled) {
|
||||
background-color: var(--select-option-selected-dark);
|
||||
background-color: var(--button-secondary-pressed-dark);
|
||||
}
|
||||
.custom-button-secondary-icon:focus:not(:active):not(:hover),
|
||||
.custom-button-secondary:focus:not(:active):not(:hover) {
|
||||
border-color: var(--input-border-focus-dark);
|
||||
}
|
||||
.custom-button-secondary-icon:disabled,
|
||||
.custom-button-secondary-icon.custom-button-disabled,
|
||||
.custom-button-secondary:disabled,
|
||||
.custom-button-secondary.custom-button-disabled {
|
||||
background-color: var(--input-disabled-dark);
|
||||
}
|
||||
}
|
||||
/** Input field ************ */
|
||||
.input-field-container {
|
||||
|
||||
@ -28,30 +28,10 @@ div::-moz-selection {
|
||||
background: #D8DADC; /* Gecko Browsers */
|
||||
}
|
||||
|
||||
textarea:focus, input:focus {
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.button {
|
||||
background: #fff;
|
||||
outline: none;
|
||||
font-size: 12px;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
margin: 15px 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px 18px;
|
||||
}
|
||||
|
||||
.button.wide {
|
||||
padding: 7px 13px;
|
||||
margin: 15px 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.blur {
|
||||
filter: blur(3px);
|
||||
}
|
||||
@ -126,17 +106,20 @@ input[type="text"] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow-y: hidden;
|
||||
margin-top: 11px;
|
||||
}
|
||||
|
||||
#docsHolder {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#selectedWrapper {
|
||||
#selectedWrapper:not(.hidden) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow-y: hidden;
|
||||
max-height: 60px;
|
||||
font-size: 10px;
|
||||
max-height: 33px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
#selectedHolder {
|
||||
@ -144,20 +127,18 @@ input[type="text"] {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
#selectedHolder > div:last-of-type {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
#selectedInfo:not(.hidden) {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#searchWrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
margin-top: 13px;
|
||||
}
|
||||
#searchWrapper .input-field-container-searchField {
|
||||
width: 207px;
|
||||
@ -173,22 +154,19 @@ input[type="text"] {
|
||||
}
|
||||
|
||||
#controlsHolder {
|
||||
border-top: 1px solid #cfcfcf;
|
||||
padding-top: 15px;
|
||||
padding-top: 4px;
|
||||
overflow-y: visible;
|
||||
}
|
||||
|
||||
#buttonsWrapper, #insertBibDiv {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#buttonsWrapper > .button {
|
||||
margin: 0px 0px 15px 8px;
|
||||
#controlsHolder button {
|
||||
margin-top: 8px;
|
||||
}
|
||||
#insertBibDiv > .button {
|
||||
margin: 0px 0px 15px 8px;
|
||||
#controlsHolder .custom-button-primary {
|
||||
width: 207px;
|
||||
}
|
||||
|
||||
#controlsHolder .custom-button-secondary {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#omitAuthorDiv {
|
||||
margin-bottom: 15px;
|
||||
margin-left: 8px;
|
||||
@ -231,10 +209,6 @@ input[type="text"] {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
#styleWrapper .label {
|
||||
/* margin-bottom: 15px; */
|
||||
}
|
||||
|
||||
#styleWrapper .label:first-of-type {
|
||||
flex: 5;
|
||||
margin-right: 4px;
|
||||
@ -256,11 +230,6 @@ input[type="text"] {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
#styleWrapper > button {
|
||||
flex: 1;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.notesStyle {
|
||||
margin: 0 0 8px 4px;
|
||||
}
|
||||
@ -364,21 +333,13 @@ input[type="text"] {
|
||||
}
|
||||
|
||||
.scrollThumb {
|
||||
width: 9px;
|
||||
background-color: rgb(241, 241, 241);
|
||||
border-radius: 2px;
|
||||
width: 8px;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAQAAAAz1Zf0AAAAIUlEQVR42mNgAILz/0GQAQo+/gdBBqLAqE5ydH5k+sgEANHgUH2JtDRHAAAAAElFTkSuQmCC);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 center;
|
||||
border: 1px solid #cfcfcf;
|
||||
border: 2px solid transparent;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.scrollThumb.scrolling {
|
||||
background-color: #adadad;
|
||||
border-color: #adadad;
|
||||
}
|
||||
|
||||
.errorMsg {
|
||||
color: #D9534F;
|
||||
}
|
||||
@ -390,7 +351,13 @@ input[type="text"] {
|
||||
|
||||
.doc {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: 1px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 6px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.docInfo {
|
||||
@ -399,9 +366,16 @@ input[type="text"] {
|
||||
|
||||
.doc > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 5px 0;
|
||||
padding-left: 6px;
|
||||
}
|
||||
.doc .docInfo {
|
||||
flex-direction: column;
|
||||
padding-top: 7px;
|
||||
}
|
||||
.doc > div label {
|
||||
width: 171px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.secondary-text {
|
||||
font-size: 11px;
|
||||
@ -434,7 +408,7 @@ input[type="text"] {
|
||||
box-sizing: border-box;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
margin-right: 8px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.checkbox > input {
|
||||
@ -458,26 +432,19 @@ input[type="text"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn-text-default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.selDoc {
|
||||
display: inline-block;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 6px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.selDoc > span {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
vertical-align: middle;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.selDoc > span:first-of-type {
|
||||
max-width: 52px;
|
||||
max-width: 203px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@ -485,8 +452,7 @@ input[type="text"] {
|
||||
|
||||
.selDoc > span:last-of-type {
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
margin-top: 2px;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
/* loader */
|
||||
@ -642,6 +608,39 @@ input[type="text"] {
|
||||
}
|
||||
/* end loader */
|
||||
|
||||
body.theme-light {
|
||||
.doc {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--input-border);
|
||||
}
|
||||
.scrollThumb {
|
||||
box-shadow: 0 0 8px 8px var(--scroll) inset;
|
||||
}
|
||||
.scrollThumb:hover {
|
||||
box-shadow: 0 0 8px 8px var(--scroll-hover) inset;
|
||||
}
|
||||
.scrollThumb.scrolling {
|
||||
box-shadow: 0 0 8px 8px var(--scroll-active) inset;
|
||||
}
|
||||
}
|
||||
|
||||
body.theme-dark {
|
||||
.doc {
|
||||
background-color: var(--input-bg-dark);
|
||||
border-color: var(--input-border-dark);
|
||||
}
|
||||
.scrollThumb {
|
||||
box-shadow: 0 0 8px 8px var(--scroll-dark) inset;
|
||||
}
|
||||
.scrollThumb:hover {
|
||||
box-shadow: 0 0 8px 8px var(--scroll-hover-dark) inset;
|
||||
}
|
||||
.scrollThumb.scrolling {
|
||||
box-shadow: 0 0 8px 8px var(--scroll-active-dark) inset;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -34,11 +34,6 @@
|
||||
/// <reference path="./shared/ui/button.js" />
|
||||
/// <reference path="./connection.js" />
|
||||
|
||||
/**
|
||||
* @typedef {Object} Scroller
|
||||
* @property {Function} onscroll
|
||||
*/
|
||||
|
||||
(function () {
|
||||
var counter = 0; // счетчик отправленных запросов (используется чтобы знать показывать "not found" или нет)
|
||||
var displayNoneClass = "hidden";
|
||||
@ -88,6 +83,14 @@
|
||||
var selectCitation;
|
||||
/** @type {Button} */
|
||||
var saveAsTextBtn;
|
||||
/** @type {Button} */
|
||||
var insertLinkBtn;
|
||||
/** @type {Button} */
|
||||
var settingsBtn;
|
||||
/** @type {Button} */
|
||||
var insertBibBtn;
|
||||
/** @type {Button} */
|
||||
var refreshBtn;
|
||||
/** @type {Object.<string, HTMLElement | HTMLInputElement>} */
|
||||
var elements = {};
|
||||
function initElements() {
|
||||
@ -116,10 +119,6 @@
|
||||
if (!mainState) {
|
||||
throw new Error("mainState not found");
|
||||
}
|
||||
const buttonsWrapper = document.getElementById("buttonsWrapper");
|
||||
if (!buttonsWrapper) {
|
||||
throw new Error("buttonsWrapper not found");
|
||||
}
|
||||
const locatorLabel = document.getElementById("locatorLabel");
|
||||
if (!locatorLabel) {
|
||||
throw new Error("locatorLabel not found");
|
||||
@ -166,18 +165,6 @@
|
||||
if (!endNotes) {
|
||||
throw new Error("endNotes not found");
|
||||
}
|
||||
const insertBibBtn = document.getElementById("insertBibBtn");
|
||||
if (!insertBibBtn) {
|
||||
throw new Error("insertBibBtn not found");
|
||||
}
|
||||
const insertLinkBtn = document.getElementById("insertLinkBtn");
|
||||
if (!insertLinkBtn) {
|
||||
throw new Error("insertLinkBtn not found");
|
||||
}
|
||||
const refreshBtn = document.getElementById("refreshBtn");
|
||||
if (!refreshBtn) {
|
||||
throw new Error("refreshBtn not found");
|
||||
}
|
||||
const checkOmitAuthor = document.getElementById("omitAuthor");
|
||||
if (!checkOmitAuthor) {
|
||||
throw new Error("checkOmitAuthor not found");
|
||||
@ -193,8 +180,22 @@
|
||||
loadMore,
|
||||
shouldLoadMore
|
||||
);
|
||||
saveAsTextBtn = new Button("saveAsTextBtn");
|
||||
|
||||
saveAsTextBtn = new Button("saveAsTextBtn", {
|
||||
variant: "secondary",
|
||||
});
|
||||
insertLinkBtn = new Button("insertLinkBtn", {
|
||||
disabled: true,
|
||||
});
|
||||
settingsBtn = new Button("settingsBtn", {
|
||||
variant: "icon-only",
|
||||
size: "small",
|
||||
});
|
||||
insertBibBtn = new Button("insertBibBtn", {
|
||||
variant: "secondary",
|
||||
});
|
||||
refreshBtn = new Button("refreshBtn", {
|
||||
variant: "secondary",
|
||||
});
|
||||
elements = {
|
||||
loader: loader,
|
||||
libLoader: libLoader,
|
||||
@ -205,8 +206,6 @@
|
||||
|
||||
mainState: mainState,
|
||||
|
||||
buttonsWrapper: buttonsWrapper,
|
||||
|
||||
locatorLabel: locatorLabel,
|
||||
locatorLabelsList: locatorLabelsList,
|
||||
|
||||
@ -220,10 +219,6 @@
|
||||
footNotes: footNotes,
|
||||
endNotes: endNotes,
|
||||
|
||||
insertBibBtn: insertBibBtn,
|
||||
insertLinkBtn: insertLinkBtn,
|
||||
refreshBtn: refreshBtn,
|
||||
|
||||
checkOmitAuthor: checkOmitAuthor,
|
||||
cslFileInput: cslFileInput,
|
||||
};
|
||||
@ -567,7 +562,10 @@
|
||||
searchFor(text, selectedGroups);
|
||||
});
|
||||
|
||||
elements.refreshBtn.onclick = function () {
|
||||
refreshBtn.subscribe(function (event) {
|
||||
if (event.type !== "button:click") {
|
||||
return;
|
||||
}
|
||||
if (!cslStylesManager.getLastUsedStyleId()) {
|
||||
showError(translate("Style is not selected"));
|
||||
return;
|
||||
@ -590,9 +588,12 @@
|
||||
.finally(function () {
|
||||
showLoader(false);
|
||||
});
|
||||
};
|
||||
});
|
||||
|
||||
elements.insertBibBtn.onclick = function () {
|
||||
insertBibBtn.subscribe(function (event) {
|
||||
if (event.type !== "button:click") {
|
||||
return;
|
||||
}
|
||||
if (!cslStylesManager.getLastUsedStyleId()) {
|
||||
showError(translate("Style is not selected"));
|
||||
return;
|
||||
@ -617,9 +618,12 @@
|
||||
.finally(function () {
|
||||
showLoader(false);
|
||||
});
|
||||
};
|
||||
});
|
||||
|
||||
elements.insertLinkBtn.onclick = function () {
|
||||
insertLinkBtn.subscribe(function (event) {
|
||||
if (event.type !== "button:click") {
|
||||
return;
|
||||
}
|
||||
if (!cslStylesManager.getLastUsedStyleId()) {
|
||||
showError(translate("Style is not selected"));
|
||||
return;
|
||||
@ -662,7 +666,7 @@
|
||||
.finally(function () {
|
||||
showLoader(false);
|
||||
});
|
||||
};
|
||||
});
|
||||
|
||||
saveAsTextBtn.subscribe(function (event) {
|
||||
if (event.type !== "button:click") {
|
||||
@ -870,50 +874,6 @@
|
||||
body.classList.add("theme-" + themeType);
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} holder
|
||||
* @param {HTMLElement} thumb
|
||||
* @param {function(HTMLElement): void} [onscroll]
|
||||
* @returns {Scroller}
|
||||
*/
|
||||
function initScrollBox(holder, thumb, onscroll) {
|
||||
var scroller = {};
|
||||
scroller.onscroll = checkScroll(holder, thumb, onscroll);
|
||||
|
||||
holder.onwheel = function (e) {
|
||||
holder.scrollTop +=
|
||||
e.deltaY > 10 || e.deltaY < -10 ? e.deltaY : e.deltaY * 20;
|
||||
scroller.onscroll();
|
||||
};
|
||||
|
||||
thumb.onmousedown = function (e) {
|
||||
switchClass(thumb, "scrolling", true);
|
||||
var y = e.clientY;
|
||||
var initialPos = holder.scrollTop;
|
||||
|
||||
window.onmouseup = function (e) {
|
||||
switchClass(thumb, "scrolling", false);
|
||||
window.onmouseup = null;
|
||||
window.onmousemove = null;
|
||||
};
|
||||
window.onmousemove = function (e) {
|
||||
var delta = e.clientY - y;
|
||||
|
||||
var percMoved = delta / holder.clientHeight;
|
||||
var deltaScroll = holder.scrollHeight * percMoved;
|
||||
holder.scrollTop = initialPos + deltaScroll;
|
||||
|
||||
scroller.onscroll();
|
||||
};
|
||||
};
|
||||
|
||||
document.body.addEventListener("resize", function () {
|
||||
scroller.onscroll();
|
||||
});
|
||||
|
||||
return scroller;
|
||||
}
|
||||
|
||||
/** @type {HTMLElement[]} */
|
||||
var selectLists = [];
|
||||
function initSelectBoxes() {
|
||||
@ -1136,35 +1096,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {HTMLElement} holder
|
||||
* @param {HTMLElement} thumb
|
||||
* @param {function} [func] - an optional function to be called with the holder and thumb as arguments.
|
||||
* @returns {function} - a function that checks the scroll state and updates the thumb accordingly.
|
||||
* */
|
||||
function checkScroll(holder, thumb, func) {
|
||||
return function () {
|
||||
if (holder.scrollHeight <= holder.clientHeight) {
|
||||
switchClass(thumb, displayNoneClass, true);
|
||||
} else {
|
||||
switchClass(thumb, displayNoneClass, false);
|
||||
var height =
|
||||
(holder.clientHeight / holder.scrollHeight) *
|
||||
holder.clientHeight;
|
||||
height = height < 40 ? 40 : height;
|
||||
thumb.style.height = height + "px";
|
||||
|
||||
var scroll = holder.scrollHeight - holder.clientHeight;
|
||||
var percScrolled = holder.scrollTop / scroll;
|
||||
|
||||
var margin = percScrolled * (holder.clientHeight - height);
|
||||
thumb.style.marginTop = margin + "px";
|
||||
}
|
||||
|
||||
if (func) func(holder, thumb);
|
||||
};
|
||||
}
|
||||
|
||||
function loadMore() {
|
||||
console.warn("Loading more...");
|
||||
if (lastSearch.obj && lastSearch.obj.next) {
|
||||
@ -1369,10 +1300,16 @@
|
||||
* @param {number} numOfSelected
|
||||
*/
|
||||
function checkSelected(numOfSelected) {
|
||||
insertLinkBtn.setText(translate("Insert Citation"));
|
||||
if (numOfSelected <= 0) {
|
||||
elements.insertLinkBtn.setAttribute("disabled", "");
|
||||
insertLinkBtn.disable();
|
||||
} else {
|
||||
elements.insertLinkBtn.removeAttribute("disabled");
|
||||
insertLinkBtn.enable();
|
||||
if (numOfSelected > 1)
|
||||
// TODO: add translate
|
||||
insertLinkBtn.setText(
|
||||
translate("Insert " + numOfSelected + " Citations")
|
||||
);
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
@ -2,6 +2,11 @@
|
||||
|
||||
/// <reference path="../../types-global.js" />
|
||||
|
||||
/**
|
||||
* @typedef {Object} Scroller
|
||||
* @property {Function} onscroll
|
||||
*/
|
||||
|
||||
/**
|
||||
* @param {string} displayNoneClass
|
||||
* @param {function(): void} fLoadMore
|
||||
@ -12,6 +17,7 @@ function SelectCitationsComponent(
|
||||
fLoadMore,
|
||||
fShouldLoadMore
|
||||
) {
|
||||
this._displayNoneClass = displayNoneClass;
|
||||
/** @type {Object<string|number, SearchResultItem>} */
|
||||
this._items = {};
|
||||
/** @type {Object<string|number, HTMLElement>} */
|
||||
@ -46,7 +52,6 @@ function SelectCitationsComponent(
|
||||
}
|
||||
/** @type {Function[]} */
|
||||
this._subscribers = [];
|
||||
this._displayNoneClass = displayNoneClass;
|
||||
this._fShouldLoadMore = fShouldLoadMore;
|
||||
this._fLoadMore = fLoadMore;
|
||||
/** @type {number} */
|
||||
@ -166,12 +171,15 @@ SelectCitationsComponent.prototype._buildDocElement = function (item) {
|
||||
const self = this;
|
||||
var root = document.createElement("div");
|
||||
root.classList.add("doc");
|
||||
var docInfo = document.createElement("div");
|
||||
docInfo.classList.add("docInfo");
|
||||
|
||||
var checkHolder = document.createElement("div");
|
||||
var checkWrapper = document.createElement("div");
|
||||
checkWrapper.classList.add("checkbox");
|
||||
var check = document.createElement("input");
|
||||
check.setAttribute("type", "checkbox");
|
||||
check.setAttribute("id", item.id);
|
||||
if (this._items[item.id]) {
|
||||
check.checked = true;
|
||||
this._checks[item.id] = check;
|
||||
@ -180,46 +188,48 @@ SelectCitationsComponent.prototype._buildDocElement = function (item) {
|
||||
checkWrapper.appendChild(document.createElement("span"));
|
||||
checkHolder.appendChild(checkWrapper);
|
||||
|
||||
var docInfo = document.createElement("div");
|
||||
docInfo.classList.add("docInfo");
|
||||
|
||||
var title = document.createElement("div");
|
||||
title.textContent = item.title;
|
||||
title.classList.add("truncate-text");
|
||||
docInfo.appendChild(title);
|
||||
|
||||
const label = document.createElement("label");
|
||||
if (item.author && item.author.length > 0) {
|
||||
var authors = document.createElement("div");
|
||||
authors.textContent = item.author
|
||||
label.textContent = item.author
|
||||
.map(function (a) {
|
||||
return a.family + ", " + a.given;
|
||||
return a.family.trim() + ", " + a.given.trim();
|
||||
})
|
||||
.join("; ");
|
||||
authors.setAttribute("title", authors.textContent);
|
||||
authors.classList.add("secondary-text");
|
||||
authors.classList.add("truncate-text");
|
||||
authors.classList.add("nowrap");
|
||||
docInfo.appendChild(authors);
|
||||
label.setAttribute("title", label.textContent);
|
||||
label.classList.add("truncate-text");
|
||||
label.classList.add("nowrap");
|
||||
}
|
||||
|
||||
var source = document.createElement("div");
|
||||
var title = document.createElement("div");
|
||||
title.textContent = item.title.trim();
|
||||
title.classList.add("truncate-text");
|
||||
title.classList.add("secondary-text");
|
||||
|
||||
if (item.publisher || item["publisher-place"]) {
|
||||
source.textContent = item.publisher || item["publisher-place"] || "";
|
||||
title.textContent +=
|
||||
" · " + (item.publisher || item["publisher-place"] || "");
|
||||
}
|
||||
if (item.issued && item.issued["date-parts"]) {
|
||||
var date = item.issued["date-parts"][0];
|
||||
if (source.textContent) {
|
||||
source.textContent += " (" + date.join("-") + ")";
|
||||
if (label.textContent.length > 20) {
|
||||
title.textContent += " (" + date.join("-") + ")";
|
||||
} else {
|
||||
source.textContent = date.join("-");
|
||||
if (
|
||||
label.textContent.length > 0 &&
|
||||
label.textContent.slice(-1) !== "." &&
|
||||
label.textContent.slice(-1) !== ","
|
||||
)
|
||||
label.textContent += ".";
|
||||
label.textContent += " " + date.join("-");
|
||||
}
|
||||
}
|
||||
source.setAttribute("title", source.textContent);
|
||||
source.classList.add("secondary-text");
|
||||
source.classList.add("truncate-text");
|
||||
source.classList.add("nowrap");
|
||||
docInfo.appendChild(source);
|
||||
if (label.textContent.length === 0) {
|
||||
label.textContent = title.textContent;
|
||||
}
|
||||
title.setAttribute("title", title.textContent);
|
||||
docInfo.appendChild(title);
|
||||
|
||||
checkHolder.appendChild(label);
|
||||
root.appendChild(checkHolder);
|
||||
root.appendChild(docInfo);
|
||||
|
||||
@ -242,6 +252,7 @@ SelectCitationsComponent.prototype._buildDocElement = function (item) {
|
||||
var f = selectItem(check, item);
|
||||
checkWrapper.onclick = f;
|
||||
docInfo.onclick = f;
|
||||
label.onclick = f;
|
||||
|
||||
return root;
|
||||
};
|
||||
@ -255,23 +266,35 @@ SelectCitationsComponent.prototype._buildSelectedElement = function (item) {
|
||||
var root = document.createElement("div");
|
||||
root.classList.add("selDoc");
|
||||
|
||||
var name = document.createElement("span");
|
||||
name.textContent = item.title;
|
||||
name.setAttribute("title", item.title);
|
||||
|
||||
var year = document.createElement("span");
|
||||
if (item.issued && item.issued["date-parts"]) {
|
||||
year.textContent = item.issued["date-parts"][0].join("-");
|
||||
const span = document.createElement("span");
|
||||
if (item.author && item.author.length > 0) {
|
||||
span.textContent = item.author
|
||||
.map(function (a) {
|
||||
return a.family + ", " + a.given;
|
||||
})
|
||||
.join("; ");
|
||||
} else {
|
||||
span.textContent = item.title;
|
||||
}
|
||||
|
||||
if (item.issued && item.issued["date-parts"]) {
|
||||
span.textContent += " " + item.issued["date-parts"][0].join("-");
|
||||
}
|
||||
span.setAttribute("title", span.textContent);
|
||||
root.appendChild(span);
|
||||
|
||||
var remove = document.createElement("span");
|
||||
remove.onclick = function () {
|
||||
self._removeSelected(item.id);
|
||||
};
|
||||
remove.textContent = "×";
|
||||
|
||||
root.appendChild(name);
|
||||
root.appendChild(year);
|
||||
remove.innerHTML =
|
||||
'<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">' +
|
||||
'<path d="M12.0718 4.6333L11.564 5.14404L10.5483 6.1665L8.70459 8.02002L10.3862 9.7124L11.4829' +
|
||||
" 10.8149L12.0308 11.3667L11.3218 12.0718L10.7729 11.52L9.67725 10.4175L7.99951 8.729L6.32275" +
|
||||
" 10.4165L5.22705 11.52L4.67822 12.0718L3.96924 11.3667L4.51709 10.8149L5.61377 9.7124L7.29443" +
|
||||
" 8.02002L5.45166 6.1665L4.43604 5.14404L3.92822 4.6333L4.63721 3.92822L5.14502 4.43896L6.16162" +
|
||||
' 5.46143L7.99951 7.31104L9.83838 5.46143L10.855 4.43896L11.3628 3.92822L12.0718 4.6333Z"' +
|
||||
' fill="black" fill-opacity="0.8"/></svg>';
|
||||
root.appendChild(remove);
|
||||
|
||||
return root;
|
||||
@ -389,7 +412,7 @@ SelectCitationsComponent.prototype._checkScroll = function (
|
||||
var height =
|
||||
(holder.clientHeight / holder.scrollHeight) *
|
||||
holder.clientHeight;
|
||||
height = height < 40 ? 40 : height;
|
||||
height = height < 20 ? 20 : height;
|
||||
thumb.style.height = height + "px";
|
||||
|
||||
var scroll = holder.scrollHeight - holder.clientHeight;
|
||||
@ -422,12 +445,14 @@ SelectCitationsComponent.prototype._removeSelected = function (id) {
|
||||
|
||||
SelectCitationsComponent.prototype._checkSelected = function () {
|
||||
const numOfSelected = this._count();
|
||||
if (!this._selectedInfo || !this._selectedCount) {
|
||||
if (!this._selectedInfo || !this._selectedCount || !this._selectedWrapper) {
|
||||
return;
|
||||
}
|
||||
if (numOfSelected <= 0) {
|
||||
this._selectedWrapper.classList.add(this._displayNoneClass);
|
||||
this._selectedInfo.classList.add(this._displayNoneClass);
|
||||
} else {
|
||||
this._selectedWrapper.classList.remove(this._displayNoneClass);
|
||||
this._selectedInfo.classList.remove(this._displayNoneClass);
|
||||
this._selectedCount.textContent =
|
||||
numOfSelected + " " + translate("selected");
|
||||
|
||||
@ -89,13 +89,8 @@ Button.prototype._createDOM = function () {
|
||||
this.button.disabled = true;
|
||||
}
|
||||
|
||||
if (this._options.loading) {
|
||||
this.spinner = document.createElement("span");
|
||||
this.spinner.className = "custom-button-spinner";
|
||||
this.button.appendChild(this.spinner);
|
||||
}
|
||||
|
||||
if (this._options.text !== undefined && this._options.text !== "") {
|
||||
if (this._options.text) {
|
||||
this.button.textContent = "";
|
||||
this.buttonText = document.createElement("span");
|
||||
this.buttonText.className = "custom-button-text";
|
||||
this.buttonText.textContent = this._options.text || "";
|
||||
@ -119,6 +114,12 @@ Button.prototype._createDOM = function () {
|
||||
}
|
||||
}
|
||||
|
||||
if (this._options.loading) {
|
||||
this.spinner = document.createElement("span");
|
||||
this.spinner.className = "custom-button-spinner";
|
||||
this.button.appendChild(this.spinner);
|
||||
}
|
||||
|
||||
if (this._options.badge) {
|
||||
this.badgeElement = document.createElement("span");
|
||||
this.badgeElement.className = "custom-button-badge";
|
||||
|
||||
Reference in New Issue
Block a user