diff --git a/app/package.json b/app/package.json index a5d584c335..b0e2119718 100644 --- a/app/package.json +++ b/app/package.json @@ -1,7 +1,7 @@ { "name": "fiftyone", "productName": "FiftyOne", - "version": "0.13.1", + "version": "0.13.2", "license": "Apache-2.0", "description": "FiftyOne by Voxel51", "main": "./dist/main.js", diff --git a/app/src/components/FieldsSidebar.tsx b/app/src/components/FieldsSidebar.tsx index 7fb72eeaf4..f47cf64374 100644 --- a/app/src/components/FieldsSidebar.tsx +++ b/app/src/components/FieldsSidebar.tsx @@ -611,7 +611,7 @@ const ScalarsCell = ({ modal }: ScalarsCellProps) => { filtering.filteredScalars(modal) )} entries={scalars - .filter((name) => !(name === "filepath" && modal)) + .filter((name) => !(["filepath", "id"].includes(name) && modal)) .map((name) => { return { name, diff --git a/app/src/components/Header.tsx b/app/src/components/Header.tsx index f683e8504d..48d6ab3138 100644 --- a/app/src/components/Header.tsx +++ b/app/src/components/Header.tsx @@ -6,7 +6,6 @@ import React, { useState, } from "react"; import styled from "styled-components"; -import { Checkbox } from "@material-ui/core"; import { useRecoilState, useRecoilValue, useResetRecoilState } from "recoil"; import AuosizeInput from "react-input-autosize"; import { Machine, assign } from "xstate"; @@ -14,7 +13,7 @@ import { useMachine } from "@xstate/react"; import uuid from "uuid-v4"; import { animated, useSpring } from "react-spring"; import { ThemeContext } from "styled-components"; -import { Close } from "@material-ui/icons"; +import { Close, Group } from "@material-ui/icons"; import { GitHub, MenuBook } from "@material-ui/icons"; import { BestMatchDiv } from "./ViewBar/ViewStage/BestMatch"; @@ -25,7 +24,7 @@ import ExternalLink from "./ExternalLink"; import { Slack } from "../icons"; import * as atoms from "../recoil/atoms"; import * as selectors from "../recoil/selectors"; -import socket, { http, appContext } from "../shared/connection"; +import socket, { http } from "../shared/connection"; import { useTheme } from "../utils/hooks"; import { packageMessage } from "../utils/socket"; @@ -335,20 +334,21 @@ const Input = styled.input` } `; -const TshirtForm = () => { +const TeamsForm = () => { const [formState, setFormState] = useState({ email: "", + firstname: "", + lastname: "", + company: "", + role: "", discover: "", - helping: "", - improve: "", - tshirt: false, }); const [submitText, setSubmitText] = useState("Submit"); - const [submitted, setSubmitted] = useRecoilState(atoms.feedbackSubmitted); + const [submitted, setSubmitted] = useRecoilState(atoms.teamsSubmitted); const portalId = 4972700; - const formId = "b56682f6-c297-4cea-95c4-9e05a00528af"; + const formId = "87aa5367-a8f1-4ed4-9e23-1fdf8448d807"; const postUrl = `https://api.hsforms.com/submissions/v3/integration/submit/${portalId}/${formId}`; - const closeFeedback = useRecoilValue(atoms.closeFeedback); + const closeTeams = useRecoilValue(atoms.closeTeams); const theme = useTheme(); const setFormValue = (name) => (e) => @@ -359,9 +359,8 @@ const TshirtForm = () => { const disabled = !( formState.email?.length && - formState.helping?.length && - formState.improve?.length && - formState.discover?.length + formState.firstname?.length && + formState.lastname?.length ) || submitted.submitted; const submit = () => { if (disabled) { @@ -373,8 +372,8 @@ const TshirtForm = () => { const finalize = () => { setSubmitText("Submitted. Thank you!"); setSubmitted({ ...submitted, submitted: true }); - fetch(`${http}/feedback?submitted=true`, { method: "post" }); - setTimeout(() => closeFeedback && closeFeedback.close(), 2000); + fetch(`${http}/teams?submitted=true`, { method: "post" }); + setTimeout(() => closeTeams && closeTeams.close(), 2000); }; fetch(postUrl, { @@ -385,28 +384,28 @@ const TshirtForm = () => { submittedAt: Date.now(), fields: [ { - name: "email", - value: formState.email, + name: "firstname", + value: formState.firstname, }, { - name: "is_fiftyone_helping_your_work_how_so_", - value: formState.helping, + name: "lastname", + value: formState.lastname, }, { - name: "how_could_we_improve_fiftyone_", - value: formState.improve, + name: "email", + value: formState.email, }, { - name: "app_how_did_you_hear_about_us", - value: formState.discover, + name: "company", + value: formState.company, }, { - name: "zoom_call_and_t_shirt", - value: formState.tshirt, + name: "role", + value: formState.role, }, { - name: "app_context", - value: appContext, + name: "app_how_did_you_hear_about_us", + value: formState.discover, }, ], context: { pageName: "FiftyOne App" }, @@ -427,50 +426,48 @@ const TshirtForm = () => { }; return ( <> + + -
- - setFormState({ ...formState, tshirt: !formState.tshirt }) - } - style={{ - color: theme.brand, - paddingLeft: 0, - paddingTop: 0, - }} - /> -

- I'm open to a Zoom call and a free t-shirt! -

-
- ) : showFeedbackButton === "minimized" ? ( - ) : null; }; @@ -684,7 +680,7 @@ const Header = ({ addNotification }) => { - + { } } else if ( scalars.includes(cur) && - ![null, undefined].includes(sample[cur]) + ![null, undefined].includes(sample[cur === "id" ? "_id" : cur]) ) { - const value = prettify(sample[cur], false); + const value = prettify(sample[cur === "id" ? "_id" : cur], false); acc = [ ...acc, ({ default: 1, }); -export const appFeedbackIsOpen = atom({ - key: "appFeedbackIsOpen", +export const appTeamsIsOpen = atom({ + key: "appTeamsIsOpen", default: false, }); diff --git a/app/src/recoil/selectors.ts b/app/src/recoil/selectors.ts index 5cdd6184dc..bae8e759af 100644 --- a/app/src/recoil/selectors.ts +++ b/app/src/recoil/selectors.ts @@ -8,8 +8,6 @@ import { VALID_LABEL_TYPES, VALID_SCALAR_TYPES, makeLabelNameGroups, - labelTypeHasColor, - AGGS, VALID_LIST_TYPES, HIDDEN_LABEL_ATTRS, LABEL_LIST, @@ -53,24 +51,24 @@ export const fiftyone = selector({ }, }); -export const showFeedbackButton = selector({ - key: "showFeedbackButton", +export const showTeamsButton = selector({ + key: "showTeamsButton", get: ({ get }) => { - const feedback = get(fiftyone).feedback; - const localFeedback = get(atoms.feedbackSubmitted); - const storedFeedback = window.localStorage.getItem("fiftyone-feedback"); - if (storedFeedback) { - window.localStorage.removeItem("fiftyone-feedback"); - fetch(`${http}/feedback?submitted=true`, { method: "post" }); + const teams = get(fiftyone).teams; + const localTeams = get(atoms.teamsSubmitted); + const storedTeams = window.localStorage.getItem("fiftyone-teams"); + if (storedTeams) { + window.localStorage.removeItem("fiftyone-teams"); + fetch(`${http}/teams?submitted=true`, { method: "post" }); } if ( - feedback.submitted || - localFeedback.submitted || - storedFeedback === "submitted" + teams.submitted || + localTeams.submitted || + storedTeams === "submitted" ) { return "hidden"; } - if (feedback.minimized || localFeedback.minimized) { + if (teams.minimized || localTeams.minimized) { return "minimized"; } return "shown"; diff --git a/docs/source/_static/css/custom.css b/docs/source/_static/css/custom.css index b314d1495a..03c2afa1e2 100644 --- a/docs/source/_static/css/custom.css +++ b/docs/source/_static/css/custom.css @@ -321,7 +321,7 @@ article.pytorch-article .reference.download.internal { } .nav__main__logo { - width: 300px; + width: 260px; margin-left: 30px; margin-right: 20px; } diff --git a/docs/source/_static/css/voxel51-website.css b/docs/source/_static/css/voxel51-website.css index 2f16ae8fc0..c5ec9e0fbd 100644 --- a/docs/source/_static/css/voxel51-website.css +++ b/docs/source/_static/css/voxel51-website.css @@ -43,6 +43,8 @@ --padding-x: 10rem; --padding-y: 10rem; + + --bg-modal: rgba(33, 37, 41, 0.75); } .banner { @@ -82,7 +84,7 @@ white-space: nowrap; } -@media screen and (max-device-width: 850px) { +@media screen and (max-width: 850px) { .banner > div > span { font-size: 15px; line-height: 18px; @@ -163,14 +165,80 @@ text-decoration: underline; } -@media only screen and (min-device-width: 850px) { +/* modal classes */ + +.modal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1000; /* Sit on top */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + background-color: var(--bg-dark-primary); + background-color: var(--bg-modal); + justify-content: center; + flex-direction: column; +} + +/* Modal Content/Box */ +.modal-content { + background-color: var(--bg-light-primary); + padding: 3rem; + border: 2px solid var(--gray-light1); + border-radius: 3px; + width: auto; /* Could be more or less, depending on screen size */ + max-width: 80%; + width: 600px; + height: auto; + margin: auto; + max-height: 90%; + overflow-y: auto; +} + +/* The Close Button */ +.modal-close { + color: var(--text-primary-on-light); + float: right; + font-size: --fontsize-body; + font-weight: bold; +} + +.modal-close:hover, +.modal-close:focus { + text-decoration: none; + cursor: pointer; +} + +.modal p { + color: rgb(108, 117, 125); + font-size: 18px; +} + +.modal h2 { + color: var(--text-primary); + font-weight: 700; + font-size: 40px; + line-height: 52px; + margin-block-start: 0; + margin-block-end: 0rem; +} + +@media only screen and (min-width: 850px) { .mobile_only { display: none; } } +@media only screen and (min-width: 850px) and (max-width: 1240px) { + #try-fiftyone, + #octocat { + display: none; + } +} + /* mobile responsive nav elements all here */ -@media only screen and (min-device-width: 320px) and (max-device-width: 850px) { +@media only screen and (min-width: 320px) and (max-width: 850px) { /* navs do not stay at top in mobile mode */ .desktop_only { display: none; @@ -409,7 +477,7 @@ } /* Use Media Query for Mobile to Change Footer Completely */ -@media only screen and (min-device-width: 320px) and (max-device-width: 850px) { +@media only screen and (min-width: 320px) and (max-width: 850px) { .footer { display: grid; grid-template-columns: 100%; @@ -484,3 +552,77 @@ .list-inline > li:not(:last-child) { padding-right: 2rem; } + +.button-primary { + background: var(--color-primary); + color: var(--text-primary-on-dark) !important; + border-color: var(--color-primary); + border-radius: 3px; + border-width: 2px; + border-style: solid; + cursor: pointer; + + font-weight: 600; + font-size: 14px; + + padding: 0.4rem 1.2em; +} + +.button-primary:hover { + background: var(--color-primary-muted); + border-color: var(--color-primary-muted); + text-decoration: none; +} + +.button-secondary { + color: var(--color-primary) !important; + border-color: var(--color-primary); + border-radius: 3px; + border-width: 2px; /* XXX ask */ + border-style: solid; + cursor: pointer; + padding: 0.4em 1.4em; + font-size: 14px; + + font-weight: 600; /* XXX ask */ +} + +.button-secondary:hover { + background: var(--color-primary); + border-color: var(--color-primary); + color: var(--text-primary-on-dark) !important; + text-decoration: none; +} + +.text-brand { + color: var(--color-primary); +} + +.text-primary { + color: var(--text-primary); +} + +.text-primary-on-light { + color: var(--text-primary); +} + +.text-primary-on-dark { + color: var(--text-primary-on-dark); + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); +} + +.text-secondary-on-light { + color: var(--text-secondary-on-light); +} + +.text-secondary-on-dark { + color: var(--text-secondary-on-dark); +} + +.text-tertiary-on-light { + color: var(--text-tertiary-on-light); +} + +.text-tertiary-on-dark { + color: var(--text-tertiary-on-dark); +} diff --git a/docs/source/_templates/layout.html b/docs/source/_templates/layout.html index 6a022c7c0d..b361537307 100644 --- a/docs/source/_templates/layout.html +++ b/docs/source/_templates/layout.html @@ -1,11 +1,13 @@ -{% extends "!layout.html" %} - -{% block extrahead %} - - -{% endblock %} - -{% block custom_header %} +{% extends "!layout.html" %} {% block extrahead %} + + +{% endblock %} {% block custom_header %}
-
-{% endblock %} - -{% block custom_mobile_menu %} -{# delete PyTorch's menu because our own is reused on mobile #} -{% endblock %} - -{% block menu %} -{{ toctree(maxdepth=10, collapse=True, includehidden=True, titles_only=True) }} -{% endblock %} - -{% block custom_footer %} +{% endblock %} {% block custom_mobile_menu %} {# delete PyTorch's menu because +our own is reused on mobile #} {% endblock %} {% block menu %} {{ +toctree(maxdepth=10, collapse=True, includehidden=True, titles_only=True) }} {% +endblock %} {% block custom_footer %} -