.
9 |
10 | .list-group {
11 | // No need to set list-style: none; since .list-group-item is block level
12 | margin-bottom: 20px;
13 | padding-left: 0; // reset padding because ul and ol
14 | }
15 |
16 |
17 | // Individual list items
18 | //
19 | // Use on `li`s or `div`s within the `.list-group` parent.
20 |
21 | .list-group-item {
22 | position: relative;
23 | display: block;
24 | padding: 10px 15px;
25 | // Place the border on the list items and negative margin up for better styling
26 | margin-bottom: -1px;
27 | background-color: @list-group-bg;
28 | border: 1px solid @list-group-border;
29 |
30 | // Round the first and last items
31 | &:first-child {
32 | .border-top-radius(@list-group-border-radius);
33 | }
34 | &:last-child {
35 | margin-bottom: 0;
36 | .border-bottom-radius(@list-group-border-radius);
37 | }
38 | }
39 |
40 |
41 | // Linked list items
42 | //
43 | // Use anchor elements instead of `li`s or `div`s to create linked list items.
44 | // Includes an extra `.active` modifier class for showing selected items.
45 |
46 | a.list-group-item {
47 | color: @list-group-link-color;
48 |
49 | .list-group-item-heading {
50 | color: @list-group-link-heading-color;
51 | }
52 |
53 | // Hover state
54 | &:hover,
55 | &:focus {
56 | text-decoration: none;
57 | color: @list-group-link-hover-color;
58 | background-color: @list-group-hover-bg;
59 | }
60 | }
61 |
62 | .list-group-item {
63 | // Disabled state
64 | &.disabled,
65 | &.disabled:hover,
66 | &.disabled:focus {
67 | background-color: @list-group-disabled-bg;
68 | color: @list-group-disabled-color;
69 | cursor: @cursor-disabled;
70 |
71 | // Force color to inherit for custom content
72 | .list-group-item-heading {
73 | color: inherit;
74 | }
75 | .list-group-item-text {
76 | color: @list-group-disabled-text-color;
77 | }
78 | }
79 |
80 | // Active class on item itself, not parent
81 | &.active,
82 | &.active:hover,
83 | &.active:focus {
84 | z-index: 2; // Place active items above their siblings for proper border styling
85 | color: @list-group-active-color;
86 | background-color: @list-group-active-bg;
87 | border-color: @list-group-active-border;
88 |
89 | // Force color to inherit for custom content
90 | .list-group-item-heading,
91 | .list-group-item-heading > small,
92 | .list-group-item-heading > .small {
93 | color: inherit;
94 | }
95 | .list-group-item-text {
96 | color: @list-group-active-text-color;
97 | }
98 | }
99 | }
100 |
101 |
102 | // Contextual variants
103 | //
104 | // Add modifier classes to change text and background color on individual items.
105 | // Organizationally, this must come after the `:hover` states.
106 |
107 | .list-group-item-variant(success; @state-success-bg; @state-success-text);
108 | .list-group-item-variant(info; @state-info-bg; @state-info-text);
109 | .list-group-item-variant(warning; @state-warning-bg; @state-warning-text);
110 | .list-group-item-variant(danger; @state-danger-bg; @state-danger-text);
111 |
112 |
113 | // Custom content options
114 | //
115 | // Extra classes for creating well-formatted content within `.list-group-item`s.
116 |
117 | .list-group-item-heading {
118 | margin-top: 0;
119 | margin-bottom: 5px;
120 | }
121 | .list-group-item-text {
122 | margin-bottom: 0;
123 | line-height: 1.3;
124 | }
125 |
--------------------------------------------------------------------------------
/client/routes/home/results-container.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Directory from 'components/create-directory';
3 | import FolderList from 'components/folder-list';
4 | import JsonContainer from 'components/json-container';
5 |
6 | const Files = ({ files, host, activeDb, value }) => {
7 | const structure = new Directory(files);
8 | const { root, allFiles } = structure;
9 |
10 | return (
11 |
12 | )
13 | }
14 |
15 | const Result = ({ data, view, host, activeDb, value}) => {
16 | if (view === 'files') {
17 | return (
18 |
19 |
20 |
21 | );
22 | }
23 | return (
24 |
25 |
26 |
27 | );
28 | }
29 |
30 | const componentUpdateKeys = (props, nextProps, ...args) => {
31 | for (var i = 0; i < args.length; i++) {
32 | if(props[args[i]] !== nextProps[args[i]]) return true;
33 | }
34 | return false;
35 | }
36 |
37 | class ResultsContainer extends Component {
38 | shouldComponentUpdate(props) {
39 | return componentUpdateKeys(props, this.props, 'resultKey', 'view', 'activeTab');
40 | }
41 | render () {
42 | const { results, onSetActiveTab, activeTab, onToggleView, view, host, activeDb, value, resultKey } = this.props;
43 | if (!results || results.length < 1) return false;
44 | const tabs = results.map((v, index) => {
45 | const className = activeTab === index ? "active" : "";
46 | const handleSetActiveTab = () => onSetActiveTab(index)
47 | return (
48 |
49 | {`Results ${index}`}
50 |
51 | );
52 | })
53 | const activeResult = results[activeTab];
54 | const handleToggleFiles = () => {
55 | onToggleView("files");
56 | }
57 | const handleToggleJson = () => {
58 | onToggleView("json");
59 | }
60 | const style = {
61 | color: activeResult.err ? 'red' : 'green',
62 | opacity: '.75',
63 | // color: 'rgba(128, 128, 128, 0.71)',
64 | fontStyle: 'italic',
65 | fontFamily: 'monospace',
66 | float: 'left',
67 | fontWeight: 'bold',
68 | }
69 | return (
70 |
71 |
74 |
75 |
76 |
77 |
78 |
{activeResult.query}
79 |
80 |
83 |
86 |
87 |
88 |
89 | {activeResult.err && (
90 |
91 | )}
92 | {!activeResult.err && (
93 |
94 | )}
95 |
96 |
97 |
98 | )
99 | }
100 | }
101 |
102 | export default ResultsContainer;
103 |
--------------------------------------------------------------------------------
/client/css/bootstrap/less/mixins/grid.less:
--------------------------------------------------------------------------------
1 | // Grid system
2 | //
3 | // Generate semantic grid columns with these mixins.
4 |
5 | // Centered container element
6 | .container-fixed(@gutter: @grid-gutter-width) {
7 | margin-right: auto;
8 | margin-left: auto;
9 | padding-left: (@gutter / 2);
10 | padding-right: (@gutter / 2);
11 | &:extend(.clearfix all);
12 | }
13 |
14 | // Creates a wrapper for a series of columns
15 | .make-row(@gutter: @grid-gutter-width) {
16 | margin-left: (@gutter / -2);
17 | margin-right: (@gutter / -2);
18 | &:extend(.clearfix all);
19 | }
20 |
21 | // Generate the extra small columns
22 | .make-xs-column(@columns; @gutter: @grid-gutter-width) {
23 | position: relative;
24 | float: left;
25 | width: percentage((@columns / @grid-columns));
26 | min-height: 1px;
27 | padding-left: (@gutter / 2);
28 | padding-right: (@gutter / 2);
29 | }
30 | .make-xs-column-offset(@columns) {
31 | margin-left: percentage((@columns / @grid-columns));
32 | }
33 | .make-xs-column-push(@columns) {
34 | left: percentage((@columns / @grid-columns));
35 | }
36 | .make-xs-column-pull(@columns) {
37 | right: percentage((@columns / @grid-columns));
38 | }
39 |
40 | // Generate the small columns
41 | .make-sm-column(@columns; @gutter: @grid-gutter-width) {
42 | position: relative;
43 | min-height: 1px;
44 | padding-left: (@gutter / 2);
45 | padding-right: (@gutter / 2);
46 |
47 | @media (min-width: @screen-sm-min) {
48 | float: left;
49 | width: percentage((@columns / @grid-columns));
50 | }
51 | }
52 | .make-sm-column-offset(@columns) {
53 | @media (min-width: @screen-sm-min) {
54 | margin-left: percentage((@columns / @grid-columns));
55 | }
56 | }
57 | .make-sm-column-push(@columns) {
58 | @media (min-width: @screen-sm-min) {
59 | left: percentage((@columns / @grid-columns));
60 | }
61 | }
62 | .make-sm-column-pull(@columns) {
63 | @media (min-width: @screen-sm-min) {
64 | right: percentage((@columns / @grid-columns));
65 | }
66 | }
67 |
68 | // Generate the medium columns
69 | .make-md-column(@columns; @gutter: @grid-gutter-width) {
70 | position: relative;
71 | min-height: 1px;
72 | padding-left: (@gutter / 2);
73 | padding-right: (@gutter / 2);
74 |
75 | @media (min-width: @screen-md-min) {
76 | float: left;
77 | width: percentage((@columns / @grid-columns));
78 | }
79 | }
80 | .make-md-column-offset(@columns) {
81 | @media (min-width: @screen-md-min) {
82 | margin-left: percentage((@columns / @grid-columns));
83 | }
84 | }
85 | .make-md-column-push(@columns) {
86 | @media (min-width: @screen-md-min) {
87 | left: percentage((@columns / @grid-columns));
88 | }
89 | }
90 | .make-md-column-pull(@columns) {
91 | @media (min-width: @screen-md-min) {
92 | right: percentage((@columns / @grid-columns));
93 | }
94 | }
95 |
96 | // Generate the large columns
97 | .make-lg-column(@columns; @gutter: @grid-gutter-width) {
98 | position: relative;
99 | min-height: 1px;
100 | padding-left: (@gutter / 2);
101 | padding-right: (@gutter / 2);
102 |
103 | @media (min-width: @screen-lg-min) {
104 | float: left;
105 | width: percentage((@columns / @grid-columns));
106 | }
107 | }
108 | .make-lg-column-offset(@columns) {
109 | @media (min-width: @screen-lg-min) {
110 | margin-left: percentage((@columns / @grid-columns));
111 | }
112 | }
113 | .make-lg-column-push(@columns) {
114 | @media (min-width: @screen-lg-min) {
115 | left: percentage((@columns / @grid-columns));
116 | }
117 | }
118 | .make-lg-column-pull(@columns) {
119 | @media (min-width: @screen-lg-min) {
120 | right: percentage((@columns / @grid-columns));
121 | }
122 | }
123 |
--------------------------------------------------------------------------------
/client/components/json-structure.js:
--------------------------------------------------------------------------------
1 | import React, {PropType, Component} from 'react'
2 |
3 | class JsonArray extends Component {
4 | constructor (props) {
5 | super(props);
6 | this.state = { isOpen: true }
7 | }
8 | render () {
9 | const { data, padding, start } = this.props;
10 | const { isOpen } = this.state;
11 | const style = { marginLeft: `${padding}px` }
12 | const toggleOpen = () => {
13 | this.setState({ isOpen: true })
14 | }
15 | const toggleClose = () => {
16 | this.setState({ isOpen: false })
17 | }
18 | if (isOpen === false) {
19 | return (
20 |
21 |
22 | {` [...]`}
23 |
24 | )
25 | }
26 |
27 | const html = data.map((v, index) => {
28 | const displayIndex = start ? start + index : index;
29 | return (
30 |
31 | {displayIndex}:
32 |
33 |
34 | );
35 | })
36 |
37 | return (
38 |
39 |
40 | {` [`}
41 | {html}
42 | {`]`}
43 |
44 | );
45 | }
46 | }
47 |
48 | class JsonObject extends Component {
49 | constructor (props) {
50 | super(props);
51 | this.state = { isOpen: true };
52 | }
53 | render() {
54 | const { data, padding } = this.props;
55 | const { isOpen } = this.state;
56 | const keys = Object.keys(data);
57 | const style = { marginLeft: `${padding}px` }
58 | const toggleOpen = () => {
59 | this.setState({ isOpen: true })
60 | }
61 | const toggleClose = () => {
62 | this.setState({ isOpen: false })
63 | }
64 | if (isOpen === false) {
65 | return (
66 |
67 |
68 | {` {...}`}
69 |
70 | )
71 | }
72 |
73 | const html = keys.map((v, index) => {
74 | return (
75 |
76 | {v}:
77 |
78 |
79 | )
80 | })
81 | return (
82 |
83 |
84 | {` {`}
85 | {html}
86 | {`}`}
87 |
88 | )
89 | }
90 | }
91 |
92 | const JsonData = ({ data }) => {
93 | if (data === null || data === undefined) {
94 | return (
{` null`})
95 | }
96 | var datatype = typeof(data);
97 | if (datatype === 'string') {
98 | return (
{` "${data}"`});
99 | }
100 | return (
{` ${data}`});
101 | }
102 |
103 | const Json = ({ data, padding, start }) => {
104 | if (data === null || data === undefined) {
105 | return (
{` null`})
106 | }
107 | if (Array.isArray(data)) {
108 | return (
109 |
116 | );
117 | }
118 | if (typeof(data) === 'object') {
119 | return (
120 |
126 | );
127 | }
128 |
129 | return
130 | }
131 |
132 |
133 |
134 | export default Json;
135 |
--------------------------------------------------------------------------------
/client/css/bootstrap/less/popovers.less:
--------------------------------------------------------------------------------
1 | //
2 | // Popovers
3 | // --------------------------------------------------
4 |
5 |
6 | .popover {
7 | position: absolute;
8 | top: 0;
9 | left: 0;
10 | z-index: @zindex-popover;
11 | display: none;
12 | max-width: @popover-max-width;
13 | padding: 1px;
14 | // Reset font and text properties given new insertion method
15 | font-family: @font-family-base;
16 | font-size: @font-size-base;
17 | font-weight: normal;
18 | line-height: @line-height-base;
19 | text-align: left;
20 | background-color: @popover-bg;
21 | background-clip: padding-box;
22 | border: 1px solid @popover-fallback-border-color;
23 | border: 1px solid @popover-border-color;
24 | border-radius: @border-radius-large;
25 | .box-shadow(0 5px 10px rgba(0,0,0,.2));
26 |
27 | // Overrides for proper insertion
28 | white-space: normal;
29 |
30 | // Offset the popover to account for the popover arrow
31 | &.top { margin-top: -@popover-arrow-width; }
32 | &.right { margin-left: @popover-arrow-width; }
33 | &.bottom { margin-top: @popover-arrow-width; }
34 | &.left { margin-left: -@popover-arrow-width; }
35 | }
36 |
37 | .popover-title {
38 | margin: 0; // reset heading margin
39 | padding: 8px 14px;
40 | font-size: @font-size-base;
41 | background-color: @popover-title-bg;
42 | border-bottom: 1px solid darken(@popover-title-bg, 5%);
43 | border-radius: (@border-radius-large - 1) (@border-radius-large - 1) 0 0;
44 | }
45 |
46 | .popover-content {
47 | padding: 9px 14px;
48 | }
49 |
50 | // Arrows
51 | //
52 | // .arrow is outer, .arrow:after is inner
53 |
54 | .popover > .arrow {
55 | &,
56 | &:after {
57 | position: absolute;
58 | display: block;
59 | width: 0;
60 | height: 0;
61 | border-color: transparent;
62 | border-style: solid;
63 | }
64 | }
65 | .popover > .arrow {
66 | border-width: @popover-arrow-outer-width;
67 | }
68 | .popover > .arrow:after {
69 | border-width: @popover-arrow-width;
70 | content: "";
71 | }
72 |
73 | .popover {
74 | &.top > .arrow {
75 | left: 50%;
76 | margin-left: -@popover-arrow-outer-width;
77 | border-bottom-width: 0;
78 | border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback
79 | border-top-color: @popover-arrow-outer-color;
80 | bottom: -@popover-arrow-outer-width;
81 | &:after {
82 | content: " ";
83 | bottom: 1px;
84 | margin-left: -@popover-arrow-width;
85 | border-bottom-width: 0;
86 | border-top-color: @popover-arrow-color;
87 | }
88 | }
89 | &.right > .arrow {
90 | top: 50%;
91 | left: -@popover-arrow-outer-width;
92 | margin-top: -@popover-arrow-outer-width;
93 | border-left-width: 0;
94 | border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback
95 | border-right-color: @popover-arrow-outer-color;
96 | &:after {
97 | content: " ";
98 | left: 1px;
99 | bottom: -@popover-arrow-width;
100 | border-left-width: 0;
101 | border-right-color: @popover-arrow-color;
102 | }
103 | }
104 | &.bottom > .arrow {
105 | left: 50%;
106 | margin-left: -@popover-arrow-outer-width;
107 | border-top-width: 0;
108 | border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback
109 | border-bottom-color: @popover-arrow-outer-color;
110 | top: -@popover-arrow-outer-width;
111 | &:after {
112 | content: " ";
113 | top: 1px;
114 | margin-left: -@popover-arrow-width;
115 | border-top-width: 0;
116 | border-bottom-color: @popover-arrow-color;
117 | }
118 | }
119 |
120 | &.left > .arrow {
121 | top: 50%;
122 | right: -@popover-arrow-outer-width;
123 | margin-top: -@popover-arrow-outer-width;
124 | border-right-width: 0;
125 | border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback
126 | border-left-color: @popover-arrow-outer-color;
127 | &:after {
128 | content: " ";
129 | right: 1px;
130 | border-right-width: 0;
131 | border-left-color: @popover-arrow-color;
132 | bottom: -@popover-arrow-width;
133 | }
134 | }
135 | }
136 |
--------------------------------------------------------------------------------
/client/css/bootstrap/less/modals.less:
--------------------------------------------------------------------------------
1 | //
2 | // Modals
3 | // --------------------------------------------------
4 |
5 | // .modal-open - body class for killing the scroll
6 | // .modal - container to scroll within
7 | // .modal-dialog - positioning shell for the actual modal
8 | // .modal-content - actual modal w/ bg and corners and shit
9 |
10 | // Kill the scroll on the body
11 | .modal-open {
12 | overflow: hidden;
13 | }
14 |
15 | // Container that the modal scrolls within
16 | .modal {
17 | display: none;
18 | overflow: hidden;
19 | position: fixed;
20 | top: 0;
21 | right: 0;
22 | bottom: 0;
23 | left: 0;
24 | z-index: @zindex-modal;
25 | -webkit-overflow-scrolling: touch;
26 |
27 | // Prevent Chrome on Windows from adding a focus outline. For details, see
28 | // https://github.com/twbs/bootstrap/pull/10951.
29 | outline: 0;
30 |
31 | // When fading in the modal, animate it to slide down
32 | &.fade .modal-dialog {
33 | .translate(0, -25%);
34 | .transition-transform(~"0.3s ease-out");
35 | }
36 | &.in .modal-dialog { .translate(0, 0) }
37 | }
38 | .modal-open .modal {
39 | overflow-x: hidden;
40 | overflow-y: auto;
41 | }
42 |
43 | // Shell div to position the modal with bottom padding
44 | .modal-dialog {
45 | position: relative;
46 | width: auto;
47 | margin: 10px;
48 | }
49 |
50 | // Actual modal
51 | .modal-content {
52 | position: relative;
53 | background-color: @modal-content-bg;
54 | border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
55 | border: 1px solid @modal-content-border-color;
56 | border-radius: @border-radius-large;
57 | .box-shadow(0 3px 9px rgba(0,0,0,.5));
58 | background-clip: padding-box;
59 | // Remove focus outline from opened modal
60 | outline: 0;
61 | }
62 |
63 | // Modal background
64 | .modal-backdrop {
65 | position: absolute;
66 | top: 0;
67 | right: 0;
68 | left: 0;
69 | background-color: @modal-backdrop-bg;
70 | // Fade for backdrop
71 | &.fade { .opacity(0); }
72 | &.in { .opacity(@modal-backdrop-opacity); }
73 | }
74 |
75 | // Modal header
76 | // Top section of the modal w/ title and dismiss
77 | .modal-header {
78 | padding: @modal-title-padding;
79 | border-bottom: 1px solid @modal-header-border-color;
80 | min-height: (@modal-title-padding + @modal-title-line-height);
81 | }
82 | // Close icon
83 | .modal-header .close {
84 | margin-top: -2px;
85 | }
86 |
87 | // Title text within header
88 | .modal-title {
89 | margin: 0;
90 | line-height: @modal-title-line-height;
91 | }
92 |
93 | // Modal body
94 | // Where all modal content resides (sibling of .modal-header and .modal-footer)
95 | .modal-body {
96 | position: relative;
97 | padding: @modal-inner-padding;
98 | }
99 |
100 | // Footer (for actions)
101 | .modal-footer {
102 | padding: @modal-inner-padding;
103 | text-align: right; // right align buttons
104 | border-top: 1px solid @modal-footer-border-color;
105 | &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons
106 |
107 | // Properly space out buttons
108 | .btn + .btn {
109 | margin-left: 5px;
110 | margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
111 | }
112 | // but override that for button groups
113 | .btn-group .btn + .btn {
114 | margin-left: -1px;
115 | }
116 | // and override it for block buttons as well
117 | .btn-block + .btn-block {
118 | margin-left: 0;
119 | }
120 | }
121 |
122 | // Measure scrollbar width for padding body during modal show/hide
123 | .modal-scrollbar-measure {
124 | position: absolute;
125 | top: -9999px;
126 | width: 50px;
127 | height: 50px;
128 | overflow: scroll;
129 | }
130 |
131 | // Scale up the modal
132 | @media (min-width: @screen-sm-min) {
133 | // Automatically set modal's width for larger viewports
134 | .modal-dialog {
135 | width: @modal-md;
136 | margin: 30px auto;
137 | }
138 | .modal-content {
139 | .box-shadow(0 5px 15px rgba(0,0,0,.5));
140 | }
141 |
142 | // Modal sizes
143 | .modal-sm { width: @modal-sm; }
144 | }
145 |
146 | @media (min-width: @screen-md-min) {
147 | .modal-lg { width: @modal-lg; }
148 | }
149 |
--------------------------------------------------------------------------------
/client/css/bootstrap/less/buttons.less:
--------------------------------------------------------------------------------
1 | //
2 | // Buttons
3 | // --------------------------------------------------
4 |
5 |
6 | // Base styles
7 | // --------------------------------------------------
8 |
9 | .btn {
10 | display: inline-block;
11 | margin-bottom: 0; // For input.btn
12 | font-weight: @btn-font-weight;
13 | text-align: center;
14 | vertical-align: middle;
15 | touch-action: manipulation;
16 | cursor: pointer;
17 | background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
18 | border: 1px solid transparent;
19 | white-space: nowrap;
20 | .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);
21 | .user-select(none);
22 |
23 | &,
24 | &:active,
25 | &.active {
26 | &:focus,
27 | &.focus {
28 | .tab-focus();
29 | }
30 | }
31 |
32 | &:hover,
33 | &:focus,
34 | &.focus {
35 | color: @btn-default-color;
36 | text-decoration: none;
37 | }
38 |
39 | &:active,
40 | &.active {
41 | outline: 0;
42 | background-image: none;
43 | .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
44 | }
45 |
46 | &.disabled,
47 | &[disabled],
48 | fieldset[disabled] & {
49 | cursor: @cursor-disabled;
50 | pointer-events: none; // Future-proof disabling of clicks
51 | .opacity(.65);
52 | .box-shadow(none);
53 | }
54 | }
55 |
56 |
57 | // Alternate buttons
58 | // --------------------------------------------------
59 |
60 | .btn-default {
61 | .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
62 | }
63 | .btn-primary {
64 | .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
65 | }
66 | // Success appears as green
67 | .btn-success {
68 | .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
69 | }
70 | // Info appears as blue-green
71 | .btn-info {
72 | .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
73 | }
74 | // Warning appears as orange
75 | .btn-warning {
76 | .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
77 | }
78 | // Danger and error appear as red
79 | .btn-danger {
80 | .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
81 | }
82 |
83 |
84 | // Link buttons
85 | // -------------------------
86 |
87 | // Make a button look and behave like a link
88 | .btn-link {
89 | color: @link-color;
90 | font-weight: normal;
91 | border-radius: 0;
92 |
93 | &,
94 | &:active,
95 | &.active,
96 | &[disabled],
97 | fieldset[disabled] & {
98 | background-color: transparent;
99 | .box-shadow(none);
100 | }
101 | &,
102 | &:hover,
103 | &:focus,
104 | &:active {
105 | border-color: transparent;
106 | }
107 | &:hover,
108 | &:focus {
109 | color: @link-hover-color;
110 | text-decoration: @link-hover-decoration;
111 | background-color: transparent;
112 | }
113 | &[disabled],
114 | fieldset[disabled] & {
115 | &:hover,
116 | &:focus {
117 | color: @btn-link-disabled-color;
118 | text-decoration: none;
119 | }
120 | }
121 | }
122 |
123 |
124 | // Button Sizes
125 | // --------------------------------------------------
126 |
127 | .btn-lg {
128 | // line-height: ensure even-numbered height of button next to large input
129 | .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
130 | }
131 | .btn-sm {
132 | // line-height: ensure proper height of button next to small input
133 | .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
134 | }
135 | .btn-xs {
136 | .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small);
137 | }
138 |
139 |
140 | // Block button
141 | // --------------------------------------------------
142 |
143 | .btn-block {
144 | display: block;
145 | width: 100%;
146 | }
147 |
148 | // Vertically space out multiple block buttons
149 | .btn-block + .btn-block {
150 | margin-top: 5px;
151 | }
152 |
153 | // Specificity overrides
154 | input[type="submit"],
155 | input[type="reset"],
156 | input[type="button"] {
157 | &.btn-block {
158 | width: 100%;
159 | }
160 | }
161 |
--------------------------------------------------------------------------------
/client/css/bootstrap/less/mixins/gradients.less:
--------------------------------------------------------------------------------
1 | // Gradients
2 |
3 | #gradient {
4 |
5 | // Horizontal gradient, from left to right
6 | //
7 | // Creates two color stops, start and end, by specifying a color and position for each color stop.
8 | // Color stops are not available in IE9 and below.
9 | .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
10 | background-image: -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+
11 | background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Opera 12
12 | background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
13 | background-repeat: repeat-x;
14 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
15 | }
16 |
17 | // Vertical gradient, from top to bottom
18 | //
19 | // Creates two color stops, start and end, by specifying a color and position for each color stop.
20 | // Color stops are not available in IE9 and below.
21 | .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
22 | background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+
23 | background-image: -o-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Opera 12
24 | background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
25 | background-repeat: repeat-x;
26 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
27 | }
28 |
29 | .directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
30 | background-repeat: repeat-x;
31 | background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+
32 | background-image: -o-linear-gradient(@deg, @start-color, @end-color); // Opera 12
33 | background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
34 | }
35 | .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
36 | background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
37 | background-image: -o-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
38 | background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
39 | background-repeat: no-repeat;
40 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
41 | }
42 | .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
43 | background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
44 | background-image: -o-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
45 | background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
46 | background-repeat: no-repeat;
47 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
48 | }
49 | .radial(@inner-color: #555; @outer-color: #333) {
50 | background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
51 | background-image: radial-gradient(circle, @inner-color, @outer-color);
52 | background-repeat: no-repeat;
53 | }
54 | .striped(@color: rgba(255,255,255,.15); @angle: 45deg) {
55 | background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
56 | background-image: -o-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
57 | background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/yarn-error.log:
--------------------------------------------------------------------------------
1 | Arguments:
2 | C:\Program Files\nodejs\node.exe C:\Program Files (x86)\Yarn\bin\yarn.js
3 |
4 | PATH:
5 | C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\Program Files\Docker\Docker\Resources\bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files\Git\cmd;C:\Program Files\dotnet\;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Users\mbaho\AppData\Roaming\nvm;C:\Program Files\nodejs;C:\Program Files (x86)\Yarn\bin\;C:\WINDOWS\System32\OpenSSH\;C:\Program Files (x86)\Airtame;C:\Users\mbaho\AppData\Local\Programs\Python\Python36\Scripts\;C:\Users\mbaho\AppData\Local\Programs\Python\Python36\;C:\Users\mbaho\AppData\Local\Microsoft\WindowsApps;C:\Program Files\Microsoft VS Code\bin;C:\Users\mbaho\AppData\Roaming\nvm;C:\Program Files\nodejs;C:\Users\mbaho\AppData\Local\Yarn\bin;C:\Users\mbaho\AppData\Local\GitHubDesktop\bin;C:\Users\mbaho\AppData\Local\Microsoft\WindowsApps;C:\Program Files\Java\jdk-11.0.2\bin;C:\Applications\Atlassian\atlassian-plugin-sdk-8.0.4\bin;C:\Users\mbaho\AppData\Roaming\Dashlane\6.1909.0.18330\bin\Firefox_Extension\{442718d9-475e-452a-b3e1-fb1ee16b8e9f}\components;C:\Users\mbaho\AppData\Roaming\Dashlane\6.1909.0.18330\ucrt;C:\Users\mbaho\AppData\Roaming\Dashlane\6.1909.0.18330\bin\Qt;C:\Users\mbaho\AppData\Roaming\Dashlane\6.1909.0.18330\bin\Ssl;C:\Program Files\MongoDB\Server\4.0\bin\;
6 |
7 | Yarn version:
8 | 1.6.0
9 |
10 | Node version:
11 | 7.9.0
12 |
13 | Platform:
14 | win32 x64
15 |
16 | Trace:
17 | SyntaxError: C:\Users\mbaho\mattcode\mongo-monkey\package.json: Unexpected token } in JSON at position 1081
18 | at JSON.parse (
)
19 | at C:\Program Files (x86)\Yarn\lib\cli.js:1130:59
20 | at Generator.next ()
21 | at step (C:\Program Files (x86)\Yarn\lib\cli.js:98:30)
22 | at C:\Program Files (x86)\Yarn\lib\cli.js:109:13
23 |
24 | npm manifest:
25 | {
26 | "name": "mongo-monkey",
27 | "version": "2.0.4",
28 | "description": "",
29 | "main": "index.js",
30 | "repository": "git://github.com/mbahoshy/mongo-monkey.git",
31 | "scripts": {
32 | "clean": "rm -rf build && mkdir build",
33 | "build-server": "babel -d ./build ./server -s --ignore public",
34 | "build": "npm run clean && npm run build-server && ENVIRONMENT=build webpack -p",
35 | "start": "node build/bin/index.js",
36 | "dev": "babel-node server/bin/index.js",
37 | "test": "echo \"Error: no test specified\" && exit 1"
38 | },
39 | "bin": {
40 | "mongo-monkey": "./build/bin/index.js"
41 | },
42 | "keywords": [
43 | "mongodb",
44 | "client",
45 | "macos mongodb",
46 | "windows mongodb",
47 | "mongo",
48 | "multiple queries",
49 | "gridfs",
50 | "gridfs file browser"
51 | ],
52 | "author": "",
53 | "license": "UNLICENSED",
54 | "dependencies": {
55 | "babel-runtime": "^6.6.1",
56 | "bluebird": "^3.3.4",
57 | "gridfs-stream": "^1.1.1",
58 | "koa": "^1.2.0",
59 | "koa-bodyparser": "^2.0.1",
60 | "koa-ejs": "^3.0.0",
61 | "koa-json": "^1.1.1",
62 | "koa-router": "^5.4.0",
63 | "koa-static": "^2.0.0",
64 | "mime": "^1.3.4",
65 | },
66 | "devDependencies": {
67 | "babel": "^6.5.2",
68 | "babel-cli": "^6.6.5",
69 | "babel-core": "^6.7.4",
70 | "babel-loader": "^6.2.4",
71 | "babel-plugin-transform-async-to-generator": "^6.7.4",
72 | "babel-plugin-transform-es2015-modules-commonjs": "^6.7.4",
73 | "babel-plugin-transform-react-constant-elements": "^6.5.0",
74 | "babel-plugin-transform-runtime": "^6.6.0",
75 | "babel-plugin-transform-strict-mode": "^6.6.5",
76 | "babel-preset-es2015": "^6.6.0",
77 | "babel-preset-react": "^6.5.0",
78 | "css-loader": "^0.23.1",
79 | "extract-text-webpack-plugin": "^1.0.1",
80 | "file-loader": "^0.8.5",
81 | "history": "^2.0.1",
82 | "html-webpack-plugin": "^2.14.0",
83 | "isomorphic-fetch": "^2.2.1",
84 | "json-loader": "^0.5.4",
85 | "less": "^2.6.1",
86 | "less-loader": "^2.2.2",
87 | "react": "^15.0.0",
88 | "react-dom": "^15.0.1",
89 | "react-redux": "^4.4.2",
90 | "react-router": "^2.0.1",
91 | "redux": "^3.3.1",
92 | "redux-form": "^4.2.2",
93 | "redux-logger": "^2.6.1",
94 | "redux-thunk": "^2.0.1",
95 | "style-loader": "^0.13.1",
96 | "url-loader": "^0.5.7",
97 | "webpack": "^1.12.14"
98 | }
99 | }
100 |
101 | yarn manifest:
102 | No manifest
103 |
104 | Lockfile:
105 | No lockfile
106 |
--------------------------------------------------------------------------------
/client/utils/formatter-utils.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const colors = {
4 | blue: { color: 'blue' },
5 | green: { color: 'green' },
6 | orange: { color: 'orange' },
7 | red: { color: 'red' },
8 | black: { color: 'black' },
9 | cursor: { letterSpacing: '-4px', marginLeft: '-4px', textDecoration: 'blink', color: 'black' },
10 | };
11 |
12 | const Caret = () => (
13 | |
14 | )
15 |
16 | const showCaret = (caret, idx) => {
17 | if (!caret) return false;
18 | return caret === idx ? : false;
19 | }
20 |
21 | const formatSpecial = value => {
22 | if (value === ' ') return ;
23 | if (value === '\n') return
;
24 | return value;
25 | }
26 |
27 | const getHtml = (value, idx, caret) => {
28 |
29 | const hasCaret = showCaret(caret, idx);
30 |
31 | const char = value[idx];
32 |
33 | // map caret to string position
34 | const accepted = ['}', ' ', ',', '\n'];
35 | const another = [' ', ':'];
36 | if ((!value[idx - 1] || another.indexOf(value[idx - 1]) !== -1) && (!value[idx + 4] || accepted.indexOf(value[idx + 4]) !== -1) && value.slice(idx, idx + 4) === 'true') {
37 | return {
38 | diff: 4,
39 | html: {hasCaret}{`true`}
40 | };
41 | }
42 |
43 | if ((!value[idx - 1] || value[idx - 1] === ' ') && value.slice(idx, idx + 5) === 'false') {
44 | return {
45 | diff: 5,
46 | html: {hasCaret}{`false`}
47 | };
48 | }
49 |
50 | // if ((!value[idx - 1] || another.indexOf(value[idx - 1]) !== -1) && (!isNaN(char)))
51 |
52 | if (char === ':' || char === ',') {
53 | return {
54 | diff: 1,
55 | html: {hasCaret}{char}
56 | };
57 | }
58 |
59 | if (char === '\n') {
60 | return {
61 | diff: 1,
62 | html: {hasCaret}
63 | };
64 | }
65 | if (char === ' ') {
66 | return {
67 | diff: 1,
68 | html: {hasCaret}
69 | };
70 | }
71 | if (char === '{') {
72 | const chars = [{hasCaret}{`{`}];
73 | let newIdx = idx + 1;
74 | while (newIdx < value.length) {
75 | const newHasCaret = showCaret(caret, newIdx);
76 | if (value[newIdx] === '}') break;
77 | const { html, diff } = getHtml(value, newIdx, caret);
78 | chars.push({newHasCaret}{html});
79 | newIdx = newIdx + diff;
80 | }
81 | return {
82 | diff: newIdx - idx,
83 | html: {[...chars]}
84 | }
85 | }
86 | if (char === '}') {
87 | return {
88 | diff: 1,
89 | html: {hasCaret}{char}
90 | };
91 | }
92 |
93 | if (char === '\'') {
94 | const chars = [{hasCaret}{`'`}];
95 | let newIdx = idx + 1;
96 | while (newIdx < value.length) {
97 | const newHasCaret = showCaret(caret, newIdx);
98 | chars.push({newHasCaret}{formatSpecial(value[newIdx])});
99 | if (value[newIdx] === '\'') {
100 | newIdx++;
101 | break;
102 | }
103 | newIdx++;
104 | }
105 | return {
106 | diff: newIdx - idx,
107 | html: {[...chars]}
108 | }
109 | }
110 |
111 | if (char === '"') {
112 | const chars = [{hasCaret}{`"`}];
113 | let newIdx = idx + 1;
114 | while (newIdx < value.length) {
115 | const newHasCaret = showCaret(caret, newIdx);
116 | chars.push({newHasCaret}{formatSpecial(value[newIdx])});
117 | if (value[newIdx] === '"') {
118 | newIdx++;
119 | break;
120 | }
121 | newIdx++;
122 | }
123 | return {
124 | diff: newIdx - idx,
125 | html: {[...chars]}
126 | }
127 | }
128 |
129 | return {
130 | diff: 1,
131 | html: {hasCaret}{char}
132 | };
133 | }
134 |
135 | const formatter = (value, caret) => {
136 | if (!value) return ;
137 | let idx = 0;
138 | const res = [];
139 | while (idx < value.length) {
140 | const { html, diff } = getHtml(value, idx, caret);
141 | res.push(html)
142 | idx = idx + diff
143 | }
144 | if (caret === value.length) res.push()
145 |
146 | return res;
147 | }
148 |
149 | export default formatter;
150 |
--------------------------------------------------------------------------------
/client/utils/search-utils.js:
--------------------------------------------------------------------------------
1 | // import React from 'react';
2 |
3 |
4 | export const methodSuggestions = [
5 | { value: 'aggregate()', caretOffset: 0 },
6 | { value: 'count()', caretOffset: 0 },
7 | { value: 'createCollection()', caretOffset: -1 },
8 | { value: 'createIndex()', caretOffset: -1 },
9 | { value: 'distinct()', caretOffset: -1 },
10 | { value: 'drop()', caretOffset: 0 },
11 | { value: 'find()', caretOffset: -1 },
12 | { value: 'findOne()', caretOffset: -1 },
13 | { value: 'findAndModify()', caretOffset: -1 },
14 | { value: 'getCollectionNames()', caretOffset: 0 },
15 | { value: 'getSiblingDB()', caretOffset: -1 },
16 | { value: 'group()', caretOffset: -1 },
17 | { value: 'insert()', caretOffset: -1 },
18 | { value: 'limit()', caretOffset: -1 },
19 | { value: 'remove()', caretOffset: -1 },
20 | { value: 'save()', caretOffset: -1 },
21 | { value: 'sort()', caretOffset: -1 },
22 | { value: 'toArray()', caretOffset: 0 },
23 | { value: 'update()', caretOffset: -1 },
24 | { value: 'updateOne()', caretOffset: -1 },
25 | ];
26 |
27 | export const operatorSuggestions = [
28 | { value: 'geoNear', caretOffset: 0 },
29 | { value: 'group', caretOffset: 0 },
30 | { value: 'in', caretOffset: 0 },
31 | { value: 'match', caretOffset: 0 },
32 | { value: 'set', caretOffset: 0 },
33 | { value: 'sum', caretOffset: 0 },
34 | { value: 'sort', caretOffset: 0 },
35 | ]
36 |
37 | export const generalSuggestions = [
38 | { value: 'ObjectId()', caretOffset: -1 },
39 | ]
40 |
41 |
42 | export const specialCodes = [
43 | 186, // ;
44 | 222, // '
45 | 221, // ]
46 | 219, // [
47 | 190, // .
48 | ]
49 |
50 | export const specialCodesDic = [
51 | ';',
52 | "'",
53 | ']',
54 | '[',
55 | '.',
56 | ]
57 |
58 | export const shiftCodes = [
59 | 57, // (
60 | 48, // )
61 | 186, // :
62 | 222, // "
63 | 221, // }
64 | 219, // {
65 | ]
66 |
67 | export const shiftCodesDic = [
68 | '(',
69 | ')',
70 | ':',
71 | '"',
72 | '}',
73 | '{',
74 | ]
75 |
76 | export const getSuggestions = (collections, search, caret) => {
77 | if (search.length < 3) return [];
78 |
79 | const typing = search.substring(0, caret);
80 |
81 | const mappedCollections = collections.map(v => ({ value: v, caretOffset: 0 }));
82 |
83 | const collectionCheck = checkSuggestions(mappedCollections, 'db.', typing, search);
84 | if (collectionCheck.length > 0) return collectionCheck;
85 |
86 | const methodCheck = checkSuggestions(methodSuggestions, '.', typing, search);
87 | if (methodCheck.length > 0) return methodCheck;
88 |
89 | const operatorCheck = checkSuggestions(operatorSuggestions, '$', typing, search);
90 | if(operatorCheck.length > 0) return operatorCheck;
91 |
92 | const generalCheck = checkSuggestions(generalSuggestions, ' ', typing, search);
93 | if (generalCheck.length > 0) return generalCheck;
94 |
95 | return [];
96 | };
97 |
98 | const checkSuggestions = (arr, base, typing, fullsearch) => {
99 | if (typing.indexOf(base) === -1) return [];
100 |
101 | const trimmedFull = fullsearch.substring(typing.lastIndexOf(base))
102 | const search = typing.substring(typing.lastIndexOf(base));
103 |
104 | if (search.length < base.length + 1) return [];
105 |
106 | return arr.filter(v => {
107 | const { value } = v;
108 | const compare = `${base}${value.toLowerCase()}`;
109 | if (trimmedFull.substring(0, compare.length).trim() === compare.trim()) return false;
110 | if (compare.trim() === search.trim()) return false;
111 | if (compare.indexOf(search) === 0) return true;
112 | return false;
113 | }).map(v => {
114 | const { value, caretOffset } = v;
115 | const compare = `${base}${value.toLowerCase()}`;
116 | return {
117 | base,
118 | prev: value.substring(0, (search.length - base.length)),
119 | next: value.substring(search.length - base.length, value.length),
120 | caretOffset }
121 | })
122 | };
123 |
124 | export const getCaret = (el) => {
125 | if(!el) return null;
126 | if (el.selectionStart) {
127 | return el.selectionStart;
128 | } else if (document.selection) {
129 | el.focus();
130 |
131 | var r = document.selection.createRange();
132 | if (r == null) {
133 | return 0;
134 | }
135 |
136 | var re = el.createTextRange(),
137 | rc = re.duplicate();
138 | re.moveToBookmark(r.getBookmark());
139 | rc.setEndPoint('EndToStart', re);
140 |
141 | return rc.text.length;
142 | }
143 | return 0;
144 | }
145 |
146 | export const setSelectionRange = (input, selectionStart, selectionEnd) => {
147 | if (input.setSelectionRange) {
148 | input.focus();
149 | input.setSelectionRange(selectionStart, selectionEnd);
150 | }
151 | else if (input.createTextRange) {
152 | var range = input.createTextRange();
153 | range.collapse(true);
154 | range.moveEnd('character', selectionEnd);
155 | range.moveStart('character', selectionStart);
156 | range.select();
157 | }
158 | }
159 |
--------------------------------------------------------------------------------
/client/css/bootstrap/less/input-groups.less:
--------------------------------------------------------------------------------
1 | //
2 | // Input groups
3 | // --------------------------------------------------
4 |
5 | // Base styles
6 | // -------------------------
7 | .input-group {
8 | position: relative; // For dropdowns
9 | display: table;
10 | border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
11 |
12 | // Undo padding and float of grid classes
13 | &[class*="col-"] {
14 | float: none;
15 | padding-left: 0;
16 | padding-right: 0;
17 | }
18 |
19 | .form-control {
20 | // Ensure that the input is always above the *appended* addon button for
21 | // proper border colors.
22 | position: relative;
23 | z-index: 2;
24 |
25 | // IE9 fubars the placeholder attribute in text inputs and the arrows on
26 | // select elements in input groups. To fix it, we float the input. Details:
27 | // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
28 | float: left;
29 |
30 | width: 100%;
31 | margin-bottom: 0;
32 | }
33 | }
34 |
35 | // Sizing options
36 | //
37 | // Remix the default form control sizing classes into new ones for easier
38 | // manipulation.
39 |
40 | .input-group-lg > .form-control,
41 | .input-group-lg > .input-group-addon,
42 | .input-group-lg > .input-group-btn > .btn {
43 | .input-lg();
44 | }
45 | .input-group-sm > .form-control,
46 | .input-group-sm > .input-group-addon,
47 | .input-group-sm > .input-group-btn > .btn {
48 | .input-sm();
49 | }
50 |
51 |
52 | // Display as table-cell
53 | // -------------------------
54 | .input-group-addon,
55 | .input-group-btn,
56 | .input-group .form-control {
57 | display: table-cell;
58 |
59 | &:not(:first-child):not(:last-child) {
60 | border-radius: 0;
61 | }
62 | }
63 | // Addon and addon wrapper for buttons
64 | .input-group-addon,
65 | .input-group-btn {
66 | width: 1%;
67 | white-space: nowrap;
68 | vertical-align: middle; // Match the inputs
69 | }
70 |
71 | // Text input groups
72 | // -------------------------
73 | .input-group-addon {
74 | padding: @padding-base-vertical @padding-base-horizontal;
75 | font-size: @font-size-base;
76 | font-weight: normal;
77 | line-height: 1;
78 | color: @input-color;
79 | text-align: center;
80 | background-color: @input-group-addon-bg;
81 | border: 1px solid @input-group-addon-border-color;
82 | border-radius: @border-radius-base;
83 |
84 | // Sizing
85 | &.input-sm {
86 | padding: @padding-small-vertical @padding-small-horizontal;
87 | font-size: @font-size-small;
88 | border-radius: @border-radius-small;
89 | }
90 | &.input-lg {
91 | padding: @padding-large-vertical @padding-large-horizontal;
92 | font-size: @font-size-large;
93 | border-radius: @border-radius-large;
94 | }
95 |
96 | // Nuke default margins from checkboxes and radios to vertically center within.
97 | input[type="radio"],
98 | input[type="checkbox"] {
99 | margin-top: 0;
100 | }
101 | }
102 |
103 | // Reset rounded corners
104 | .input-group .form-control:first-child,
105 | .input-group-addon:first-child,
106 | .input-group-btn:first-child > .btn,
107 | .input-group-btn:first-child > .btn-group > .btn,
108 | .input-group-btn:first-child > .dropdown-toggle,
109 | .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
110 | .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
111 | .border-right-radius(0);
112 | }
113 | .input-group-addon:first-child {
114 | border-right: 0;
115 | }
116 | .input-group .form-control:last-child,
117 | .input-group-addon:last-child,
118 | .input-group-btn:last-child > .btn,
119 | .input-group-btn:last-child > .btn-group > .btn,
120 | .input-group-btn:last-child > .dropdown-toggle,
121 | .input-group-btn:first-child > .btn:not(:first-child),
122 | .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
123 | .border-left-radius(0);
124 | }
125 | .input-group-addon:last-child {
126 | border-left: 0;
127 | }
128 |
129 | // Button input groups
130 | // -------------------------
131 | .input-group-btn {
132 | position: relative;
133 | // Jankily prevent input button groups from wrapping with `white-space` and
134 | // `font-size` in combination with `inline-block` on buttons.
135 | font-size: 0;
136 | white-space: nowrap;
137 |
138 | // Negative margin for spacing, position for bringing hovered/focused/actived
139 | // element above the siblings.
140 | > .btn {
141 | position: relative;
142 | + .btn {
143 | margin-left: -1px;
144 | }
145 | // Bring the "active" button to the front
146 | &:hover,
147 | &:focus,
148 | &:active {
149 | z-index: 2;
150 | }
151 | }
152 |
153 | // Negative margin to only have a 1px border between the two
154 | &:first-child {
155 | > .btn,
156 | > .btn-group {
157 | margin-right: -1px;
158 | }
159 | }
160 | &:last-child {
161 | > .btn,
162 | > .btn-group {
163 | margin-left: -1px;
164 | }
165 | }
166 | }
167 |
--------------------------------------------------------------------------------
/client/routes/home/connection-modal.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Modal from 'components/modal';
3 | import SimpleForm from 'routes/home/connection-form';
4 |
5 | const grey = '#696969';
6 |
7 | class ConnectionModal extends Component {
8 | constructor (props) {
9 | super(props);
10 | this.state = { editing: null, deleting: null }
11 | }
12 | render () {
13 | const { modalOpen, onModalClose, connections, handleSubmit } = this.props;
14 | const onSetEdit = (index) => {
15 | this.setState({ editing: index });
16 | }
17 | const onSetDelete = (index) => {
18 | this.setState({ deleting: index });
19 | }
20 | const handleAdd = () => {
21 | this.setState({ editing: 'add' });
22 | }
23 | const onConfirmDelete = (index) => {
24 | const newConnections = Object.assign([], connections);
25 | newConnections.splice(index, 1);
26 | handleSubmit(newConnections);
27 | this.setState({ deleting: null });
28 | }
29 |
30 | const handleClearDelete = () => onSetDelete(null);
31 | const handleCancelEdit = () => onSetEdit(null);
32 |
33 | const handleAddConnection = (connection) => {
34 | const newConnections = Object.assign([], connections);
35 | newConnections.push(connection);
36 | handleSubmit(newConnections);
37 | this.setState({ editing: null });
38 | }
39 |
40 | const onSaveEditConnection = (connection, index) => {
41 | const newConnections = Object.assign([], connections);
42 | newConnections[index] = connection;
43 | handleSubmit(newConnections);
44 | this.setState({ editing: null });
45 | }
46 | const { editing, deleting } = this.state;
47 | return (
48 |
49 |
50 |
51 | Manage Connections
52 |
53 |
54 |
55 |
56 |
66 |
67 |
68 | );
69 | }
70 | if (deleting === index) {
71 | return (
72 |
73 |
74 |
Are you sure?
75 |
76 |
77 |
78 |
79 |
80 |
85 |
{v.name}
86 |
{v.url}
87 |
{v.port}
88 |
89 |
90 |
91 |
92 |
93 |
98 |
99 |
100 | )}
101 | {(editing !== 'add') && (
102 |
103 |
104 |
105 | Connection
106 |
107 |
108 |
111 |
105 | {pages}
106 |
107 | )
108 | }
109 | render () {
110 | const { data } = this.props;
111 | const maxRows = 10;
112 | const maxPages = 8;
113 |
114 | const showPagination = Array.isArray(data);
115 | const lengthData = showPagination ? data.length : 0
116 |
117 | const { currentPage } = this.state;
118 | let displayData = data;
119 | if (lengthData > maxRows) {
120 | const copiedData = Object.assign([], data);
121 | displayData = copiedData.splice(maxRows * currentPage, maxRows);
122 | }
123 |
124 | const numPages = Math.ceil(lengthData / maxRows);
125 | const onPageClick = (index) => {
126 | this.setState({ currentPage: index });
127 | }
128 | const pagination = (
129 |
130 |
131 |
132 |
133 |
134 |
135 | {getPages(numPages, currentPage, onPageClick, maxPages)}
136 |
137 |
138 |
139 |
140 |
141 |
145 | {showPagination && pagination}
146 |
147 | {showPagination && pagination}
148 |
149 | )
150 | }
151 | }
152 |
153 | export default JsonContainer;
154 |
--------------------------------------------------------------------------------
/client/css/bootstrap/less/responsive-utilities.less:
--------------------------------------------------------------------------------
1 | //
2 | // Responsive: Utility classes
3 | // --------------------------------------------------
4 |
5 |
6 | // IE10 in Windows (Phone) 8
7 | //
8 | // Support for responsive views via media queries is kind of borked in IE10, for
9 | // Surface/desktop in split view and for Windows Phone 8. This particular fix
10 | // must be accompanied by a snippet of JavaScript to sniff the user agent and
11 | // apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
12 | // our Getting Started page for more information on this bug.
13 | //
14 | // For more information, see the following:
15 | //
16 | // Issue: https://github.com/twbs/bootstrap/issues/10497
17 | // Docs: http://getbootstrap.com/getting-started/#support-ie10-width
18 | // Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
19 | // Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
20 |
21 | @-ms-viewport {
22 | width: device-width;
23 | }
24 |
25 |
26 | // Visibility utilities
27 | // Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0
28 | .visible-xs,
29 | .visible-sm,
30 | .visible-md,
31 | .visible-lg {
32 | .responsive-invisibility();
33 | }
34 |
35 | .visible-xs-block,
36 | .visible-xs-inline,
37 | .visible-xs-inline-block,
38 | .visible-sm-block,
39 | .visible-sm-inline,
40 | .visible-sm-inline-block,
41 | .visible-md-block,
42 | .visible-md-inline,
43 | .visible-md-inline-block,
44 | .visible-lg-block,
45 | .visible-lg-inline,
46 | .visible-lg-inline-block {
47 | display: none !important;
48 | }
49 |
50 | .visible-xs {
51 | @media (max-width: @screen-xs-max) {
52 | .responsive-visibility();
53 | }
54 | }
55 | .visible-xs-block {
56 | @media (max-width: @screen-xs-max) {
57 | display: block !important;
58 | }
59 | }
60 | .visible-xs-inline {
61 | @media (max-width: @screen-xs-max) {
62 | display: inline !important;
63 | }
64 | }
65 | .visible-xs-inline-block {
66 | @media (max-width: @screen-xs-max) {
67 | display: inline-block !important;
68 | }
69 | }
70 |
71 | .visible-sm {
72 | @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
73 | .responsive-visibility();
74 | }
75 | }
76 | .visible-sm-block {
77 | @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
78 | display: block !important;
79 | }
80 | }
81 | .visible-sm-inline {
82 | @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
83 | display: inline !important;
84 | }
85 | }
86 | .visible-sm-inline-block {
87 | @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
88 | display: inline-block !important;
89 | }
90 | }
91 |
92 | .visible-md {
93 | @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
94 | .responsive-visibility();
95 | }
96 | }
97 | .visible-md-block {
98 | @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
99 | display: block !important;
100 | }
101 | }
102 | .visible-md-inline {
103 | @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
104 | display: inline !important;
105 | }
106 | }
107 | .visible-md-inline-block {
108 | @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
109 | display: inline-block !important;
110 | }
111 | }
112 |
113 | .visible-lg {
114 | @media (min-width: @screen-lg-min) {
115 | .responsive-visibility();
116 | }
117 | }
118 | .visible-lg-block {
119 | @media (min-width: @screen-lg-min) {
120 | display: block !important;
121 | }
122 | }
123 | .visible-lg-inline {
124 | @media (min-width: @screen-lg-min) {
125 | display: inline !important;
126 | }
127 | }
128 | .visible-lg-inline-block {
129 | @media (min-width: @screen-lg-min) {
130 | display: inline-block !important;
131 | }
132 | }
133 |
134 | .hidden-xs {
135 | @media (max-width: @screen-xs-max) {
136 | .responsive-invisibility();
137 | }
138 | }
139 | .hidden-sm {
140 | @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
141 | .responsive-invisibility();
142 | }
143 | }
144 | .hidden-md {
145 | @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
146 | .responsive-invisibility();
147 | }
148 | }
149 | .hidden-lg {
150 | @media (min-width: @screen-lg-min) {
151 | .responsive-invisibility();
152 | }
153 | }
154 |
155 |
156 | // Print utilities
157 | //
158 | // Media queries are placed on the inside to be mixin-friendly.
159 |
160 | // Note: Deprecated .visible-print as of v3.2.0
161 | .visible-print {
162 | .responsive-invisibility();
163 |
164 | @media print {
165 | .responsive-visibility();
166 | }
167 | }
168 | .visible-print-block {
169 | display: none !important;
170 |
171 | @media print {
172 | display: block !important;
173 | }
174 | }
175 | .visible-print-inline {
176 | display: none !important;
177 |
178 | @media print {
179 | display: inline !important;
180 | }
181 | }
182 | .visible-print-inline-block {
183 | display: none !important;
184 |
185 | @media print {
186 | display: inline-block !important;
187 | }
188 | }
189 |
190 | .hidden-print {
191 | @media print {
192 | .responsive-invisibility();
193 | }
194 | }
195 |
--------------------------------------------------------------------------------
/client/routes/home/search.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import ReactDOM, { findDOMNode } from 'react-dom';
3 | import JsonInput from 'utils/json-input';
4 | import {
5 | methodSuggestions,
6 | operatorSuggestions,
7 | generalSuggestions,
8 | getSuggestions,
9 | getCaret,
10 | setSelectionRange,
11 | specialCodes,
12 | specialCodesDic,
13 | shiftCodes,
14 | shiftCodesDic,
15 | } from 'utils/search-utils';
16 |
17 | import formatter from 'utils/formatter-utils';
18 |
19 | class Search extends Component {
20 | constructor (props) {
21 | super(props);
22 | this.handleKeyDown = this.handleKeyDown.bind(this);
23 | this.state = { activeSuggestion: 0, showSuggestion: false, suggestions: [] };
24 | }
25 | handleKeyDown(e) {
26 | // 40 arrow down, 38 arrow up, 13 enter
27 | const { keyCode, ctrlKey } = e;
28 | const { value } = e.target;
29 | const { handleSendQuery, currentDb, value: searchValue } = this.props;
30 | const { activeSuggestion, showSuggestion } = this.state;
31 |
32 | const jsonInput = this.refs.jsonInput || {};
33 | const { chooseSuggestion } = jsonInput;
34 | const { caret } = jsonInput.state || {};
35 |
36 | const collections = currentDb ? currentDb.collections.map(v => v.name) : [];
37 | const search = searchValue.toLowerCase();
38 | const suggestions = getSuggestions(collections, search, caret);
39 |
40 | this.setState({ suggestions });
41 |
42 | if (ctrlKey && keyCode === 13) {
43 | e.preventDefault();
44 | handleSendQuery();
45 | }
46 |
47 | if (suggestions.length > 0 && (keyCode === 40 || keyCode === 38 || keyCode === 13 || keyCode === 9)) {
48 | e.preventDefault();
49 | if (keyCode === 40 && activeSuggestion + 1 < suggestions.length) {
50 | return this.setState({ activeSuggestion: activeSuggestion + 1 });
51 | }
52 | if (keyCode === 38 && activeSuggestion > 0) {
53 | return this.setState({ activeSuggestion: activeSuggestion - 1 });
54 | }
55 | if (keyCode === 13 || keyCode === 9) {
56 | chooseSuggestion(suggestions[activeSuggestion].next, suggestions[activeSuggestion].caretOffset);
57 | this.setState({ suggestions: [], activeSuggestion: 0 });
58 | e.preventDefault();
59 | return true;
60 | }
61 | }
62 | this.forceUpdate();
63 | }
64 |
65 | render() {
66 | const { handleOnChange, value, handleSendQuery, currentDb } = this.props;
67 | const { activeSuggestion, showSuggestion, suggestions } = this.state;
68 |
69 | const { handleKeyDown } = this;
70 |
71 | const jsonInput = this.refs.jsonInput || {};
72 | const { caret, focus } = jsonInput.state || {};
73 | const { chooseSuggestion } = jsonInput;
74 |
75 | const { search } = jsonInput.refs || {}
76 | const { offsetHeight, scrollTop } = search ? search : { offsetHeight: 0, scrollTop: 0 };
77 |
78 | const handleSearchChange = (value) => {
79 | // if (showSuggestion === false) this.setState({ showSuggestion: true });
80 | handleOnChange(value);
81 | }
82 |
83 | return (
84 |
85 |
86 |
87 | {suggestions.length > 0 && focus && getSuggestionHtml(suggestions, value, activeSuggestion, caret, chooseSuggestion, scrollTop)}
88 | Send
89 |
90 |
)
97 |
98 | const getSuggestionHtml = (suggestions, value, activeSuggestion, caret, chooseSuggestion, scrollTop) => {
99 |
100 | const style = {
101 | position: 'absolute',
102 | top: `${6 - scrollTop}px`,
103 | zIndex: '2',
104 | left: '8px',
105 | fontFamily: 'monospace',
106 | fontSize: '14px',
107 | lineHeight: '1.42857143',
108 | pointerEvents: 'none',
109 | }
110 | const hiddenStyle = {
111 | visibility: 'hidden',
112 | display: 'inline-block',
113 | pointerEvents: 'none',
114 | }
115 |
116 | const suggestionsHtml = [];
117 | let subval;
118 | if (suggestions.length >= 5) return false;
119 |
120 | suggestions.map((v, index) => {
121 | const handleChooseSuggestion = () => chooseSuggestion(v.next, v.caretOffset);
122 | const subValue = Object.assign({}, { value }).value;
123 | const sub = subValue.substring(0, caret - v.prev.length);
124 | subval = sub.substring(sub.lastIndexOf('\n'), sub.length);
125 | const className = activeSuggestion === index ? "suggestion suggestion-active" : "suggestion";
126 |
127 | suggestionsHtml.push(
128 |
129 | {v.prev}{v.next}
130 |
131 |
132 | );
133 | });
134 |
135 | return (
136 |
137 |
{formatValue(value.substring(0, caret))}
138 |
139 |
{`${subval}`}
140 |
141 | {suggestionsHtml}
142 |
143 |
144 |
84 |
85 |
86 |
87 |
88 |
MongoMonkey
89 |
Manage Connections
90 |
91 |
92 |
93 |
94 |
95 |
96 |
102 | {dbLoading && (
103 |
104 |
105 |
106 | )}
107 | {!dbLoading && (
108 |
112 | )}
113 |
114 |
115 |
116 |
117 |
118 |
119 | {queryLoading && (
120 |
121 |
122 | {/*
Loading ...
*/}
123 |
124 | )}
125 | {!queryLoading && (
126 |
127 | )}
128 |
129 |