libreqda 1.2.0__py3-none-any.whl

taguette/static/scss/components/_tag.scss

@@ -0,0 +1,308 @@
+/* Tag Styles */
+.tag-badges {
+    /*position: absolute;*/
+    right: 2px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 3px;
+}
+
+@media (max-width: 1430px) {
+    .tag-badges {
+        flex-direction: column;
+    }
+}
+
+.tag-text {
+    font-size: 0.9rem !important;
+    letter-spacing: -0.5px !important;
+    white-space: normal !important;
+    overflow: visible !important;
+    /*text-overflow: ellipsis !important;*/
+    max-width: 200px !important;
+    max-height: 25px !important;
+    display: inline-block;
+    padding-right: 5px;
+}
+
+.tag-selection-box {
+    display: none;
+    border: 1px solid #cccccc;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    padding: 10px;
+    border-radius: 10px;
+    background-color: $color-bg;
+    margin: 10px 0;
+    width: 100%;
+}
+
+/* Sidebar query box: scrollable so a large query doesn't push the rest of the panel down.
+   overflow-y stays "auto" at all times (so the scrollbar's width is always
+   reserved and content doesn't shift when it appears) but the scrollbar itself
+   is transparent until hovered, to keep the box visually quiet at rest. */
+#tag-selection-criteria-area {
+    max-height: 220px;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+
+    &:hover {
+        scrollbar-color: $color-gray-400 transparent;
+    }
+
+    &::-webkit-scrollbar {
+        width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: transparent;
+        border-radius: 3px;
+    }
+
+    &:hover::-webkit-scrollbar-thumb {
+        background-color: $color-gray-400;
+    }
+}
+
+/* Pen/clear icon row: no codes ever appear here, so set it apart with a pale background */
+.explore-query-actions {
+    background-color: $color-gray-100;
+    border-bottom: 1px solid #cccccc;
+    border-radius: 10px 10px 0 0;
+    margin: -10px -10px 8px -10px;
+    padding: 6px 10px;
+}
+
+.tag-badge {
+    color: white;
+    padding: 3px 8px;
+    border-radius: 15px;
+    margin-top: 15px;
+    display: inline-flex;
+    align-items: center;
+    font-size: 0.8rem;
+}
+
+.tag-badge-button {
+    background-color: transparent;
+    border: none;
+    color: white;
+    cursor: pointer;
+    margin-left: 5px;
+    font-size: 1rem;
+    font-weight: bold;
+}
+
+/* Explore codes modal: always-visible zone boxes (Can use / Must use / Exclude).
+   The whole box is clickable to pick codes for that zone, so give it a hover
+   hint like any other clickable control. */
+.explore-zone-box {
+    display: block !important;
+    border-width: 2px;
+    cursor: pointer;
+    transition: border-color 0.2s ease, background-color 0.2s ease;
+
+    &:hover {
+        border-color: $color-primary;
+        background-color: rgba($color-primary, 0.04);
+    }
+
+    .zone-label {
+        font-size: 0.85rem;
+        font-weight: 600;
+        margin-bottom: 6px;
+    }
+
+    .zone-chips {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        min-height: 30px;
+        cursor: default;
+    }
+
+    /* Currently active zone: made prominent so it's clear where clicked codes go */
+    &.zone-active {
+        border-color: $color-primary;
+        background-color: rgba($color-primary, 0.08);
+
+        .zone-label {
+            font-size: 0.95rem;
+            color: $color-primary;
+        }
+    }
+}
+
+/* Hint that the target zone changed while the code picker was already open */
+@keyframes explore-picker-flash {
+    0%, 100% { background-color: transparent; }
+    50% { background-color: rgba($color-primary, 0.2); }
+}
+
+.explore-picker-flash {
+    animation: explore-picker-flash 0.5s ease-in-out;
+}
+
+/* Wrap long tag names and long doc names */
+.tag-name {
+  word-break: break-all;
+}
+
+#tag-selection-return a {
+  display: none;
+}
+
+/* Codebook toolbar: column layout — toggle (centered), more actions, create code */
+.codebook-toolbar {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    padding-bottom: 0.4rem;
+
+    .compact-toggle-wrap {
+        align-self: center;
+    }
+
+    > .dropdown {
+        display: flex;
+        .btn { flex: 1; justify-content: center; }
+    }
+
+    .codebook-toolbar-btn {
+        width: 100%;
+        justify-content: center;
+    }
+}
+
+/* Compact: single row — create code (icon), more actions (icon), toggle (no label) */
+.bordered-container.compact-layout .codebook-toolbar {
+    flex-direction: row;
+    align-items: center;
+    gap: 0.4rem;
+
+    .compact-toggle-wrap {
+        order: 4;
+        flex: 1 1 0;
+        min-width: 0;
+        display: flex;
+        justify-content: center;
+        padding-left: 0;
+        .form-check-input { margin-left: 0; }
+        .form-check-label { display: none; }
+    }
+
+    > .dropdown {
+        order: 3;
+        flex: 1 1 0;
+        min-width: 0;
+        display: flex;
+        .btn { flex: 1; justify-content: center; }
+    }
+
+    #create-tag-link {
+        order: 1;
+        flex: 1 1 0;
+        min-width: 0;
+        width: auto;
+        justify-content: center;
+    }
+
+    #explore-codes-link {
+        order: 2;
+        flex: 1 1 0;
+        min-width: 0;
+        width: auto;
+        justify-content: center;
+    }
+}
+
+/* Document toolbar: always stacked, like the codebook toolbar */
+.document-toolbar {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    padding-bottom: 0.4rem;
+}
+
+/* Compact layout: hide button text labels */
+.bordered-container.compact-layout .btn-label {
+    display: none;
+}
+
+.bordered-container.compact-layout #tag-treeview-help-icon {
+    display: none;
+}
+
+#treeview-tags.compact-layout {
+    .list-group-item {
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+        line-height: 1.2;
+        align-items: center !important;
+    }
+
+    .tag-text {
+        font-size: 0.78rem !important;
+        max-height: 18px !important;
+        letter-spacing: -0.3px !important;
+        padding-right: 2px !important;
+    }
+
+    span.indent {
+        margin-left: 4px !important;
+        margin-right: 4px !important;
+    }
+
+    span.icon {
+        width: 10px !important;
+        margin-right: 2px !important;
+    }
+
+    .expand-icon {
+        min-width: 16px !important;
+        padding: 1px !important;
+        font-size: 0.7rem;
+    }
+
+    span[class^="vertical-line-"] {
+        width: 3px !important;
+    }
+}
+
+.badge-compact {
+    font-size: 0.7rem !important;
+    padding: 2px 5px !important;
+    border-radius: 10px !important;
+    min-width: 22px;
+    text-align: center;
+    align-self: center;
+}
+
+
+/* Collapsed panels: just enough padding to keep buttons clear of the border */
+#left-panel.reduced-col .bordered-container,
+#right-panel.reduced-col .bordered-container {
+    padding: 6px;
+    overflow: visible;
+}
+
+#left-panel.reduced-col .codebook-header-wrap,
+#right-panel.reduced-col .documents-header-wrap {
+    padding: 0 !important;
+    gap: 0 !important;
+}
+
+/* Tag highlight */
+.highlight-tag {
+    background-color: $color-highlight-bg !important;
+    transition: background-color 1s ease;
+}
+
+.highlight-tag.fade-out {
+    background-color: transparent !important;
+}

taguette/static/scss/components/_treeview.scss

@@ -0,0 +1,76 @@
+/* Treeview Styles */
+
+/* Collection highlight */
+.highlight-collection {
+    background-color: $color-highlight-bg !important;
+    transition: background-color 1s ease;
+}
+
+.highlight-collection.fade-out {
+    background-color: transparent !important;
+}
+
+/* Document highlight */
+.highlight-document {
+    background-color: $color-highlight-bg !important;
+    transition: background-color 1s ease;
+}
+
+.highlight-document.fade-out {
+    background-color: transparent !important;
+}
+
+/* Override bootstrap-treeview icon spacing */
+body #treeview-documents span.icon {
+    margin-right: 5px !important;
+    width: 12px !important;
+}
+
+#treeview-documents .document-badges {
+    margin-left: 8px;
+    flex-shrink: 0;
+}
+
+#treeview-documents .document-badges-left {
+    order: -1;
+    margin-left: 0;
+    margin-right: 8px;
+}
+
+/* Collection rows as section dividers */
+#treeview-documents .list-group-item.collection-context-menu {
+    background-color: $color-gray-100;
+    font-weight: 600;
+    border-bottom: 1px solid $color-gray-300;
+    padding-top: 5px !important;
+    padding-bottom: 5px !important;
+    padding-left: 6px !important;
+    margin-top: 2px;
+}
+
+/* Document rows: thin left stripe, minimal indent, white background overrides parent collection grey */
+#treeview-documents .document-link {
+    padding-left: 10px !important;
+    padding-right: 8px !important;
+    border-left: 3px solid $color-gray-300;
+    background-color: $color-bg !important;
+}
+
+#treeview-documents .list-group-item > .w-100 {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+}
+
+#treeview-documents .document-link-a {
+    flex: 1;
+    min-width: 0;
+    font-size: 0.9rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+#treeview-documents .list-group-item {
+    font-size: 0.9rem;
+}